Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
One of the most basic things that you need to set when you're going to draw on the canvas is usually involving some kind of color and style, and the canvas 2D drawing context provides some global properties that affect how objects are stroked and filled. And there are three properties. The first is the fillStyle. That's the style to use when filling a shape. And you can set this to anything that you would normally set a CSS color property to. So, for example, you can use a CSS color or a gradient or a pattern, and this defaults to black if you don't set it.
We'll take a look at gradients and patterns later. We'll focus on colors for now. In addition to the fillStyle, there is a strokeStyle. And again this is the same idea. You can set this to a color or gradient or a pattern, and also defaults to black, and this is the color or style that's you used when strokes are drawn, usually lines or outlines on objects that have an area. And then there is the lineWidth property, and this is the width of the imaginary pen that the canvas uses when it's drawing lines. And that defaults to a width of one, but you can set to anything.
There is two-step process involved to draw with colors and styles. Step one is you set the fill and stroke styles and the line width to whatever values you want, and then you call a drawing operation that creates some shape, or does some kind of drawing thing. So let's take a look at that in code and see how it works. Okay, so here I am in my editor, and I'm going to start off with my example colors_start.htm file. If we look at this in the browser really quick, you can see here is our canvas, and I've outlined it so we can see it.
So, let's go back now to the code. Now in my Snippets under the Color section, I'm going to first copy these two lines and paste them into here. So we go through all the operations to get our drawing context to make sure that we have a valid canvas and everything, and then I set the fillStyle to be green. And then I call an operation called fillRect and that's going to fill the rectangle with this color. So let's go back to the browser and refresh, and you can see that, sure enough, a green rectangle shows up on the canvas.
Now let's use the strokestyle, so back in my Snippets, I'm going to copy the next three lines, copy, back to the code, and we'll paste those in here. So in this example, now I'm setting the lineWidth to be five and in the strokeStyle I'm going to use the CSS style declaration of RGB and Alpha. And I'm going to set the color to be 100% opacity of blue. And this time I'm going to use the strokeRect function, and this will actually fill the rectangle.
This has put a line around the edge. So we save. When we go back to the browser, we refresh, and now you can see that we have a green rectangle with a blue outline around it. So what we've done here is demonstrate some basic drawing operations on how to set the filling and stroking style, along with the width of the pen, to affect how things are drawn onto the canvas, And these kinds of properties will affect lots of different things that you draw on the canvas, so this is a pretty basic thing to learn how to do.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 101003 Viewers
61 Video lessons · 87798 Viewers
71 Video lessons · 71674 Viewers
56 Video lessons · 103561 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.