How to remove an object from the canvas?

Posted by Marius Jonsson on Stack Overflow See other posts from Stack Overflow or by Marius Jonsson
Published on 2010-12-26T23:50:33Z Indexed on 2010/12/26 23:53 UTC
Read the original article Hit count: 285

Filed under:
|
|

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

© Stack Overflow or respective owner

Related posts about object

Related posts about delete