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?

\$\endgroup\$
3
  • \$\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, 2017 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, 2017 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, 2017 at 15:50

1 Answer 1

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

\$\endgroup\$
6
  • \$\begingroup\$ is drawImage more efficient then drawing in canvas? \$\endgroup\$
    – rgex
    Dec 9, 2017 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, 2017 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, 2017 at 17:50
  • \$\begingroup\$ @rgex Why do you need a faster solution? Don't prematurely optimize \$\endgroup\$
    – Bálint
    Dec 9, 2017 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, 2017 at 19:47

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .