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?