Javascript-canvas drawImage

Question

Is it better for performance to:

1. drawImage(img, ...) where img is an Image() or img is a canvas?

2. drawImage 2x with scaling (nearest neighbor), or clear an additional canvas, draw 2x to it without scaling, then draw the result 1x with scaling?

3. Round the px coordinates, width, height of the images being drawn, or leave them as floating points?

Answer 1

Why not do some jsPerfs and report your results to us here!

Until then, here's some highly speculative and anecdotal thoughts:

(#1) I used to recommend drawImage(image... but I saw a jsPerf comparing drawImage(image with drawImage(canvas that were very close when using GPU acceleration (can't remember where, but it was a response comment from someone in one of my SO answers). Probably because the GPU can blit the canvas context.getImageData about as fast a it can blit an Images data.

(#2) I have no idea...jsPerf with incremental scaling vs imageSmoothingEnabled==false (nearest-neighbor).

(#3) The browser casts to float anyway, but a Mozilla performance article suggests "Avoid floating-point coordinates and use integers instead.". Of course, pre-rounding takes some cpu cyles, so a jsPerf using actual design specific code is needed to determine which gives more performance in a specific situation.