JSFiddle - React, Tailwind, and code Playground

by Leo

HTML

<canvas id="myCanvas" width="80" height="40"></canvas>
<img id="copyCanvas"/>
<br>
<br>
<button type="button" onClick="copyCanvasToImage()">Copy Canvas To Image</button>    
<button type="button" onClick="clearImage()">Clear Image</button>

JavaScript

var canvas = document.getElementById('myCanvas');
    canvas.setAttribute('crossOrigin', 'anonymous');
    
    var context = canvas.getContext('2d');
    
    
    var a = 34; /* b=21 */
    var radius = a / 2; 
    
    var scale = 0.60;
    
    context.clearRect (0, 0, canvas.width, canvas.height);
    
    context.translate(40, radius);
    
    // outer
    drawSelectionEllipse(context, radius, 1/*xScale*/, scale/*yScale*/, 4/*lineWidth*/, 'rgba(0,128,255,0.35)');
    //inner
    drawSelectionEllipse(context, radius - 2, 1/*xScale*/, scale/*yScale*/, 1/*lineWidth*/, 'rgba(0,128,255,1)');
    //inner shadow
    drawSelectionEllipse(context, radius - 3, 1/*xScale*/, scale/*yScale*/, 1/*lineWidth*/, 'rgba(51,102,153,0.35)');
    
    context.translate(-40, -radius);
    

    window.copyCanvasToImage = function(){
        var copyCanvas = document.getElementById('copyCanvas');
        copyCanvas.src = canvas.toDataURL("image/png");
    }

    window.clearImage = function(){
        var copyCanvas = document.getElementById('copyCanvas');
        copyCanvas.src = "";
    }
    
    
    function drawSelectionEllipse(canvasContext, radius, xScale, yScale, lineWidth, strokeStyle)
    {
        canvasContext.save(); 
        canvasContext.scale(xScale, yScale);  
        canvasContext.beginPath();
        canvasContext.arc(0, 0, radius, 0, 2 * Math.PI, false);
        canvasContext.restore(); 
        canvasContext.lineWidth = lineWidth;
        canvasContext.strokeStyle = strokeStyle;
        canvasContext.stroke(); 
    }