| <!DOCTYPE html> |
| <body> |
| <canvas id="canvas1" width="100" height="100"></canvas> |
| <canvas id="canvas2" width="100" height="100"></canvas> |
| <canvas id="canvas3" width="100" height="100"></canvas> |
| <script> |
| let colors = ['red', 'green', 'blue']; |
| let canvases = ['canvas1', 'canvas2', 'canvas3']; |
| |
| colors.forEach(function(color, index, colors) { |
| var canvas = document.getElementById(canvases[colors.length - 1]); |
| var ctx = canvas.getContext('2d'); |
| ctx.fillStyle = color; |
| ctx.fillRect(0, 0, 100, 100); |
| |
| var canvasDest = document.getElementById(canvases[index]); |
| var ctxDest = canvasDest.getContext('2d'); |
| ctxDest.drawImage(canvas, 0, 0); |
| }); |
| </script> |
| </body> |
