How to remove an object from the canvas?
- by Marius Jonsson
Hello there,
I am making this script that will rotate a needle on a tachometer using canvas. I am a newbie to this canvas. This is my code:
function startup() {
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var meter = new Image();
meter.src = 'background.png';
var pin = new Image();
pin.src = 'needle.png';
context.drawImage(meter,0,0);
context.translate(275,297);
for (var frm = 0; frm < 6000; frm++){
var r=frm/1000; //handle here
var i=r*36-27; //angle of rotation from value of r and span
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
}
}
Here is the script in action:
http://www.kingoslo.com/instruments/
The problem is, as you can see, that the red needle is not removed beetween each for-loop.
What I need to do is to clear the canvas for the pin object between each cycle of the loop. How do I do this?
Thanks.
Kind regards,
Marius
