optimize-contrast-canvas.html | Explore in Territory

<!DOCTYPE html> 
<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-optimize-contrast;
	}
</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>
chromium/third_party/blink/web_tests/images/optimize-contrast-canvas.html
