CODEWITHSUNDEEP
javascripthtmlcanvasdrawimage
J261
J261

Reputation: 672

Canvas pure draw vs png image

which is faster (complex drawings). fillRect or reprint a png image drawImage. when reprint 10000 objects.

ctx.fillStyle="#FF0000";//RED COLOR
ctx.fillRect(0,0,50,50);

VS

ctx.drawImage(img,10,10);

Upvotes: 0

Views: 1242

Answers (1)

nullability
nullability

Reputation: 10677

drawImage is actually faster.

I've updated the test case with a 50x50 PNG: http://jsperf.com/canvas-draw-methods

In Firefox it's only slightly faster, but in Chrome the difference is huge, with drawImage being faster by an order of magnitude.

(Note the previous version of the test was wildly skewed since the PNG I was using was not the right size. Image size makes a big difference.)

Upvotes: 1

Related Questions