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;

    ctx.beginPath();
    ctx.moveTo(x + radius, y);
    ctx.arc(x, y, radius, 0, 2 * Math.PI);
    ctx.fill();
    
    var alpha = 0.1;
    var y = function() {
    	ctx.fillStyle = 'rgba(255,255,255,'+alpha+')';
      alpha++;
      if (alpha => 100){
      return clearInterval(z);
      }
      y();
    };
    
    
    var z = setInterval(y, 50)
    
  };
  
  // http://bencentra.com/code/2014/12/05/html5-canvas-touch-events.html
  // OR https://codepen.io/rahilwazir/pen/BOmORj
  
  // 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...