JSFiddle - React, Tailwind, and code Playground

by Evan Raskob

HTML

<div id="bg">
  <canvas id="canvas"></canvas>
</div>

JavaScript

var ctx = document.getElementById('canvas').getContext('2d');

function draw() {

  ctx.beginPath();
  ctx.arc(75, 75, 50, 0, Math.PI * 2, true); // Outer circle

  ctx.moveTo(110, 75);
  ctx.arc(75, 75, 35, 0, Math.PI, false); // Mouth (clockwise)
  ctx.moveTo(65, 65);
  ctx.arc(60, 65, 5, 0, Math.PI * 2, true); // Left eye
  ctx.moveTo(95, 65);
  ctx.arc(90, 65, 5, 0, Math.PI * 2, true); // Right eye
  ctx.stroke();

  document.getElementById('bg').addEventListener('mousedown', drawMouse, false);
  //  this won't work because it's hidden under the div
  //  ctx.addEventListener('mousedown', drawMouse, false);
}


draw();


function drawMouse(event) {
  var canvas = document.getElementById('canvas');
  var rect = canvas.getBoundingClientRect();
  var mousePos = {
    x: event.clientX - rect.left,
    y: event.clientY - rect.top
  };

  console.log(mousePos);

  ctx.beginPath();
  ctx.arc(mousePos.x, mousePos.y, 5, 0, Math.PI * 2, true);
  ctx.stroke();
}