JSFiddle - React, Tailwind, and code Playground

by Drath

HTML

<canvas id="upscaledcanvas" width="160" height="160"></canvas>
<canvas id="upscaledcss" width="4" height="4"></canvas>
<canvas id="upscaledpattern" width="160" height="160"></canvas>
<canvas id="imagedatasource" width="4" height="4"></canvas>
<canvas id="upscaledimagedata" width="160" height="160"></canvas>

CSS

#upscaledcss {
    image-rendering: optimizeSpeed;
    image-rendering: -moz-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: optimize-contrast;
    -ms-interpolation-mode: nearest-neighbor;
    height: 160px;
    width: 160px;
}

#imagedatasource {
    display: none;
}

JavaScript

var sourceImage = new Image();
sourceImage.src = "http://vaughnroyko.com/jsfiddle/pixels.png";

sourceImage.onload = function() {

    //Upscaled via drawImage (canvas)
    var upscaledCanvas = document.getElementById('upscaledcanvas').getContext('2d');
    upscaledCanvas.mozImageSmoothingEnabled = false;
    upscaledCanvas.webkitImageSmoothingEnabled = false;
    upscaledCanvas.imageSmoothingEnabled = false;
    upscaledCanvas.drawImage(sourceImage, 0, 0, 4, 4, 0, 0, 160, 160);
    
    //Upscaled via CSS
    var upscaledCSS = document.getElementById('upscaledcss').getContext('2d');
    upscaledCSS.drawImage(sourceImage, 0, 0, 4, 4);
    
    //Upscaled via Pattern (hack)
    var upscaledPattern = document.getElementById('upscaledpattern').getContext('2d');
    upscaledPattern.mozImageSmoothingEnabled = false;
    upscaledPattern.webkitImageSmoothingEnabled = false;
    upscaledPattern.imageSmoothingEnabled = false;
    upscaledPattern.scale(40, 40);
    upscaledPattern.fillStyle = upscaledPattern.createPattern(sourceImage, 'repeat');
    upscaledPattern.fillRect(0, 0, 160, 160);
    
    //Upscaled via getImageData (slow)
    var imageDataSource = document.getElementById('imagedatasource').getContext('2d');
    
    imageDataSource.drawImage(sourceImage, 0, 0);
    var imgData = imageDataSource.getImageData(0,0,sourceImage.width,sourceImage.height).data;
    
    var upscaledImageData = document.getElementById('upscaledimagedata').getContext('2d');
    
    for (var x = 0; x < sourceImage.width; ++x){
        for (var y = 0 ; y < sourceImage.height; ++y){
            var i = (y * sourceImage.width + x) * 4;
            var r = imgData[i];
            var g = imgData[i+1];
            var b = imgData[i+2];
            var a = imgData[i+3];
            upscaledImageData.fillStyle = "rgba("+r+","+g+","+b+","+(a/255)+")";
            upscaledImageData.fillRect(x*40, y*40, 40, 40);
        }
    }    
}