Изменение цвета обводки на холсте

Question

Я только начал играть с некоторыми JavaScript, и я нашел вещь, которая называется холст.

Моя проблема в том, что после нажатия на кнопку я хочу изменить цвет обводки, но я не знаю как. У меня нет идей, но все же я думаю, что это должно быть какое-то простое решение, которого я не вижу.

Если кто-то может помочь, я был бы счастлив. Спасибо.

  const canvas = document.querySelector('#draw');
  // could be 3d, if you want to make a video game
  const ctx = canvas.getContext('2d');
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;

  ctx.lineJoin = 'round';
  ctx.lineCap = 'round';
  ctx.lineWidth = 20;

  var color = "blue";

  console.log(color)

  ctx.strokeStyle = color;

  let isDrawing = false;
  let lastX = 0;
  let lastY = 0;


  function draw(e, color) {
    // stop the function if they are not mouse down
    if(!isDrawing) return;
    //listen for mouse move event

    console.log(color)
    ctx.strokeStyle = color;

    console.log(e);
    ctx.beginPath();
    ctx.moveTo(lastX, lastY);
    ctx.lineTo(e.offsetX, e.offsetY);
    ctx.stroke();
    [lastX, lastY] = [e.offsetX, e.offsetY];
  }

  canvas.addEventListener('mousedown', (e) => {
    isDrawing = true;
    [lastX, lastY] = [e.offsetX, e.offsetY];
  });

  canvas.addEventListener('mousemove', draw);
  canvas.addEventListener('mouseup', () => isDrawing = false);
  canvas.addEventListener('mouseout', () => isDrawing = false);

<div>
    <button id="red" style="width: 50px; height: 50px; border-radius: 50%; background-color: red" onclick="draw(this.id)" ></button>
    <button id="blue" style="width: 50px; height: 50px; border-radius: 50%; background-color: blue" onclick="draw(this.id)"></button>
    <button id="green" style="width: 50px; height: 50px; border-radius: 50%; background-color: green" onclick="draw(this.id)"></button>

    <canvas id="draw" width="100" height="100"></canvas>
</div>

Answer 1

Вы используете функцию draw для canvas.addEventListener('mousemove', draw); и onclick="draw(this.id)

. Вы можете использовать 2 разные функции. Оставьте функцию рисования для mousemove и создайте, например, другую функцию для установки цвета.

Например

<button id="red" style="width: 50px; height: 50px; border-radius: 50%; background-color: red" onclick="setColor(this.id)" ></button>
<button id="blue" style="width: 50px; height: 50px; border-radius: 50%; background-color: blue" onclick="setColor(this.id)"></button>
<button id="green" style="width: 50px; height: 50px; border-radius: 50%; background-color: green" onclick="setColor(this.id)"></button>

function setColor(color) {
    ctx.strokeStyle = color;
}

const canvas = document.querySelector('#draw');
// could be 3d, if you want to make a video game
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

ctx.lineJoin = 'round';
ctx.lineCap = 'round';
ctx.lineWidth = 20;

let isDrawing = false;
let lastX = 0;
let lastY = 0;
ctx.strokeStyle = "blue";

function setColor(color) {
  ctx.strokeStyle = color;
}

function draw(e) {
  // stop the function if they are not mouse down
  if (!isDrawing) return;
  //listen for mouse move event
  ctx.strokeStyle = e;
  ctx.beginPath();
  ctx.moveTo(lastX, lastY);
  ctx.lineTo(e.offsetX, e.offsetY);
  ctx.stroke();
  [lastX, lastY] = [e.offsetX, e.offsetY];
}

canvas.addEventListener('mousedown', (e) => {
  isDrawing = true;
  [lastX, lastY] = [e.offsetX, e.offsetY];
});

canvas.addEventListener('mousemove', draw);
canvas.addEventListener('mouseup', () => isDrawing = false);
canvas.addEventListener('mouseout', () => isDrawing = false);

<div>
  <button id="red" style="width: 50px; height: 50px; border-radius: 50%; background-color: red" onclick="setColor(this.id)"></button>
  <button id="blue" style="width: 50px; height: 50px; border-radius: 50%; background-color: blue" onclick="setColor(this.id)"></button>
  <button id="green" style="width: 50px; height: 50px; border-radius: 50%; background-color: green" onclick="setColor(this.id)"></button>

  <canvas id="draw" width="100" height="100"></canvas>
</div>