First of all, what is canvas?

The HTML <canvas> element is used to draw graphics, on the fly, via JavaScript.

The <canvas> element is only a container for graphics. You must use JavaScript to actually draw the graphics.

A canvas is a rectangular area on an HTML page. We have always to specify an id attribute (to be referred to in a script), and a width and height attribute to define the size of the canvas.

And now, the fun part

Step 1 – Grab the Canvas Element

Create your new HTML file.

Then, we have to find the <canvas> element and grab it. We will do that by using the HTML DOM method querySelector() but you can also use the method getElementById().

Step 2 – Create a Drawning Object

Now, what we need is something called a context. You don’t draw directly on the canvas element in HTML, but you draw on something on something called the context.

The context can either be 2D, which is what we’ll be working with, but you can also use it with 3D for the stuff like video games.

So we’re going to grab the context by using the getContext() and creating a new variable ctx:

Step 3 – It’s Picasso Time

Now we have to size our canvas to be the exact width of the window, by default is going to be 800px x 800px as in canvas in html, however we want to resize it before we do any of our drawings.

Next, we need to define our canvas background color and our line.

• lineJoin determines the shape used to join two line segments where they meet
• lineCap sets the style of the end caps for a line
• lineWidth property sets the current line width
• strokeStyle sets the color, gradient, or pattern used for strokes

Now you are going to define a flag, to determine if our mouse is down or up. We are setting the flag to false at the begging and only set to true when the mouse is down.

To start drawing a line, you need a starting X and Y and an ending X and Y.

Now we need a draw function. This function is going to take in an event that is going to be called whenever we move our mouse on top of the canvas. We can console.log() the event and see on our inspect element.

To listen for our mouse move event on the canvas we are going to have a event listener.

But, we don’t want for our function to run all the time, we want to only do it when the person has clicked down. So what we are going to do is verify if the person is not drawing, using our flag.

And how do we change that isDrawing? We are going to have another event listeners.

Now, let’s work in actually start doing the drawing.

First we want to have a starting path and move to our lasts x and y where the mouse stops.

When the draw functions runs, we want to update the lastX and lastY variables, for that we equal lastX = e.offsetX and lastY=e.offsetY.

💡 The e.offsetX and e.offsetY values are coming from the event MouseEvent.

We now also need to update the mousedown EventListener function and add the event, because we want that as soon as the person clicks their mouse down to start, before we do a mouse move (because mousedown will happen before we move our mouse) then we´re going to update the lastX and lastY, and that is going to put us where we want to go rather than starting at (0,0).

Great! Now you must be seeing something like this

It’s white because we defined the strokeStyle as white in the begging.

To add some color, we need to set a new variable hue and add the hsl() color value inside our draw function in order to change the color. HSL color values are specified with: hsl(hue, saturation, lightness)

• Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, 240 is blue.
• Saturation is a percentage value; 0% means a shade of gray and 100% is the full color.
• Lightness is also a percentage; 0% is black, 100% is white.

We need to increment our hue value in order to have our rainbow look and we need also to reset our hue value to not be bigger then 360.

So, probability right now what we have is something like this:

Another thing that we can do, is also change the lineWidth to grow bigger until a certain point and then decrease. We can even conjugate that with the direction, and when the direction changes, the line width also change.

So we need to create a new variable for the direction:

And finally we add new logic inside our draw function:

And tada! You are now a HTML5 Canvas Picasso! 🤪

To see the full code and a example, you can check my codepen.

Or you can check the JavaScript 30 course from Wes Bos, from where I get this great tutorial!