Canvas pure draw vs png image

Question

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);

Answer 1

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.)