const canvasY = 600; // height of canvas

const unit = 25; // space between backround lines/grid

​

let anchorX = 0;

let anchorY = 0;

let clicks = 0;

let strWeight = 1;

​

// this list saves all the lines you draw

lines = [];

​

let img;

function preload() {

  // preload() runs once

​

  img = loadImage('a.png');

}

​

function setup() {

  createCanvas(canvasX, canvasY);

}

​

function draw() {

  background(220);

  //grid

  stroke(200);

  strokeWeight(1);

  for (i = 0; i * unit < canvasX + 1; i++) {

    line(i * unit, 0, i * unit, canvasY);

  }

  for (i = 0; i * unit < canvasY + 1; i++) {

    line(0, i * unit, canvasX, i * unit);

  }

  //drawing lines

  stroke(0); //stroke(200, 255, 200);

  strokeWeight(1);

  // draw line to the mouse

  if (clicks > 0) {

    line(anchorX, anchorY, mouseX, mouseY);

  }

  // draw all previous lines

  for (i = 2; i < lines.length; i++) {

    strokeWeight(lines[i].strWeight);

    line(lines[i].prevX, lines[i].prevY, lines[i].x, lines[i].y);

  }

  tint(200, 30);

  image(img,0,0)

}

​

// when you click, save that line and start a new one

function mouseClicked() {

  clicks += 1;

  if (clicks > 0) {

      lines.push({prevX:anchorX, prevY:anchorY, x:mouseX, y:mouseY, strWeight:strWeight});

  }

  console.log({prevX:anchorX, prevY:anchorY, x:mouseX, y:mouseY, strWeight:strWeight},);

  anchorX = mouseX;

  anchorY = mouseY

}

​

function keyPressed() {

 if(key /1){

    strWeight = parseInt(key);

 }

}

​