logPoints

by Darby Rathbone

HTML

<canvas id='can'></canvas>

CSS

html,
body {
  scrollbar
  width: 100%;
  height: 100%;
  margin: 0px;
  border: 0;
  overflow: hidden;
  /*  Disable scrollbars */
  display: block;
  /* No floating content on sides */
    -ms-overflow-style: none; /* for Internet Explorer, Edge */
  scrollbar-width: none; /* for Firefox */
  overflow-y: scroll;
  overflow:hidden;
}
#can{
  overflow: hidden;
}

JavaScript

var htmlCanvas = document.getElementById("can"),
  context = htmlCanvas.getContext("2d"),
  m = {
    x: 0,
    y: 0,
  },
  points = [],
  circle = 2 * Math.PI;
initialize();

function initialize() {
  window.addEventListener("resize", resizeCanvas, false);
  window.addEventListener("mousedown", mouseDown, false);
  m.x = window.innerWidth;
  m.y = window.innerHeight;
  resizeCanvas();
}

function mouseDown(event) {
  switch (typeof points[event.offsetX]) {
    case "undefined":
      points[event.offsetX] = event.offsetY;
      break;
    case "number":
      if (points[event.offsetX] != [points[event.offsetX], event.offsetY]) {
        points[event.offsetX] = [points[event.offsetX], event.offsetY];
      }
      break;
    case "object":
      if (points[event.offsetX].lastIndexOf(event.offsetY) == -1) {
        points[event.offsetX].push(event.offsetY);
        points[event.offsetX].sort(function (a, b) {
          return a - b;
        });
        console.log(points[event.offsetX]);
      }
      break;
  }
  resizeCanvas();
}

function redraw() {
  points.forEach(function (a, i) {
    switch (typeof a) {
      case "number":
        drawPoint(i, a, "red");
        break;
      case "object":
        points[i].forEach(function (y) {
          drawPoint(i, y, "blue");
        });
        break;
    }
  });
}

function resizeCanvas() {
  htmlCanvas.width = window.innerWidth;
  htmlCanvas.height = window.innerHeight;
  redraw();
}
function drawLine(a, b, c, d, color) {
  let previous = context.strokeStyle;
  context.beginPath();
  context.strokeStyle = !color ? "black" : color;
  context.moveTo(a, b);
  context.lineTo(c, d);
  context.stroke();
  context.strokeStyle = previous;
}
function drawPoint(a, b, color) {
  let previous = context.strokeStyle;
  context.beginPath();
  context.strokeStyle = !color ? "red" : color;
  context.arc(a, b, 5, 0, circle);
  context.stroke();
 ...