There are many useful tags in HTML. We have tags for headers, paragraphs, lists, tables, and so much more. One tag in particular stands out to be a little bit different. That’s the canvas tag. The canvas tag in html simply just lets us draw shapes onto our html page. That probably sounds pretty useless right about now. You might be asking ‘why would you ever want to have an entire section of your website to just shapes?’ With the canvas tag we can have dynamic graphics, in browser games, animations, and interactive video. Pretty cool, right?
In this post I’ll cover the basics on using this tag, as well as a few functions for creating shapes.
We also have the option of setting our canvas width, height, and style. For now we’ll only change id and style. We also want to make sure our scripts load after the canvas tag, so we’ll put it at the bottom instead of in the head tag.
The getContext() method returns the drawing context for canvas. We’re going to use “2d” which allows us to draw 2d shapes onto our canvas. There is also “webgl” which would let us draw 3d shapes as long as we’re using a browser that supports webgl. Now we can use our ctx variable to draw 2d shapes!
Draw methods for canvas take x and y coordinates and puts them in that spot on our canvas. The range of x and y coordinates corresponds with our size of canvas, which in our case is between 0,0 and 750,750.
The general process of drawing shapes is to tell it where to start, tell it what to draw, then to draw the whole thing. Lets see this by making a simple line function.
.moveTo() tells it to move to that spot, .lineTo() tells where to draw to, then .stroke() tells it to draw. I also set the parameters for this function to take in starting position and ending position. With that function being called, it will draw a line from 700,100 to 100,700.
Next we’ll make a draw square function. The process is similar but instead of using moveTo() we’ll use beginPath(), and instead of using lineTo() we’ll use rect() method.
The .rect() method takes in a x and y coordinate as well as width and length values
The next function we’ll make is a drawCircle() function. This will use the arc methods parameters are x and y coordinate which is the center of the circle, the radius of the circle, the starting angle in radians, the ending angle in radians, and an optional extra parameter that dictates whether it draws clockwise or counter clockwise.
The last thing I’ll show in this post is filling a rectangle with a linear gradient. We’ll start by making a new variable with the createLinearGradient() method. We’ll then add our colors to the gradient and then apply it to a rectangle using fillRect() method.
The createLinearGradient() parameters are a start point x and y, and a endpoint x and y. The addColorStop() methods parameters are a values between 0.0 and 1.0 that represents the position between start and end in the gradient, and a CSS color value. The fillStyle() method sets our gradient to the fillRect() method which draws it out.