JSFiddle - React, Tailwind, and code Playground

by Leo

HTML

<button type="button" onClick="changeIcon()">Change icon</button>    
<img id="image" src="http://wsm-0869.netcracker.com:8088/img/point-active.png" style="display: none;"/>
<canvas id="myCanvas" width="150" height="150"></canvas>

JavaScript

window.changeIcon = function(){
         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);

         var img=document.getElementById("image");        
         context.drawImage(img,0,5);
         
          
         context.translate(80, 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(-80, -radius);

      }
      
      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(); 
      }