<!DOCTYPE html>
<style>
    canvas {
        width: 100px;
        height: 100px;
        image-rendering: pixelated;
    }
</style>
<body>
    <!-- The resulting image should be 100x100, consisting of 4 50x50 blocks of solid color, with no blurring of edges -->
    <canvas width="2" height="2"></canvas>
</body>
<script>
    var canvas;
    var imageHandle;
    canvas = document.getElementsByTagName("canvas")[0].getContext("2d");
    canvas.width = 2;
    canvas.height = 2;
    imageHandle = canvas.createImageData(2, 2);

    var index = 0;
    var length = imageHandle.data.length;

    imageHandle.data[index++] = 255;
    imageHandle.data[index++] = 0;
    imageHandle.data[index++] = 0;
    imageHandle.data[index++] = 255;

    imageHandle.data[index++] = 0;
    imageHandle.data[index++] = 255;
    imageHandle.data[index++] = 0;
    imageHandle.data[index++] = 255;

    imageHandle.data[index++] = 0;
    imageHandle.data[index++] = 0;
    imageHandle.data[index++] = 255;
    imageHandle.data[index++] = 255;

    imageHandle.data[index++] = 0;
    imageHandle.data[index++] = 0;
    imageHandle.data[index++] = 0;
    imageHandle.data[index++] = 255;

    canvas.putImageData(imageHandle, 0, 0);
</script>