Canvas pixel scaling

by yong

HTML

<canvas id="maincanvas"></canvas>

CSS

#maincanvas
{
    border: 1px solid black;
}

JavaScript

var img = new Image();
    img.src = '/img/logo.png';

function scale(scale) {
    var width = 160,
        height = 25,
        widthScaled = width * scale,
        heightScaled = height * scale,
        bgCanvas = document.createElement('canvas'),
        bgCtx = bgCanvas.getContext('2d'),
        bgPixels, mainCanvas, mainCtx, mainPixels;
    
    bgCanvas.width = width;
    bgCanvas.height = height;
    bgCtx.drawImage(img, 0, 0, width, height, 0, 0, width, height);
    bgPixels = bgCtx.getImageData(0, 0, width, height);
    
    mainCanvas = document.getElementById('maincanvas');
    mainCanvas.width = widthScaled;
    mainCanvas.height = heightScaled;
    mainCtx = mainCanvas.getContext('2d');
    mainPixels = mainCtx.getImageData(0, 0, widthScaled, heightScaled);
    
    for (var y = 0; y < heightScaled; y++) {
        for (var x = 0; x < widthScaled; x++) {
            var index = (Math.floor(y / scale) * width + Math.floor(x / scale)) * 4;
            var indexScaled = (y * widthScaled + x) * 4;
            mainPixels.data[indexScaled] = bgPixels.data[index];
            mainPixels.data[indexScaled + 1] = bgPixels.data[index + 1];
            mainPixels.data[indexScaled + 2] = bgPixels.data[index + 2];
            mainPixels.data[indexScaled + 3] = bgPixels.data[index + 3];
        }
    }
    
    mainCtx.putImageData(mainPixels, 0, 0);   
}

scale(3);