Question

I’ve am trying to make a canvas animation:

var context;
var meter;
var pin;

function init() {
    var meter = new Image();
    var pin = new Image();
    var context = document.getElementById('canvas').getContext('2d');
    meter.src = 'background.png';
    pin.src = 'needle.png';
    context.drawImage(meter,0,0);
    context.translate(275,297);
    context.save();
    setTimeout(startup,500);
}

function startup() {
    var r=2;    // set rpm here.
    var i=r*36-27;
    var angleInRadians = 3.14159265 * i/180;  //converting degree to radian                
    context.rotate(angleInRadians); //rotating by angle
    context.drawImage(pin,-250,-3);  //adjusting pin center at meter center
    context.restore();
}

You can see the script at http://www.kingoslo.com/instruments/

With firebug I get error saying that context is undefined, which I think is strange.

Thanks.

Kind regards,
Marius

Answer 1

It’s probably because you are using “var” inside the init() function, that makes a new “context” variable local to that function instead of adding definition to the global one. So just drop the “var” before “context” in the init() function and it should work. You should drop the var in front of meter and pin too.