Js :: Download Canvas as PNG

<!DOCTYPE html>
<html>
<head>
    <title>Canvas Download Example</title>
</head>
<body>
    <canvas id="myCanvas" width="500" height="500" style="border:1px solid #000000;"></canvas>
    <br>
    <button id="downloadBtn">Download as PNG</button>

    <script>
        // Get the canvas element and context
        var canvas = document.getElementById('myCanvas');
        var context = canvas.getContext('2d');

        // Draw something on the canvas
        context.fillStyle = "blue";
        context.fillRect(50, 50, 150, 100);

        // Function to download the canvas as a PNG
        function downloadCanvas() {
            // Create a link element
            var link = document.createElement('a');
            link.download = 'canvas.png';
            link.href = canvas.toDataURL('image/png');
            link.click();
        }

        // Add event listener to the button
        document.getElementById('downloadBtn').addEventListener('click', downloadCanvas);
    </script>
</body>
</html>