CODEWITHSUNDEEP
javascriptanimationcanvasrequestanimationframe
Tanil
Tanil

Reputation: 348

Canvas Animation - Basics

I have tried creating a simple animation just so that the gradient block fills gradually across the box.

I tried a primitive debugging method by shoving some alerts in the middle of the animation function but didn't get any pop-ups.

Just let me know what you think the error could be cos I can't figure it out. I'm a newbie to animations but get the gist of it now so I don't think its a logical error.

  window.requestAnimFrame = (function(callback) {
    return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
    function(callback) {
      window.setTimeout(callback, 1000 / 60);
    };
  })();

function drawGradient(myGrad, ctx){
    var grd = ctx.createLinearGradient(0,0,200,0);
    grd.addColorStop(0,"black");
    grd.addColorStop(1,"grey");
    ctx.fillStyle=grd;
    ctx.fillRect(0,0,myGrad.width,100);  
}

function animate(myGrad,canvas,ctx,startTime){
    var time = (new Date()).getTime() - startTime;
    var linearSpeed = 100;
    var newX = linearSpeed * time / 1000;
    myGrad.width = newX;

    ctx.clearRect(0,0,200, 100);
    drawGradient(mrGrad, ctx);

    requestAnimFrame(function(){
        animate(myGrad,canvas,ctx,startTime);
    });
  }

 var canvas=document.getElementById("myCanvas");
 var ctx=c.getContext("2d");

 var myGrad = {
    width: 0
 };
 drawGradient(myGrad, ctx);

 setTimeout(function() {

        var startTime = (new Date()).getTime();
        animate(myGrad, canvas, ctx, startTime);
 }, 1000);

Thanks

Upvotes: 1

Views: 83

Answers (1)

Royi Namir
Royi Namir

Reputation: 148524

You have a typo :

enter image description here

What are those ?

here is the correct one : http://jsbin.com/qobiyadi/2/edit

Upvotes: 1

Related Questions