| <!-- Test for https://bugs.webkit.org/show_bug.cgi?id=46319 --> |
| <head> |
| </head> |
| <body> |
| <canvas id="canvas" width="100" height="100"></canvas> |
| <script> |
| var canvas = document.getElementById('canvas'); |
| var ctx = canvas.getContext('2d'); |
| |
| // prepare imagedata |
| ctx.fillStyle = "rgb(255, 0, 0)"; ctx.fillRect(0, 0, 100, 100); // red background |
| ctx.fillStyle = "rgb(0, 255, 0)"; ctx.fillRect(10, 10, 10, 10); // inset green square |
| var imageDataGreen = ctx.getImageData(10, 10, 10, 10); |
| var imageDataRedWithInsetGreen = ctx.getImageData(0, 0, 30, 30); |
| |
| // clear canvas to dark green |
| ctx.fillStyle = "rgb(0, 128, 0)"; |
| ctx.fillRect(0, 0, 100, 100); |
| |
| // fill target locations with dark red |
| ctx.fillStyle = "rgb(128, 0, 0)"; |
| ctx.fillRect(0, 0, 10, 10); |
| ctx.fillRect(40, 40, 10, 10); |
| ctx.fillRect(80, 80, 10, 10); |
| |
| // patch up red squares with putImageData |
| ctx.putImageData(imageDataGreen, 0, 0); |
| ctx.putImageData(imageDataGreen, 40, 40); |
| ctx.putImageData(imageDataRedWithInsetGreen, 70, 70, 10, 10, 10, 10); |
| </script> |
| </body> |
