How to draw on HTML5 canvas using a mouse with JavaScript?

Sometimes, we want to draw on HTML5 canvas using a mouse with JavaScript.

In this article, we’ll look at how to draw on HTML5 canvas using a mouse with JavaScript.

How to draw on HTML5 canvas using a mouse with JavaScript?

To draw on HTML5 canvas using a mouse with JavaScript, we add mouse event listeners.

For instance, we write

const canvas = document.createElement("canvas");
document.body.appendChild(canvas);

document.body.style.margin = 0;
canvas.style.position = "fixed";

const ctx = canvas.getContext("2d");
resize();

const pos = { x: 0, y: 0 };

const setPosition = (e) => {
  pos.x = e.clientX;
  pos.y = e.clientY;
};

const resize = () => {
  ctx.canvas.width = window.innerWidth;
  ctx.canvas.height = window.innerHeight;
};

const draw = (e) => {
  if (e.buttons !== 1) {
    return;
  }

  ctx.beginPath();

  ctx.lineWidth = 5;
  ctx.lineCap = "round";
  ctx.strokeStyle = "#c0392b";

  ctx.moveTo(pos.x, pos.y);
  setPosition(e);
  ctx.lineTo(pos.x, pos.y);

  ctx.stroke();
};

window.addEventListener("resize", resize);
document.addEventListener("mousemove", draw);
document.addEventListener("mousedown", setPosition);
document.addEventListener("mouseenter", setPosition);

to call addEventListener to listen to the mousemove, mousedown, and mouseenter events.

In the draw function, we call moveTo and the lineTo with the mouse’s x and y coordinates to draw a line that goes through the point.

We call stroke to render the line.

The setPosition function gets the current mouse position.

Conclusion

To draw on HTML5 canvas using a mouse with JavaScript, we add mouse event listeners.