somanyerrorswhy somanyerrorswhy - 2 years ago 98
CSS Question

How would I generate a pulsating effect on an image that is to be drawn inside of a canvas?

var testPhoto = new Image();
testPhoto.src = ""
testPhoto.className = "pulse";

and then:

topSlice.drawImage(testPhoto, 100, 200, 40, 40);

It appears the pulsating effect doesn't work after drawing the image, how should I fix this? I'm following this tutorial for the pulsating effect.

Answer Source

You can use Window.requestAnimationFrame instead and work with blend modes / alpha blending:

var canvas = document.getElementById("canvas"),
    context = canvas.getContext("2d"),
    image = new Image();

image.src = "";

function update(timestamp) {
  context.clearRect(0, 0, canvas.width, canvas.height);
  context.globalAlpha = Math.sin(timestamp/100) * 0.5 + 0.5;
  context.drawImage(image, 0, 0);

<canvas id="canvas"></canvas>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download