JSFiddle - React, Tailwind, and code Playground

by namuol

HTML

<canvas id='a' width='64' height='64'></canvas>
<canvas id='b' width='256' height='256'></canvas>
<div id='results'></div>

CSS

canvas, img {
    image-rendering: optimizeSpeed;
    image-rendering: -moz-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: optimize-contrast;
    -ms-interpolation-mode: nearest-neighbor;
    border: 5px solid #ddd;
}
canvas#a { width: 256px; height: 256px; } /* 4 * 64 = 256 */

JavaScript

var img, blitCount=600;

img = new Image;
img.src = 'http://upload.wikimedia.org/wikipedia/commons/f/f0/Pixelart-tv-iso.png';

img.onload = function () { 
    var ctx, fill, astart, aend, bstart, bend, i;
    
    ctx = $('#a')[0].getContext('2d');
    astart = new Date;
    for (i=0; i<blitCount; ++i) {
      ctx.drawImage(img,0,0,64,64);
    }
    aend = new Date;
    
    ctx = $('#b')[0].getContext('2d');
    fill = ctx.createPattern(img, 'repeat');
    ctx.fillStyle = fill;
    ctx.scale(4, 4);
    
    bstart = new Date;
    for (i=0; i<blitCount; ++i) {
        ctx.fillRect(0, 0, 64, 64);
    }
    bend = new Date;
    
    
    console.log(astart - aend);
    console.log(bstart - bend);
};