JSFiddle - React, Tailwind, and code Playground

by Ranganadh Paramkusam

HTML

<canvas id="can" width="600" height="400"></canvas>

CSS

canvas {
  display:block;
  border:solid 1px #000;
}

JavaScript

var plot = [{
  x: 50,
  y: 100
}, {
  x: 200,
  y: 200
}, {
  x: 400,
  y: 300
}, {
  x: 500,
  y: 190
}];

var can = document.getElementById("can"),
  ctx = can.getContext('2d'),
  dragging = false,
  lastX = 0,
  translated = 0;

var grid = (function(dX, dY){
  var can = document.createElement("canvas"),
      ctx = can.getContext('2d');
  can.width = dX;
  can.height = dY;
  // fill canvas color
  ctx.fillStyle = 'black';
  ctx.fillRect(0, 0, dX, dY);
  
  // x axis
  ctx.strokeStyle = 'orange';
  ctx.moveTo(.5, 0.5);
  ctx.lineTo(dX + .5, 0.5);
  ctx.stroke();
  
  // y axis
  ctx.moveTo(.5, .5);
  ctx.lineTo(.5, dY + .5);
  ctx.stroke();
  
  return ctx.createPattern(can, 'repeat');
})(100, 50);

ctx.scale(1, -1);
ctx.translate(0, -400);

can.onmousedown = function (e) {
  var evt = e || event;
  dragging = true;
  lastX = evt.offsetX==undefined?evt.layerX:evt.offsetX;
}

window.onmousemove = function (e) {
  var evt = e || event;
  if (dragging) {
    var delta = (evt.offsetX==undefined?evt.layerX:evt.offsetX) - lastX;
    translated += delta;
    ctx.translate(delta, 0);
    lastX = evt.offsetX==undefined?evt.layerX:evt.offsetX;
    draw();
  }
}

window.onmouseup = function () {
  dragging = false;
}

function draw() {
  ctx.clearRect(-translated, 0, 600, 400);
  ctx.rect(-translated, 0, 600, 400);
  ctx.fillStyle = grid;
  ctx.fill();
  ctx.fillStyle = "#fff";
  for (var i = 0; i < plot.length; i++) {
    ctx.beginPath();
    ctx.arc(plot[i].x, plot[i].y, 5, 0, 2 * Math.PI);
    ctx.fill();
  }
}

draw();