CODEWITHSUNDEEP
javascripthtmlcsscanvas
David Kuziv
David Kuziv

Reputation: 43

Changing colors of stroke in canvas

I have just started to play with some JavaScript and I found thing called canvas.

My problem is that after the click on a button I want to change the color of stroke, but I dont know how. I'm out of ideas but still I think it should be some easy solution that I'm not seeing.

If anyone can help, I would be happy. Thank you.

  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>

Upvotes: 3

Views: 1605

Answers (1)

The fourth bird
The fourth bird

Reputation: 163287

You are using the function draw for both canvas.addEventListener('mousemove', draw); and onclick="draw(this.id)

What you could do is use 2 different functions. Keep the draw function for mousemove and create for example another function to set the color.

For example 

<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>

Upvotes: 1

Related Questions