| <!DOCTYPE html> |
| <html> |
| <style> |
| body { |
| background-color: lightblue; |
| } |
| canvas { |
| width: 100px; |
| height: 50px; |
| } |
| </style> |
| |
| <body> |
| <canvas id="canvas2"></canvas> |
| </body> |
| |
| <script> |
| function createImage() |
| { |
| var canvas = new OffscreenCanvas(100, 50); |
| var ctx = canvas.getContext("2d"); |
| for (var y = 0; y < 50; y += 10) { |
| for (var x = ((y / 10) % 2) ? 0 : 10; x < 100; x += 20) { |
| switch (Math.round(x / 20) % 3) { |
| case 0: |
| ctx.fillStyle = "#f00"; |
| break; |
| case 1: |
| ctx.fillStyle = "#0f0"; |
| break; |
| case 2: |
| ctx.fillStyle = "#00f"; |
| break; |
| } |
| ctx.fillRect(x, y, 10, 10); |
| } |
| } |
| image = canvas.transferToImageBitmap(); |
| return image; |
| } |
| var canvas = document.getElementById("canvas2"); |
| canvas.width = 100; canvas.height = 50; |
| var ctx = canvas.getContext("2d"); |
| var image = createImage(); |
| ctx.drawImage(image, 0, 0); |
| </script> |
| </html> |
