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?