| <body> |
| <canvas id="target" width="400" height="400"></canvas> |
| <script> |
| const targetCanvas = document.getElementById('target'); |
| const target = targetCanvas.getContext('2d'); |
| |
| const canvasWidth = targetCanvas.width; |
| const canvasHeight = targetCanvas.height |
| |
| var sourceCanvas = document.createElement('canvas'); |
| sourceCanvas.width = canvasWidth; |
| sourceCanvas.height = canvasHeight; |
| |
| const source = sourceCanvas.getContext('2d'); |
| |
| let progressX = 0; |
| let progressY = 0; |
| const paintSize = 100; |
| |
| source.fillStyle = 'green'; |
| source.fillRect(0, 0, canvasWidth, canvasHeight); |
| const imagedata = source.getImageData(0, 0, canvasWidth, canvasHeight); |
| |
| function drawLoop() { |
| target.putImageData(imagedata, 0, 0, progressX, progressY, paintSize, paintSize); |
| |
| progressX += paintSize; |
| |
| if (progressX + paintSize <= canvasWidth) { |
| requestAnimationFrame(drawLoop); |
| return; |
| } |
| |
| if (progressY + paintSize > canvasHeight) { |
| if (window.testRunner) |
| testRunner.notifyDone(); |
| return; |
| } |
| |
| progressX = 0; |
| progressY += paintSize; |
| requestAnimationFrame(drawLoop); |
| } |
| |
| if (window.testRunner) |
| testRunner.waitUntilDone(); |
| |
| requestAnimationFrame(drawLoop); |
| </script> |
| </body> |
