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); // problem 1
alert(number);																						

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.setTransform(1, 0, 0, 1, 0, 0);		// reset origin (problem 2)
	
  ctx.translate(140,120);
  ctx.beginPath(); 
  ctx.arc(0, 0, 10, 0, 2 * Math.PI);
  ctx.fillStyle = "blue";
  ctx.fill();
//	ctx.setTransform(1, 0, 0, 1, 0, 0);		// reset origin (problem 2)
</script>