JSFiddle - React, Tailwind, and code Playground

by Kelowna777

HTML

<div>
  <button id="btnCircle" style="margin:0;padding:0;position:relative;left:50px;top:50px;">Draw Random     Circle</button>
</div>
<div style="width:500px; height:150px; margin:0 auto; padding:5px;">
    <canvas id="canvasArea" width="500" height="550" style="border:2px solid black"></canvas>
</div>

JavaScript

(function(){
// global variables
  var 
  	canvas = document.getElementById("canvasArea"),
    ctx = canvas.getContext("2d"),
    button = document.getElementById("btnCircle"),
    drawCircle = function (size, xPos, Ypos, colour) { //draw circle
      var 
      	xPos = Math.floor(Math.random() * 501),
        yPos = Math.floor(Math.random() * 501),
        size = Math.floor(Math.random() * 100),
      	colour = '#' + Math.random().toString(16).substr(2,6); // random colour;
      // var colour = '#' + Math.random().toString(16).substring(4); // random colour;
      ctx.beginPath();
      ctx.arc(xPos, yPos, size, 0, 2 * Math.PI);
      ctx.fillStyle = colour;
      ctx.fill();
  };
  
  //Set the onclick event
  button.onclick = drawCircle;
})();