JSFiddle - React, Tailwind, and code Playground

by burnso

HTML

<canvas id="canvas" width="300" height="300"></canvas>
<input id="fileUpload" type="file" accept="image/*" capture="camera">

CSS

body {
    background:#eee;
}
canvas {
    background:#fff;
}

JavaScript

$(document).ready(function () {

      function el(id) {
          return document.getElementById(id);
      } // Get elem by ID

      var canvas = document.getElementById("canvas");
      var context = canvas.getContext("2d");

      function readImage() {
          if (this.files && this.files[0]) {
              var FR = new FileReader();
              FR.onload = function (e) {
                  var img = new Image(250, 250);
                  img.onload = function () {
                      context.drawImage(img, 0, 0);
                  };
                  img.src = e.target.result;
              };
              FR.readAsDataURL(this.files[0]);
          }
      }

      function getMousePos(canvas, evt) {
          var rect = canvas.getBoundingClientRect();
          return {
              x: evt.clientX - rect.left,
              y: evt.clientY - rect.top
          };
      }

      var x = canvas.width / 2;
      var y = canvas.height / 2;
      var startAngle = 1 * Math.PI;
      var endAngle = 3 * Math.PI;
      var counterClockwise = false;
      var fillColors = ['#00ADEF', '#EC008B', '#FFF100'];
      var shapes = ['circle', 'square', 'triangle'];
      var iColor = -1;
      var iShape = -1;
      var interval;
      var i = 0;

      //EXECUTE MAGIC

      $(canvas).on('mousedown', function () {

          var interval = window.setInterval(function () {

              i = i + 1;

              $(canvas).on('mouseup', function (evt) {
                  clearInterval(interval);

                  //Get position of mouse and draw from there
                  var mousePos = getMousePos(canvas, evt);
                  x = mousePos.x;
                  y = mousePos.y;

                  //Loops through colors
                  iColor = (iColor + 1) % fillColors.length;

                  context.beginPath();
                  context.arc(x, y, i, startAngle, endAngle, counterClockwise);
                  context.globalCompositeOperation =...