JavaScript mouse drawing on the canvas πŸ‘¨β€πŸŽ¨

β€” 6 minute read

permalink

Today I wanted to continue to learn about the HTML canvas element. Let's see how to draw on the canvas with our mouse.

It turns out it's actually fairly simple and easy to implement with JavaScript!

Live code example on Codepen permalink

We'll be building this cool drawing app. Try it out and have a peek at the code.

See the Pen JavaScript mouse drawing on the canvas πŸ‘¨β€πŸŽ¨ by Chris Bongers (@rebelchris) on CodePen.

HTML Structure permalink

The HTML could not be simpler, all we need is one big HTML canvas element.

<canvas id="canvas"></canvas>

Styling for app and canvas permalink

As for our CSS to style our code example, all we need to do is

  1. remove our default margin
  2. create a cool emoji cursor and
  3. set canvas width and height to be the same size as the viewport.
* {
margin: 0;
padding: 0;
cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='48' viewport='0 0 100 100' style='fill:black;font-size:24px;'><text y='50%'>✍️</text></svg>") 16 0,auto;
}
canvas {
width: 100vw;
height: 100vh;
}

Canvas mouse draw with JavaScript permalink

Now on to the fun part: the JavaScript code to track our mouse movements for drawing on the canvas.

Let's start by defining our JS variables:

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
let coord = { x: 0, y: 0 };

We need to get the canvas elemnt and then retrieve it based on it's ID. Then we get the context of the canvas (that's where we actually draw on).

Next, we define our base coordinates.

Let's attach event listeners for:

  • mousedown (start registering our drawing)
  • mouseup (stop the drawing)
  • resize (resize the canvas)
document.addEventListener("mousedown", start);
document.addEventListener("mouseup", stop);
window.addEventListener("resize", resize);

Let's start with the resize function. This JS function will resize the canvas based on our browser viewport. It will make the canvas size 100% or change the canvas width and height.

We also call this function right away.

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

resize();

Let's define our mousedown (start) function.

function start(event) {
document.addEventListener("mousemove", draw);
reposition(event);
}

This function will invoke the listener for mousemove, so we don't have to keep listening to it. Then we call our reposition function, which will register our mouse position.

The reposition function will look like this:

function reposition(event) {
coord.x = event.clientX - canvas.offsetLeft;
coord.y = event.clientY - canvas.offsetTop;
}

On to the stop function:

function stop() {
document.removeEventListener("mousemove", draw);
}

We only need to stop listening to our register mousemove function.

The last function we will make is the draw function. The draw function will paint lines on the canvas.

function draw(event) {
ctx.beginPath();
ctx.lineWidth = 5;
ctx.lineCap = "round";
ctx.strokeStyle = "#ACD3ED";
ctx.moveTo(coord.x, coord.y);
reposition(event);
ctx.lineTo(coord.x, coord.y);
ctx.stroke();
}

Let me explain the cod esnippet in order:

  • We begin a new path.
  • We set the line width to 5 pixels.
  • We change the line endings to round.
  • We set the color to blue.
  • We change our position to the initial position and move the canvas point to the moved position.
  • Then we draw a line between these two points.
  • Last we call the stroke to colour it.

That's it. With this code can draw lines on an HTML canvas with our mouse.

If you want to read more about the canvas element, check out these articles:

Thank you for reading, and let's connect! permalink

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter