Create a pulsing glow effect HTML5 canvas kineticJS

Question

I want to have droppable areas in my canvas where people can drag images, and I would like to add a glowing, pulsing effect around the droppable area so it is very easy for people to pick out where they can drag the objects.

I've found some things like HTML5 canvas create outer glow effect of shape but that isn't animated like a pulse.

So like this rectangle for example:

  var stage = new Kinetic.Stage({
        container: 'container',
        width: 578,
        height: 200
      });

      var layer = new Kinetic.Layer();

      var rect = new Kinetic.Rect({
        x: 239,
        y: 75,
        width: 100,
        height: 50,
        fill: 'white',
        stroke: 'black',
        strokeWidth: 4
      });

      // add the shape to the layer
      layer.add(rect);

      // add the layer to the stage
      stage.add(layer);

But instead of that black, I want a pulsing gold stroke.

Thoughts?

Answer 1

Looking for something like this? http://lamberta.github.com/html5-animation/examples/ch03/05-pulse.html

In essence it is done using the sine function (the code below is taken from lamberta project) and is pretty self explanatory:

 var canvas = document.getElementById('canvas'),
      context = canvas.getContext('2d'),
      ball = new Ball(),
      angle = 0,
      centerScale = 1,
      range = 0.5,
      speed = 0.05;

  ball.x = canvas.width / 2;
  ball.y = canvas.height / 2;

  (function drawFrame () {
    window.requestAnimationFrame(drawFrame, canvas);
    context.clearRect(0, 0, canvas.width, canvas.height);

    ball.scaleX = ball.scaleY = centerScale + Math.sin(angle) * range;
    angle += speed;
    ball.draw(context);
  }());

Answer 2

I'm not sure what your question is but its quite easy to create a pulse with a circle with kineticjs. Something like this:

var pulserect= rect.clone();
pulserect.setFill('gold');
pulserect.setScale(2,2);
layer.draw();

pulse.transitionTo({
scale:{x:0.5,
       y:0.5},
opacity:0.5,
duration: 0.5
});

jsfiddle