Canvas How to - Duplicate canvas as image

Question

We would like to know how to duplicate canvas as image.
Answer


<html>
    <head>
        <script>
            window.onload = function(){<!--from   w ww  .j a v a2s.c  o m-->
                var canvas = document.getElementById("myCanvas");
                var context = canvas.getContext("2d");
                
                var startX = 200;
                var startY = 100;
                
                // draw cloud shape
                context.beginPath();
                context.moveTo(startX, startY);
                context.bezierCurveTo(startX - 40, startY + 20, startX - 40, startY + 70, startX + 60, startY + 70);
                context.bezierCurveTo(startX + 30, startY - 75, startX - 20, startY - 60, startX, startY);
                context.closePath();
                
                context.lineWidth = 5;
                context.fillStyle = "#8ED6FF";
                context.fill();
                context.strokeStyle = "#0000ff";
                context.stroke();
                
                // save canvas image as data url (png format by default)
                var dataURL = canvas.toDataURL();
                
                // set canvasImg image src to dataURL
                // so it can be saved as an image
                document.getElementById("canvasImg").src = dataURL;
            };
        </script>
    </head>
    <body>
        <p>
            Canvas:
        </p>
        <canvas id="myCanvas" width="600" height="250" style="border:1px solid black;">
        </canvas>
        <p>
            Image:
        </p>
        <img id="canvasImg" alt="Right click to save me!" style="display: block; border:1px solid black;">
    </body>
</html>
The code above is rendered as follows: