JSFiddle - React, Tailwind, and code Playground

by rahilwazir

HTML

<canvas id=canvas width=900 height=600></canvas>

JavaScript

var ctx = canvas.getContext("2d"),
  img = new Image,
  radius = 40;

img.onload = setup;
img.src = "http://i.imgur.com/bnAEEXq.jpg";

function setup() {

  // set image as pattern for fillStyle
  ctx.fillStyle = ctx.createPattern(this, "no-repeat");

  var x = function(e) {
    var r = this.getBoundingClientRect(),
      x = e.clientX - r.left,
      y = e.clientY - r.top;

    console.log(r, x, y);

    ctx.beginPath();
    ctx.moveTo(x + radius, y);
    ctx.arc(x, y, radius, 0, 2 * Math.PI);
    ctx.fill();
  };

  // for demo only, reveals image while mousing over canvas
  canvas.onmousemove = x;

  // Set up touch events for mobile, etc
  canvas.addEventListener("touchstart", function(e) {
    mousePos = getTouchPos(canvas, e);
    var touch = e.touches[0];
    var mouseEvent = new MouseEvent("mousedown", {
      clientX: touch.clientX,
      clientY: touch.clientY
    });
    canvas.dispatchEvent(mouseEvent);
  }, false);
  
  canvas.addEventListener("touchend", function(e) {
    var mouseEvent = new MouseEvent("mouseup", {});
    canvas.dispatchEvent(mouseEvent);
  }, false);
  
  canvas.addEventListener("touchmove", function(e) {
    var touch = e.touches[0];
    var mouseEvent = new MouseEvent("mousemove", {
      clientX: touch.clientX,
      clientY: touch.clientY
    });
    canvas.dispatchEvent(mouseEvent);
  }, false);

  // Get the position of a touch relative to the canvas
  function getTouchPos(canvasDom, touchEvent) {
    var rect = canvasDom.getBoundingClientRect();
    return {
      x: touchEvent.touches[0].clientX - rect.left,
      y: touchEvent.touches[0].clientY - rect.top
    };
  }
}

// Prevent scrolling when touching the canvas
document.body.addEventListener("touchstart", function(e) {
  if (e.target == canvas) {
    e.preventDefault();
  }
}, false);
document.body.addEventListener("touchend", function(e) {
  if (e.target == canvas) {
    e.preventDefault();
  }
}, false);
document.body.addEventListener("touchmove", function(e) {
  if...