<!DOCTYPE html>
<style>
img {
display: none;
}
canvas {
width: 100px;
height: 100px;
image-rendering: pixelated;
}
.canvas2 {
image-rendering: auto;
}
</style>
<body>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAFElEQVQIHWP4z8DwHwyBNJDN8B8AQNEG+t5Ik2kAAAAASUVORK5CYII=">
<!-- Test that gpu accelerated canvases work with pixelated. -->
<!-- The result is 3 canvases, each with a 2x2 block of colors. Only the middle canvas should be blurred. -->
<canvas class="canvas0" width="4" height="4"></canvas>
<canvas class="canvas1" width="4" height="4"></canvas>
<canvas class="canvas2" width="4" height="4"></canvas>
</body>
<script>
function drawToCanvas(canvas) {
var ctx = canvas.getContext("2d")
ctx.drawImage(document.getElementsByTagName("img")[0], 1, 1);
}
function draw() {
drawToCanvas(document.getElementsByTagName("canvas")[0]);
var canvas1 = document.getElementsByTagName("canvas")[1];
var canvas2 = document.getElementsByTagName("canvas")[2];
drawToCanvas(canvas1);
drawToCanvas(canvas2);
// The first canvas stays pixelated. Flip the pixelated-ness of the
// other two.
canvas1.style.imageRendering = "auto";
canvas2.style.imageRendering = "pixelated";
}
window.onload = draw;
</script>