Canvas - Separate 2 Arrays Of Lines Onclick

Button Left - pushes blue lines with X's Button Right - pushes red lines with O's Button Delete - removes last line in array So, when I click on Left - blue lines with X's are

Solution 1:

A nice thing to know is that you can call a function as a window method. For example if you have a function test() you can call this function as window["test"]()

In your case inside the function drawChart() you can call either drawCircle() or drawCross()

When I push the points into the points array, besides the x and the y I add a f (for function). The value of f is a string with the name of the function: drawCircle or drawCross

Inside the function drawChart you'll find this line of code: window[l.f](l.x, l.y) This is calling either drawCircle() or drawCross() depending on the value of l.f: the name of the function.

The name of the function is a global variable declared at the beginning of my code and is set to drawCircle: let theFunction = "drawCircle";

You change the value of theFunction when you click the right or left buttons.

//this is an array of arrays//when I click on the canvas a new point is pushed on the last array of this arrayvar ry = [[]];

var canvas = document.querySelector("#myCanvas");
let w = (canvas.width = 450);
let h = (canvas.height = 280);

var ctx = canvas.getContext("2d");

let theFunction = "drawCircle";

drawGrid();


functiondrawCircle(x, y) {
  ctx.beginPath();
  ctx.arc(x, y, 6, 0, Math.PI * 2);
  ctx.strokeStyle = "red";
  ctx.stroke();
}

 functiondrawCross(x, y) {
   ctx.beginPath();
   ctx.moveTo(x - 6, y - 6);
   ctx.lineTo(x + 6, y + 6);

   ctx.moveTo(x + 6, y - 6);
   ctx.lineTo(x - 6, y + 6);
   ctx.strokeStyle = "blue";
   ctx.stroke();
}


myCanvas.addEventListener("click", e => {
  var offset = canvas.getBoundingClientRect();
  var x = e.clientX - offset.left;
  var y = e.clientY - offset.top;
  //a new point is pushed on the last array of ry
  ry[ry.length - 1].push({ x: x, y: y, f:theFunction });
  // delete everything
  ctx.clearRect(0, 0, w, h);
  // draw everythingdrawGrid();
  drawChart();
});

sterge.addEventListener("click", e => {
  //when sterge is clicked the last point from the last array is deletedif (ry[ry.length - 1].length > 0) {
    ry[ry.length - 1].pop();
  } else {
    //if the last array is empty I delete this array 
    ry.pop();
    //and then I delete the last point from the last array
    ry[ry.length - 1].pop();
  }
  // delete everything
  ctx.clearRect(0, 0, w, h);
   // draw everythingdrawGrid();
  drawChart();
});

dreapta.addEventListener("click", e => {
  theFunction = "drawCircle"//when dreapta is clicked, a new array is pushed into the ry
  ry.push([]);
});

stanga.addEventListener("click", e => {
  theFunction = "drawCross"//when dreapta is clicked, a new array is pushed into the ry
  ry.push([]);
});

functiondrawGrid() {
  ctx.strokeStyle = "black";
  ctx.lineWidth = 0.1;
  ctx.beginPath();
  for (x = 15; x <= w; x += 60) {
    ctx.moveTo(x, 0);
    ctx.lineTo(x, h);
    for (y = 20; y <= h; y += 20) {
      ctx.moveTo(0, y);
      ctx.lineTo(w, y);
    }
  }
  ctx.stroke();
}

functiondrawChart() {
  ctx.lineWidth = 1;
  // for every array in the ry arrayfor (let index = 0; index < ry.length; index++) {
    // for every point in the ry[index]for (let i = 0; i < ry[index].length; i++) {
      let l = ry[index][i];
      // draw the circle or the crosswindow[l.f](l.x, l.y)
      // draw the lineif (i > 0) {
        let last = ry[index][i - 1];
        ctx.beginPath();
        ctx.moveTo(last.x, last.y);
        ctx.lineTo(l.x, l.y);
        ctx.strokeStyle = "blue";
        ctx.stroke();
      }
    }
  }
}

<canvasid="myCanvas"></canvas><p><inputtype="button"value="dreapta"id="dreapta" /><inputtype="button"value="stanga"id="stanga" /><inputtype="button"value="sterge"id="sterge" /></p>