0
\$\begingroup\$

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?

|improve this question
\$\endgroup\$
  • \$\begingroup\$ 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. \$\endgroup\$ – Bálint Dec 9 '17 at 10:33
  • \$\begingroup\$ 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 \$\endgroup\$ – rgex Dec 9 '17 at 14:34
  • \$\begingroup\$ 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 \$\endgroup\$ – Bálint Dec 9 '17 at 15:50
1
\$\begingroup\$

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.

Here's a demo just so you see it in action

|improve this answer
\$\endgroup\$
  • \$\begingroup\$ is drawImage more efficient then drawing in canvas? \$\endgroup\$ – rgex Dec 9 '17 at 16:52
  • \$\begingroup\$ @rgex Than drawing what? A fillRect is definitely faster, but something like fillText maybe slower because it's basically a specialized drawimage \$\endgroup\$ – Bálint Dec 9 '17 at 17:33
  • \$\begingroup\$ would there be another alternative for fillText if I wanted to draw letters and other strings on the canvas? \$\endgroup\$ – rgex Dec 9 '17 at 17:50
  • \$\begingroup\$ @rgex Why do you need a faster solution? Don't prematurely optimize \$\endgroup\$ – Bálint Dec 9 '17 at 18:32
  • \$\begingroup\$ I was wondering down the road that I can use the most optimized methods for rendering graphics \$\endgroup\$ – rgex Dec 9 '17 at 19:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.