<!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>