JSFiddle - React, Tailwind, and code Playground

by sungsoonz

HTML

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

CSS

#canvas {
  width: 300px;
  height: 300px;
  background: #fff;
}

JavaScript

var Timesheet = function() {
  this.canvas = document.getElementById('canvas');
  this.get_coords = function(e) {
    e = e || window.event;
    if (e.pageX) {
        return { 
          x: e.pageX 
         }
    }
    return {
        x: e.clientX + document.body.scrollLeft - document.body.clientLeft
    }
  }
  this.draw = function(e) {
  	var mouseCoords = this.get_coords(e);
  	console.log(mouseCoords.x)
  }
}

$(document).ready(function() {

	var timesheet = new Timesheet();
  timesheet.canvas.onmousedown = function(e) {
  	var mouseCoords = timesheet.get_coords(e);
    document.onmousemove = timesheet.draw;
  }
  document.onmouseup = function(e) {
  	document.onmousemove = null;
  };
});