61 lines
1.5 KiB
HTML
61 lines
1.5 KiB
HTML
<!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> |