# Animation with drawImage vs canvas

I have a canvas that draws the letter 'a' with a box:

 var cxt = document.getElementById('someCanvas').getContext('2d');
cxt.strokeRect(someX, someY, someWidth, someHeight);
cxt.fillText('a', someX, someY);


if I want to animate this to move and not leave the previous drawn canvas behind, I will need clearRect and re-draw it again:

 cxt.clearRect(someX, someY, someWidth, someHeight);
//cxt.strokeRect..
//cxt.fillText..


However, with drawImage, I can just increment its x/y without needing to clear/re-draw it again:

 cxt.drawImage(src, someX, someY);


I was wondering, would there be any performance difference of these two methods if I wanted more letters/others? Does drawImage clear itself the same way as clearRect?

• I'm not sure what you mean by "I can just increment its x/y wiithout needing to clear/re-draw it again". If you don't clear the canvas between draw calls, then the previously drawn stuff will stay on it, no matter what you use. – Bálint Dec 9 '17 at 10:33
• Oh what I meant was drawImage doesn't have clearRect because if you change the x position of drawImage, it won't leave behind the old position's image where as drawing a canvas will – rgex Dec 9 '17 at 14:34
• it will, but if the background of the image is the same as the background of the canvas, then it will overwrite it. Try using a completely black image on a white canvas – Bálint Dec 9 '17 at 15:50

drawImage doesn't clear the canvas. It would make drawing the same image multiple times impossible. You probably think this, because images with borders around the main parts of it "clear" (or rather overwrite) the already drawn ones.