{"size": 1162, "ext": "js", "max_stars_repo_path": "day8 - HTML Canvas/main.js", "max_stars_repo_name": "elenapayan/JavaScript30", "max_stars_repo_stars_event_min_datetime": "2020-02-04T19:13:14.000Z", "max_stars_repo_stars_event_max_datetime": "2020-02-05T16:57:31.000Z", "max_issues_repo_path": "day8 - HTML Canvas/main.js", "max_issues_repo_name": "elenapayan/JavaScript30", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "day8 - HTML Canvas/main.js", "max_forks_repo_name": "elenapayan/JavaScript30", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": 2, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 22.7843137255, "max_line_length": 61, "alphanum_fraction": 0.6462994836}
"use strict";

const canvas = document.querySelector("#draw");
const ctx = canvas.getContext("2d");
canvas.width = window.innerWidth;
canvas.heigth = window.innerHeight;
canvas.setAttribute("width", "900");
canvas.setAttribute("height", "500");
ctx.strokeStyle = "#FABADA";
ctx.lineJoin = "round";
ctx.lineCap = "round";
ctx.lineWidth = 80;

let isDrawing = false;
let lastX = 0;
let lastY = 0;
let hue = 0;
let direction = true;

function draw(ev) {
  if (!isDrawing) return;
  ctx.strokeStyle = `hsl(${hue}, 100%, 50%)`;
  ctx.beginPath();
  ctx.moveTo(lastX, lastY);
  ctx.lineTo(ev.offsetX, ev.offsetY);
  ctx.stroke();
  [lastX, lastY] = [ev.offsetX, ev.offsetY];

  hue++;
  if (hue >= 360) {
    hue = 0;
  }
  if (ctx.lineWidth >= 80 || ctx.lineWidth <= 1) {
    direction = !direction;
  }
  if (direction) {
    ctx.lineWidth++;
  } else {
    ctx.lineWidth--;
  }
}

canvas.addEventListener("mousemove", draw);
canvas.addEventListener("mousedown", (ev) => {
  isDrawing = true;
  [lastX, lastY] = [ev.offsetX, ev.offsetY];
});
canvas.addEventListener("mouseup", () => isDrawing = false);
canvas.addEventListener("mouseout", () => isDrawing = false);

