<!DOCTYPE html> 
<html>
<head>
<style> 
    canvas {
        display: block;
        position: fixed;
        left: 0px;
        top: 0px;
        right: 0px;
        bottom: 0px;
        border: none;
        width: 100px;
        height: 100px;
        margin: 0px;
        padding: 0px;
        image-rendering: -webkit-crisp-edges;
    }
</style> 
</head>
<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> 
    if (window.testRunner)
        testRunner.dumpAsText(true);

    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> 
</html>