CODEWITHSUNDEEP
htmlcanvashtml5-canvas
Jeff E
Jeff E

Reputation: 181

HTML Canvas Shadow Animations

I'm looking to use HTML canvas to animate the shadow of a shape. I'm trying to create a glowing effect that grows, than shrinks the shadow blur of the canvas shape. I can't seem to figure out the right way to do it. Here's the code I have now:

var SB = 0;
var speed = 5;
function animate() {
reqAnimFrame = window.mozRequestAnimationFrame    ||
               window.webkitRequestAnimationFrame ||
               window.msRequestAnimationFrame     ||
               window.oRequestAnimationFrame
               ;

reqAnimFrame(animate);
if (SB == 100) {
  SB = 0
}else {
  SB += 5
}
draw();
}
function draw() {
  c = document.getElementById('myCanvas');
  ctx=c.getContext("2d");
  ctx.beginPath();
  ctx.arc(100,75,50,0,2*Math.PI);
  ctx.strokeStyle="#fff";
  ctx.fillStyle="#fff";
  ctx.shadowBlur=100;
  ctx.shadowColor="#7bca04";
  ctx.fill();
  ctx.stroke();
}
animate();

Any help would be appreciated. Thanks!

Upvotes: 0

Views: 603

Answers (1)

volter9
volter9

Reputation: 735

Something like that:

http://jsfiddle.net/Volter9/cMWv6/

  ctx.clearRect(0,0,400,400);
  ctx.beginPath();
  ctx.arc(100,75,50,0,2*Math.PI);
  ctx.strokeStyle="#fff";
  ctx.fillStyle="#fff";
  ctx.shadowBlur=SB;

Your key problem was you forgot to plug in shadowBlur your variable and you forgot to clear the canvas.

Good luck!

Upvotes: 1

Related Questions