JSFiddle - React, Tailwind, and code Playground

canvas scale 2

by ikaruss

HTML

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

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#b { } /* 4 * 64 = 256 */

JavaScript

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

img.onload = function () { 
    
        var ctx = document.getElementById('a').getContext("2d");
        ctx.imageSmoothingEnabled = false;
        ctx.webkitImageSmoothingEnabled = false;
        ctx.mozImageSmoothingEnabled = false;
        ctx.drawImage(img, 0, 0, 64, 64);

        var ctx = document.getElementById('b').getContext("2d");
        ctx.imageSmoothingEnabled = false;
        ctx.webkitImageSmoothingEnabled = false;
        ctx.mozImageSmoothingEnabled = false;
        ctx.drawImage(img, 0, 0, 256, 256);
    
};