| <!DOCTYPE html> |
| <html> |
| <head></head> |
| <body> |
| <canvas id="myCanvas" width="512" height="256"></canvas> |
| <div id="log"></div> |
| </body> |
| <script> |
| const offscreenCanvas = new OffscreenCanvas(256, 256); |
| ctx = offscreenCanvas.getContext("2d"); |
| |
| offscreenCanvas.width = 512; |
| ctx.translate(120, 60); |
| ctx.scale(2, 1); |
| ctx.rotate(Math.PI/8); |
| |
| ctx.fillStyle = "#ff00aa"; |
| ctx.fillRect(-40, -40, 40, 40); |
| ctx.fillStyle = "#ffaa00"; |
| ctx.fillRect(0, -40, 40, 40); |
| ctx.fillStyle = "#00aaff"; |
| ctx.fillRect(0, 0, 40, 40); |
| ctx.fillStyle = "#00ff00"; |
| ctx.fillRect(-40, 0, 40, 40); |
| |
| const canvas = document.getElementById("myCanvas"); |
| var ctx2 = canvas.getContext("2d"); |
| ctx2.drawImage(offscreenCanvas, 0, 0, 512, 256); |
| </script> |
| </html> |
