JSFiddle - React, Tailwind, and code Playground

by satgam

HTML

<canvas width="300" height="300" id="myCanvas" style="border: 1px solid black"></canvas>
<button id="changeRadius">Change Size</button>

<script>
var number = Math.min(Math.max(parseInt(number), 5), 10);
let canvas = document.getElementById("myCanvas");
let ctx = canvas.getContext("2d");
ctx.translate(100,120);
ctx.beginPath(); 
  ctx.arc(0, 0, 10, 0, 2 * Math.PI);
  ctx.fillStyle = "black";
  ctx.fill();
ctx.translate(140,120);
ctx.beginPath(); 
  ctx.arc(0, 0, 10, 0, 2 * Math.PI);
  ctx.fillStyle = "blue";
  ctx.fill();
document.getElementById("changeRadius").onclick = function() {
//ctx.setTransform(1, 0, 0, 1, 0, 0);
ctx.clearRect(0,0,canvas.width,canvas.height)
}
</script>