putimagedata vs drawimage
HTML
<canvas width="600" height="600" id="canv"></canvas>
JavaScript
function Uint8ToString(u8a){
var CHUNK_SZ = 0x8000;
var c = [];
for (var i=0; i < u8a.length; i+=CHUNK_SZ) {
c.push(String.fromCharCode.apply(null, u8a.subarray(i, i+CHUNK_SZ)));
}
return c.join("");
}
var canvas2 = document.createElement("canvas");
var canvas = document.getElementById("canv");
var ctx = canvas.getContext("2d");
var ctx2 = canvas2.getContext("2d");
var w = 600;
var h = 600;
canvas2.width = w; canvas2.height = h;
ctx2.fillRect(0,0,w,h);
var iters = 100;
var data = ctx2.getImageData(0,0,w,h);
var time = (new Date()).getTime();
for (var i = 0; i < iters; i++) {
ctx.putImageData(data,0,0);
}
console.log("time:" + ((new Date()).getTime() - time));
time = (new Date()).getTime();
//ctx.globalCompositeOperation="Copy";
for (var i = 0; i < iters; i++) {
//ctx.drawImage();
//var img = new Image();
ctx.drawImage(canvas2,0,0);
}
console.log("time:" + ((new Date()).getTime() - time));