| <!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> |
