JSFiddle - React, Tailwind, and code Playground

by ChangJoo Park

HTML

<canvas id="myCanvas" width="400" height="400">
Your browser does not support the HTML5 canvas tag.</canvas>


<div id="status"></div>

JavaScript

class App {
  constructor() {
    console.log(this)
    var c = document.getElementById("myCanvas");
    var s = document.getElementById("status");
    var ctx = c.getContext("2d");

    // Create gradient
    var grd = ctx.createLinearGradient(0, 0, 400, 0);
    grd.addColorStop(0, "red");
    grd.addColorStop(1, "white");

    // Fill with gradient
    ctx.fillStyle = grd;
    ctx.fillRect(0, 0, 400, 400);

    c.addEventListener('mousemove', (e) => {
    	console.log(this)
      var pos = this.findPos(this)/* 
      var x = e.pageX - pos.x;
      var y = e.pageY - pos.y;
      var coord = "x=" + x + ", y=" + y;
      var c = this.getContext('2d');
      var p = c.getImageData(x, y, 1, 1).data;
      var hex = "#" + ("000000" + rgbToHex(p[0], p[1], p[2])).slice(-6);
      s.innerText = hex */
    })

  }

  findPos(obj) {
    var curleft = 0,
      curtop = 0;
    if (obj.offsetParent) {
      do {
        curleft += obj.offsetLeft;
        curtop += obj.offsetTop;
      } while (obj = obj.offsetParent);
      return {
        x: curleft,
        y: curtop
      };
    }
    return undefined;
  }

  rgbToHex(r, g, b) {
    if (r > 255 || g > 255 || b > 255)
      throw "Invalid color component";
    return ((r << 16) | (g << 8) | b).toString(16);
  }

  randomInt(max) {
    return Math.floor(Math.random() * max);
  }


  randomColor() {
    return `rgb(${randomInt(256)}, ${randomInt(256)}, ${randomInt(256)})`
  }

}

window.onload = () => {
  new App()
}