<html>
<head>
    <title>Canvas sample</title>
</head>
<body>
    <canvas id="canvas" width="150" height="150"></canvas>
    <br/>
    <button type="button" id="convert">to base64</button>
    <br/>
    <textarea id="base64string" rows="20" cols="80"></textarea>
    <script type="text/javascript">
        (function () {

            //Draw canvas content
            var canvas = document.getElementById('canvas');
            var context = canvas.getContext('2d');
            var centerX = canvas.width / 2;
            var centerY = canvas.height / 2;
            var radius = 70;
            context.beginPath();
            context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
            context.fillStyle = 'green';
            context.fill();
            context.lineWidth = 5;
            context.strokeStyle = '#003300';
            context.stroke();
            
            //Add button handle for click
            document.getElementById('convert').addEventListener("click", function () {
                document.getElementById('base64string').value = document.getElementById('canvas').toDataURL();
            });
        })();
    </script>
</body>
</html>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.