Currently, I am facing an issue that I suspect is due to a mistake on my end, but I can't seem to pinpoint it. (This issue arises in Firefox 8)
Here's what I'm doing - I have a large sprite file, from which I extract a single tile and place it on a small canvas. Then, using the basic form of `drawImage`, I draw this isolated tile in multiple locations on my main "screen" canvas.
Instead of utilizing the last form of `drawImage` which allows for selecting only a portion of the larger sprite file, I have observed a surprising performance boost of around 10% in Chrome by avoiding this clipping method. However, in Firefox, the frame rate drops drastically from 300 to 17 FPS.
Based on my observations, it seems that transferring images directly to the canvas is significantly faster than copying images between canvases in Firefox, with a speed difference of approximately 20 times.
Is my understanding correct? I haven't come across any specific information regarding this scenario, but this is what my testing has revealed.
Below is the code snippet I am currently working with. Could there be something fundamentally wrong with it?
function Test5() {
var imgSprite = $('imgSprite');
var tileCanvas = document.createElement("canvas");
tileCanvas.width = 64; tileCanvas.height = 31;
var tileCtx = tileCanvas.getContext("2d");
tileCtx.drawImage(imgSprite, 0, 0, 64, 31, 0, 0, 64, 31);
//--------------------------------------
var ctx = getContext('mainScreen');
ctx.fillStyle = '#fff';
time(function() { // time will run this function many times and time it
ctx.fillRect(0,0, 1200,900);
var x=0, y=0, row = 0;
for (var i=1; i < 1000; i++) {
ctx.drawImage(tileCanvas, x,y);
// some simple code to calculate new x/y
}
}, 1000, "Test5", 'Drawing from an individual tile canvas, instead of a section of big sprite');
}
If, instead of
ctx.drawImage(tileCanvas, x,y);
I do :
ctx.drawImage(imgSprite, 0, 0, 64, 31, x, y, 64, 31);
The latter approach is 20 times quicker.
Am I overlooking something significant here?
EDIT: Following this query, I created a test page for myself to experiment with various methods on different platforms and determine the most efficient approach for each.
Please disregard the messy code layout in the link, as it was put together quickly and not intended for public viewing, even by myself after a few days.