Get creative with the HTML5 Canvas

1. Welcome!: Welcome to the HTML5 Canvas course, where you go from beginner to be fully confident creator in graphics and animations using the Canvas. My name is Chris, and I'm here to guide you through this process step-by-step. I have many years of experience developing websites and also creating online courses with thousands of students and hundreds of five-star reviews. This course has been designed for a beginner to teach you all about how to draw to the Canvas using JavaScript. By the end of this course, you will have the confidence and ability to draw or animate almost anything you can imagine, and display it within webpages, or in a web browser. Would take you step-by-step from the Canvas basics right through to more advanced techniques such as transformations, animations, saving and install, and also how to manipulate pixel data in images. We begin by setting up the Canvas and introduce you to basic script in drawing techniques. We'll take a look at lines and puffs and how to draw a very shapes. I will show you how to add text and images to the Canvas, remove sections of the Canvas along with the adding some nice effects such as gradients, patterns, and shadows. As you progress through the course, we will step things up even further by looking at more advanced techniques, we'll look at various types of curves, save and restore methods, and how to use transformations. You will also learn how to use loops, animations, and even how to modify the pixel data of images to allow us to add effects such as making photos black and white. We finish off by leaving you with a challenge, let's draw Mickey Mouse's face. Let's put your new skills into practice. The ideal student of this course is somebody with some web design or development experience, and looking to learn a new form of skill. Learning Canvas is also ideal for anybody looking to build browser-based games. A little experience of JavaScript basics would be a benefit as you move through this course. However, there are no other requirements, taking this course, just neediness to learn. Feel free to take a look for the course description and also the lecture's Canvas to discover everything you will learn from this course. Hit the Take this course button, and I look forward to seeing you inside the course. 2. What is the HTML5 Canvas?: Okay guys. First of all, before we start drawing anything onto the Canvas, I just want to take one or two moments just to take a quick look what we can do with HTML5 Canvas and what exactly the Canvas is. So basically the Canvas is a HTML element. Just like many of the HTML tags, such as paragraph tags, we have a opening and a closing elements. So unlike the image tag, for example, it's not a self-closing tag. So we don't need the opening tag, and then the closing tag with the forward slash. It's a rectangular area of a web page which we can use to draw. To enable us to draw, we use a scripting language, which is usually JavaScript's, but scripting languages can be used. But for the remainder of this course, we will be using JavaScript as is the most popular language used with the Canvas. If you do need any help with tutorials or references online, pretty much all of them are based on JavaScript and finally, the Canvas was added in HTML5. So it's pretty new, but it is quite well supported. Now let's take a look at one or two things that we can do with the Canvas. So as we mentioned before, we can use the Canvas to draw. We can draw things such as rectangles, circles, straight lines, and arcs, and many of the different types of graphics which we'll get into as we progress through the course. We can even draw text to the Canvas. We can add some simple text or we can at various different fonts, different colors. We can add gradients and even animate that text. The Canvas can be used to also add images and its various different image manipulation techniques, which we'll look at as we progress through the course. We'll also take a look out various animations on various transformations as we go through the course. There's lots of cool facts you can add such as rotations and you can apply some of these animations to actually create games. A lot games isn't really covered in this course. A lot of the techniques which we will use can then be applied to games if that's something which you want to progress onto. Finally, we can also patterns, gradients, and shadows to the graphics and the text to make that look really good. So I mentioned before that the Canvas has a opening and a closing tag, and also that the Canvas is pretty well spotted now. But just equip ourself for supported browsers. Between these two tags, we can add some plain text. Just let the user know that the Canvas isn't supported in their browser and maybe message just to ask them to update to a newer browser. So we can use this as a fallback fall on supported browsers. Again, like many over HTML elements, we can also add attributes to the Canvas opening tag. Many of these will look very familiar if you've done a little bit of HTML in the past. This example has a ID, which we're going to be using throughout this course to target the Canvas. This example's got a width and the height attribute to set the size of the Canvas which you want to use, and we can also add a style attribute, add things such as background colors, and borders. Lets look what the HTML5 Canvas is, some things we can use it for. So now let's move on to the next video. I will actually get started with setting up the Canvas. 3. Canvas Basics: Setting up the Canvas : I want to begin in this video by doing some basic Canvas setup. I'm going to work for this video and for the remainder of this course in CodePen, which is available from codepen.io. As you can see, CodePen is a playground for the front end web. Basically, what we can do on using CodePen, is we can have online text editor, where we can use our code. Also alongside in a split screen, we can also have a browser window which displays the results of our code. We'll do these in what is called a Pen. A pen is just its own self-contained area, such as we can create a website using a pen. I'm also going to be using Pens for each section of this course, just so all the different areas are contained and you can use them for future reference. Of course, if you don't want to use CodePen, you can use a desktop-based text editor and also a web browser, so feel free to do that route if you prefer. But for the remainder of this course, I'm going to use CodePen. If CodePen is something which you haven't used before, click on the "Sign Up" button at the top-right-hand corner, and then follow the simple sign-up process to create an account. CodePen does come with a monthly cost if you do want to use one of the pro accounts. However, all you need for the remainder of this course is sign up for one of the free plans. Go ahead and click on Sign up for them. You should hit the "Login" button. I'm just going to log into my account and hence, begin with set up the Canvas. I'm going to click on "New Pen." When you first start, this will be the screen that you see. You may have a slightly different layout. The white arrow you can see on the right-hand-side, is going to be the area where we can see the results of our code. Effectively, it's going to be the web browser. I've got a HTML section, a CSS section, and a JavaScript section. For this video, I'm just going to be concentrating in the HTML section. I'm just going to rearrange this just to get small some more room in there. Then I'm just going to click on the Pen and then call it "Setting up the Canvas." Then I'm going to save that to start with. The first thing I want to do in the HTML section is to create a basic HTML skeleton. That's nice and easy to do in CodePen. If you type in htlm:5. We can use the ML commands and the Hit tab, then that creates a HTML5 scale inference to begin with. I would set it straight to the documents tittle. I'm just going to call it the same, "Setting up the Canvas." Now, we're good to go inside the body section. We know from the last video, that the HTML5 Canvas has the Canvas tags. We have the opening Canvas tag, and we also have the closing tag with the forward slash. Begin with these two, then let's add some attributes inside the open-end Canvas tag. We know that we can draw graphics with the Canvas using scripting. I will mention that we're going to be using JavaScript for the rest of the course. We'll link the script to the Canvas by referring to the Canvas's ID, which you're now going to set as attribute. Give the Canvas an ID and you call it anything you want, but I'll simply going to call it "myCanvas." If we save that, we'll notice on the right-hand-side, that there's actually no Canvas drawn on the screen. This is because the Canvas tags as they are, actually, don't draw anything by default. Just so we can see underneath the title, I'm just going to add some styling there. This is just standard CSS styles. I'm just going to add a color to the background. Let's begin by tag in the Canvas and then add a background. I'm going to make mine red. There we go. That is the Canvas appearing on the screen there. We can see that there's a red rectangle appear. This is because by default, the width of the Canvas is 300 pixels wide with a default of 150 pixels height. Of course, we can't change this in the attributes. We can add a width of 300 pixels and also add a height of 300 pixels. Now, you can see we've got a nice square Canvas to begin with, then finally, for unsupported browsers, let's add the fallback text that we looked at in the last video. We'll start with the message of your browser, it does not support the HTML5 Canvas. Please consider updating or changing your browser for a better experience. Just like that. You can see if we save the Pen at the text, which will just place inside there, it doesn't actually appear in the Canvas on the right-hand-side. This is because our demonstration environment fully spots the Canvas, but of course, it's good practice to leave that in there for people who don't have an up-to-date browser. Now, we've got the basics of how to set up the Canvas, now, let's move on to the next video, we'll get down some drawing. 4. Canvas Basics: Scripting & drawing rectangles: Now we have the basic canvas setup on the screen. We're now going to move on to adding some scripting, and actually drawing some rectangles onto the canvas. The first thing we want to do is we said there's a little error message on the bottom. I'm going to first begin by clicking on this. You can see the CodePen doesn't need a doctype declaration, so I'm just going to delete that, just to get rid of that message, then save. Of course, make sure that's left in if you're using on a text editor on a separate web browser, or in fact, if you are deploying to the web, make sure that's kept inside there. For this video, I'm going to create a new pen, and we can either create a new pen in the same way as the last video, or we can actually just click on the fork one. This will create duplicates. We can then rename these duplicates, and this will save us typing all the HTML skeleton over and over again. I'm going to call this scripting and drawing rectangles, add the same in the title, and make a little more space there. The first thing we need to do to access the scripting is to create the script tags. So just blow the canvas, I'm going to admin, just there. So open up the script tags, and then we need a closing tag, and it's just like using standard JavaScripts. We used JavaScript in the past, a lot of the things we're going to do in this course will look fairly familiar. If not, don't worry, you should be able to follow along just fine. We're going to start by grabbing the canvas by the ID. I'm going to store it inside a variable called canvas. So create the variable with the name of canvas, and I'm going to grab the ID of my canvas by selecting the document.getElementById. Just make sure the elements, by, and ID have couple less. The element that we're going to grab is my canvas. So inside brackets, then inside the quotations type in myCanvas, then we'll end up with a semicolon. This section is grabbing the canvas by the ID, and then storing inside a variable called canvas. I'm going to create one more variable called ctx, this is short for context. This is because we are going to be accessing the rendering context of the canvas, and this allows us to actually draw to the canvas. We do this by calling the canvases getContext method. Inside this variable, we're going to select the canvas, which is created, and then dot, and then call getContext, followed by the brackets, and a semicolon. This course we'll be concentrating on 2D graphics. So inside the brackets as a parameter, we're going to add 2D inside of there, and this will specify that we want to create a two-dimensional rendering context. I will be using a ctx variable a lot throughout the course. Now that we have the context or the ctx variable, we can now use this to access the drawing properties by using it. I'm going to delete the style properties to add it in the last video, and I'm going to add these in various scripting. Grab the ctx variable, and then we're going to use the fillStyle method with a capital S, and the style is going to be the color which we want to set. This is a CSS color, so I want to call it red. We can use the color's name, or we can use the x value, or you can even use gradients, or puns, which we'll look at later on in the course. Let's actually use this color, and fill rectangle. Again, we need to use the context dot, and this time fillRect, which is of course a rectangle. Now inside the brackets of the fullRect method, we're going to add in four different parameters. I'm just going to add 0, 0, 300, 300. The first two parameters, the zero and zero, is the position we'd like to start the rectangle at on the canvas. So 0 x and 0 y, the first two values, is the top left-hand corner of the canvas. We'll look at more at the coordinates in the next video, but for now, we just need to know that position 0, 0, is a coordinate to the top left-hand corner, and then you've probably already guessed that the 300, 300, is the width and the height of the rectangle. We've created a rectangle the same size as the canvas, and rather than hard coordinates with a particular value, we can also use JavaScript to make them match the same width and the same height as the canvas. We change this to be canvas, and this is the canvas.width, and we do the same with heights. So canvas.height, and then we should get the rectangle appear exactly like it was before. Now I'm just going to create one or two more rectangles or squares just to play around with. We're going to grab the context, and again, grab the fillStyle method. I want to set this time to be a hexagon value, so use the hashtag, and I'm going to use 00ff99. This style doesn't actually do anything until we actually create a rectangle. So ctx.fillRect. Just like before, we'll start this in the top left-hand corner. So 0, 0, and this time we want to make it half the width, and half the height of the canvas. Using JavaScript, we can do that again. Rather than canvas, the width that we got in the last example, we're going to use canvas.width over two, and then the same for the heights, canvas.height over two, or divided by two. That should make a nice square up here in the top left-hand corner, which is half the weight and half the height of the original canvas. Let's add one more, just in a slightly different position. Let's fill style the again, this time with a different color. I will choose cc99ff, and then fill rectangle. This time we want to set it to be a 150 pixels, and this is the starting position in the center of the square because it's half the width and half the height of the canvas. I will make it the same size as before, so canvas width divide by two, canvas.height divide by two, because we've got nice pans down to merge in the browser. This is fine if you want to actually fill the rectangle like we have done with a specified color, but if once actually just to draw a rectangle showing just the outline with no fill color, we can do that by using the strokeRect method. Again, let's begin with ctx, and then we use strokeRect. Let us draw the outside or the outline of a rectangle. So make this time position 25, 25, and which will make it a nice simple 100 by 100 square. There we can see we've got the rectangle or the squares outline. Of course, the only difference between drawing a square or a rectangle using fullRect and strokeRect, it is simply the width and the height which we specify inside the parenthesis. So we could easily change this to be a little bit wider, and then turn the square into a rectangle. That's it. I hope you enjoyed your first taste of scripting using the canvas, and how to draw rectangles, and squares. Do feel free to have a little play around with that, and I'll see you in the next video. 5. Canvas Basics: Understanding the Canvas co-ordinates: In the last video, we'll drew some rectangles and some squares onto the Canvas. You were introduced to some basic Canvas coordinates. We just want to take a few moments now just to look at the Canvas coordinates in more detail. Understanding how the coordinates work will really help you as you progress through this course. Already know that 0,0 is the top left-hand corner of the Canvas. If we imagine this grid is the Canvas and each little square contained within the grid is one pixel. Because we're using the 2D context, we have both the x and the y-axis. The x-axis runs horizontally across the Canvas, whereas the y runs vertically. We'll have position 0, 0 on the top left-hand corner represented by the little dot. As the x value is increased, we run across the Canvas horizontally. If we go across four pixels, this is the starting points of the square, so x is equal to four. Because the starting points of the square is only one pixel from the top. This makes the y value equal to one. It's just the same as we looked at in the last video, where we set the 0, 0 position of the first rectangle. Then we set the second rectangle, or the second square to begin in the center of the Canvas to create a square in the bottom right-hand corner. We set the x and y position to be 150 by 150, which was exactly halfway in the middle of the Canvas. Being able to get your hand round these coordinates from an early stage will really help you as you progress through the course. It's really worth knowing that particularly the y-axis in traditional geometry and in various different industries, a positive y value, would actually increase up. Whereas in the Canvas, all the positive values for y go vertically down the Canvas. If you do come from a particular background where the coordinates are done in a different way, just be careful of that. Hope that makes sense. Now we'll move on to creating more drawings. 6. Canvas Basics: Lines & paths: In this video, we're going to take a look at the lines and paths that we can do using the HTML canvas. Let's begin by fork in the last video, and I will change the name to be simply lines and paths, they're the same with the title. Then we are going to delete everything between script tags except the first two variables we created. We're going to need these in all the videos that we do, we can leave these as they are. Let's begin with a simple example of how to draw some lines and we'll do that by creating a square, by drawing the four sides individually. Again, let's work with the context, so ctx..We're going to begin by using the beginPath method, and we just need to leave the parentheses empty on this, this just specifies the start of a new path. Now before we start drawing just before we start adding the square, I'm just going to add a border so we can see the canvas outline. Let's set the style to be equal to border, and let's make it 2 pixels so we can see it on a solid line. Let's have our canvas back, back to you beginPath and then ctx.moveTo. This is going to be our starting position that we want to draw our line from. I want to set the pen to be 10 pixels in on the x-axis, and also 10 pixels in or 10 pixels down on the y-axis. This will effectively move the pen to somewhere around here, and this will be our starting position. Then to actually draw a line, we use ctx.lineTo, and then we need to add our two coordinates that we'll want to draw the line between. The first one we're going to add is the x-axis of 290, and the y-axis of 10. You notice that nothing has appeared on the screen yet, this is because to get this to actually draw in the same way as the rectangles video where we had to use stroke and fill, we need to do the same for the line. Ctx.strok, this will stroke the outline. The line begins at position x-10, y-10, we choose 10 pixels in, and then we'll move 290 or move to position 290 which is here and also keep that 10 pixels position on the y-axis. Let's now continue with a second line 2 ctx.lineTo. We want to keep the pen across at 290, let's keep it there, but we want to drop it on the y-axis down to 290. I will get a straight vertical line, and hopefully you can see a pattern margin, ctx.lineTo. Now we need to move back to the first x position, which was 10 and keep the y-axis at 290. The third line, let's finish this off by going back to position 10, 10. This is our starting point and then we create a full square. Returning the line to the original coordinates is one way we can complete the square, there is a much easier way to do this. Let's comment out this line with two forward slashes, this line won't be red. Instead of this, because we use the beginPath method at the start, we can enclose a path off by using ctx.closePath. Then this will now return back to the original starting position and complete the square. That's how we draw a square by using stroke. If you wanted the squares have a color fill, we can change ctx to be fill, and then we'll get the color filled with the default black. We can change the default color to be anything we want by using the fill style method like we used for the rectangles. Let's move on by drawing some more new shapes, let's draw a triangle. Let's start by creating a new path. I'll begin the path of the triangle and then move the pen to the starting position. To have this inside of the square by 10 more pixels we'll have the starting position this time set to 20, 20, and let's create the first lines, ctx.lineTo. To make the first line go across the top for the start of the triangle, we need to make the position 10 pixels for every cross. This was 300 for the outline of the canvas, 290 for the edge of the square. Let's bring in 10 more pixels and make this 280, and the Y position can remain at 20. Then to make this an equal triangle, we need to move it down to position 20 on the x-axis, and a Y value to make it equal of 280 which is basically the opposite to this one ctx.lineTo, the X value of 20, the Y-value of 280. Then to return back to the top, let's simply close the path by using ctx.closePath, and then to make this appear, we're going to add ctx.fill. We don't actually see the triangle appear on the canvas. This is because the default fill color that we mentioned before is also black, which is blending into the same color as the square. Before we fill it, we can add a fillStyle, and let's set the color to be hexagon value again of 99ccff. We can see the triangle standing out on background. Let's add one more triangle, but this time we'll add a stroke rather than a fill. I'm just going to copy this triangle and just add this below. Of course rather than ctx.fill, we'll use stroke. Let's change the fillStyle to be red, just so we can see on the blue background. Let's offset it from the first triangle, let's set it to be start position of 40, 40. All the 20s can be changed to 40, and to make it equal we'll change 280 to be 230, and should make a nice even triangle. In fact this wants to be strokeStyle, because you're using a stroke rather than a fill. So that's our red color for the outline. Just before we finish this video, I just want to show you a few different methods for line dashes, they are setLineDash and getLineDash. To use the setLineDash we can add this to the last triangle. I'm just going to add it before the lines I've actually drawn, let's just add this below beginPath. We are going to use the context variable again, so ctx, this is setLineDash. Make sure to use capital letters for every word apart from the first one. Then we need to add some values inside the parenthesis, we need to actually add an array. We're going to use them with the square brackets, open up the square brackets just like this. To begin with a simple LineDash, I'm going to add two different values, 10 add 10. That makes a simple LineDash which is 10 pixels wide. Which is set by the first value, and then a gap of 10 pixels between each one of the lines. If you want these lines to be further apart we can change the second value, just like that. These values are just loop through until it reaches the end of the line. We can add more than two values, we can add a odd number. If we change this to be 10, 20, 30, the three value simply loop until the end of the line. Let's take a look at the line dashes. We can see if we start here, there's a first line of 10 pixels, a gap of 20 pixels, then a third line of 30 pixels. Then back to the start, we have a gap of 10, a line of 20, and a gap of 30, it's 10, 20, 30 again, and so on until right back to the start. Lastly, I just want to quickly show you getLineDash. GetLineDash is something which you may never have any use for, but I'll show you how to use it just in case. Underneath the setLineDash, I'm going to create a new variable, and this variable is going to start in the details of the LineDash. I'm just going to call it something relevant such as lineDashpattern, and then when I set this to be context., and the method we need to use instead of setLineDash is getLineDash. I'll start inside this variable, let's open up the console and do a console log, console.log and then the thing we want to log is this variable. Let's add that inside there, and then I'm going to open up the console which is just at the bottom there, click on that. There's our array of the return values for the LineDash. We got 10, 20, 30, and then it's repeated. Again, that's something that you may never need but it is there just in case you do need it. Thank you, and I'll see you in the next video. 7. Canvas Basics: Line widths & matching to pixels: Welcome back. In this video, I'm going to show you how to change the width of the line, or the lines thickness. I'm also going to take a look at the important concept of much into pixels. To begin, we'll just fork the last video, which was lines and paths. Then once that's done, we'll change the name. Line widths & matching to pixels, I'm just going to copy that, and paste that in the title, just like that. Then we could remove some of the unnecessary parts of the script that we don't need. For this video, we don't need the original square, so I'll delete the first section. We can also remove the first triangle. We'll leave the third triangle, but we'll just remove the line dashes. So remove the set line, dashed line, the variable, and also the console log. Then we're good to go. Save that. We should just be left with a outline of the red triangle. It's changed the width of a stroke line, it's pretty straightforward to do. We need to use ctx, the method we use is LineWidth. I'm going to set a value, let's say to a initial value of one, and see what happens. We don't get any differences, so let's try increase this to 10, and see what happens. We also get a much bigger line, or a much wider line, than we had before. We'll make it even more visible, so let's increases to 26. That's pretty much, all we need to do to change the width of the line. It really is that straightforward. But one more important concept, which is a little bit more tricky to grasp, is much into pixels. Sometimes we don't much to pixels correctly, we can end up with blurry lines. Just to show you an example, I'm going to copy this triangle we just used, and then paste in a second triangle. But this time we're going to change the LineWidth to be a odd value of 25. Just to offset the triangle so we can see the difference, change all the 40s to 80s, and all the values of 230 to be 270. Then save that. Now we've got to offset triangles. One has a width of 26 pixels, and one is 25. Just to show you what I mean, I'm just going to zoom in, in the browser, and I hope you can see this at home. If not, it should be a little bit more easy to see on your own computer. The second triangle which we just created, has a blurry outline. The first one, we've drawn has a sharp crisp outline. Let's take a look at why this is. To help you understand exactly why this is happening, I'd like to take a look at the two examples. The first one on the left-hand side, is a straightforward Canvas grid, with a green line, the green line is one pixel wide. This is drawn on the x-axis, seven pixels across. The red line indicates the center of the line. Starting from zero, if we go across seven pixels, were taken right to the center of the green line which we've drawn. Because the green line is only one pixel wide, the Canvas draws it half a pixel to the left, and then half a pixel to the right. As you can see, this doesn't fill a whole pixel, if we look at the square grids on the background. Then what happens is the canvas then draws or fills in, the rest of the pixel with a partial shade. This is the blurred effect that you can see on the previous example. All we need to do to make the line much the pixel, is take a look at the example on the right. Rather than the starting position to be at seven, we change it to be 6.5. Vertically the center line is halfway between pixel, and this then causes the line width to take up the full size of the pixel, and therefore, no extra shading like this example is needed. Therefore we have sharp lines, no blurred effect on the outside. Such a something I wanted you guys to think about, and to be aware of, when drawing lines or shapes on the Canvas. Thank you and bye for now. 8. Canvas Basics: Corners & miters: This video is all about corners and miters. Let's create a new Pen for this video by [inaudible] the last one. Then as usual, just change the title to be corners and miters and the same inside the HTML title. Let's create some more space. Then for this example, I'm just going to leave the first triangle from the last video and then get rid of the second one. There we go. The triangle which we've got on the screen has sharp corners. We can change this by using various properties. We can add rounded corners on beveled corners, as well as these miter corners which you can see by default. The way to do that is to use the context.lineJoin, and then we can set the type of join that we want to use for each one of the corners. The first one I'm going to add is round, and then save that. We can see that the edges on the free corners of the triangle now have a much softer rounded edge to them. We can also change the rounded corners to be a bevel. This adds much more of a squared off effect to each one of the three sides. The third property, which we can add is the miter, and the miter is the defaults which we started with. This won't actually make any changes from the original triangle, we're just left with the three sharp corners. If the miter effect is what you're looking for, you don't need to add this line in at all as its default. That's three styles which you can add to corners. Next, I want to show you how to use lineCap. LineCap is a technique which you can use to change the style of the ends of the line. To demonstrate this, I'm just going to remove the last two lines of the triangle. Just make that into a straight line. Then we can change lineJoin to be lineCap. The default is the butt and this is just the squared edges which we see on a standard line. It squares off each one of the ends and is the default style if nothing else is specified. We can also change these to be round, just as with the triangle example, which we just looked at. We got a nice rounded corner on each of the ends of the line. Now, the last one is the square. By using a square, you may not notice much of a difference and actually looks quite similar to the butt which we just looked at before, which is the default. However, when using the square, it does actually make the line a little bit longer because a square is added on to each end of the line. The square extends out half of the width of the line, so it makes it a little bit longer on each end. It's only a subtle difference, but it's worth bearing in mind if you need to have control over the length of the line. That's how you use lineJoin and also lineCap. The third and final technique which we want to take a look at in this video, is how to use the miterLimit. Let's take a little look at some slides to get better understanding. I've created a sketch to give you a better understanding of the miterLimit before we actually get into any code. In front of you is two different corners with different angles. As you can see, these different angles create a different length of miter. From the inside points to the outside points, the length is much wider on this example than over on the left. We can actually have control of the length of this miter by using the miterLimit. We can control the length of the miter if we want to by using miterLimit. If the length of the miter is longer than the miterLimit, which we set, the corner, as you can see on the right example, is then beveled or effectively cut off. We can use this to gain control over the length of our miters. Let's head back over to CodePen and put this into practice. For this example, we just need to add another line. Just make this into a corner, so create a lineTo. I'm going to make this 30,100. I should play around these to get a nice corner. I'm going to make that 250 and 70. I'll just change the x and y for the pen to move to 30 and 30. Now, let's make the line width just a little bit smaller, change that to be 10. We can see the full angle or the full corner now on screen. We don't need the lineCap from the previous example either. Okay, the first thing we need to do is set the lineJoin to be the type of miter. Let's add that here now. LineJoin equals miter, then we can add the miterLimit just below. We're just going to begin with the value of 10. 10 is actually the default value. You won't notice any difference by setting this to be 10. We've got a long sharp edge on there, got a sharp corner. Let's just try and reduce this down to five and see what happens. The value of 5 is lower than the length of the corner, so this has now being set to be a beveled end. We can use this to restrict the sharpness of a corner. That's how we can use corners and miters with the canvas. We'll move now on to the next video where we'll take a look at arcs and circles. 9. Canvas Basics: Arc's & circles: Moving on from the corners and miters from the last video, we're now going to take a look at arcs and circles. Let's create a new CodePen for this. So fork the last video, then let's create a title of arcs and circles. I'm going to read all the script except the canvas and the context variables, so we'll start fresh inside of that. Before we start writing any code, let's take a look at some slides to get a better understanding of how to use arc. This is the arc method and it takes in various parameters. To begin with, we've got the X and the Y properties and these are center of the arc. So right in the middle of the arc or the circle that we want to create. The third property is the radius so the radius is the distance from the center to the outside of the circle. Then we have the start angle and the end angle. We need to understand that arc uses radians rather than degrees. So only horizontal or the X axis, this is the start position or zero. This is effectively at three o'clock. Then a quarter the way round, this will be 0.5 times pi. Halfway round would be one times pi, 1.5 and then two times pi would be a full rotation or a full circle. The last parameter is where we want the arc to be drawn clockwise or anticlockwise. This is a Boolean value which is set to either true or false. So by default, it's set to clockwise. If we set that to be true, we could then change this to be anticlockwise. For this example, the start angle would be zero. We'd want it to go anticlockwise all the way round to 0.5. times pi for the end angle. If you do want to work out what radians are in relation to degrees, there's some calculators online, so just give that a quick google and you'll be able to find what you need. Let's now head back to CodePen and take a look at some examples. Let's begin by creating our first arc. I'm going to begin a path to start with. Then let's create the arc, so ctx.arc. We add the parameters inside the brackets, just like we looked at in the slides before. The first two values is the center of the arc. I'm going to make my inner center of the canvas. So 150,150 then the radius I'm going to make mine 80. The starting position, mine is going to be set to zero. Then the end angle, I'm going to make mine one times math.pi. The starting position of zero is over in the three o'clock position. We've got the finish position to be one times math.pi, which is over at the nine o'clock position. To draw this, we just need to add the stroke or the fill. So ctx. stroke just to give us the outline, so there we are because this is default to clockwise. It's going round in the clockwise position. If we want this to be the other way, we can change it to be true. Then we'll get the arc which goes round in the anticlockwise direction. We can also fill the section of the arc by using ctx.fill. There's a default black which we've seen in previous videos. Of course we can change the fill style, if that's something which you want to do. If we want to create the full circle, as we looked at previously, we just need to change the end angle to be two times pi and that creates a full circle. I'm trying to change it back for now. Next I'm going to take a look at arcTo and arcTo can be a little bit more difficult to understand. Let's take a look at a good example which I found online. This is available at rgraph.net. If you do a search for rgraph and also the arcTo function, you should be able to find this interactive example. To understand arcTo, we need to be aware that there's more than just a start and end angle. We begin with the P0, which is just down in the bottom left-hand corner. We can move this if we want. We'll begin by setting P0, which is the start position, by using moveTo. We then set the value of P1, which is a point where these two lines meet. P2 is then the end position. Then we use lineTo to continue with the line vertically to the endpoint. This is a great example because we can move any of these points and we get a better understanding of how it all works. Let's go back over to CodePen and create an example for ourself. Still within the script tags, we're going to create a new Path. Let's begin the Path. Just below the last example. In fact, we'll create a little bit more space to play with so let's make the width to be 600 just so we can squeeze both those on. We are going to puff. Then the first thing we need to do is create a starting point so ctx.moveTo. The position we're going to start at is X, 300 and then Y, 150 so create a starting point, which is effectively P0. Then I'm going to continue the line with a lineTo. The point I would like to set the lineTo is 400,150. Let's add the stroke so we can see the lines as we're drawing them. There's our starting position.Now we move the line across 100 pixels. We have lineTo. Then let's create the arcTo method. Let's create the coordinates, which is for P1, which is just up here. I'm going to set mine to be 500,150 so this then creates the imaginary P1 position. Then because we want the line to curve round and move down on the Y-axis, we're going to make it 500, then drop down to 300 and then a radius of 75. Then to extend the line right down to the finish position, which is 500,300 then you just extend the line with a lineTo of 500,300 and there is our arcTo complete. Just to recap, we've moved to position 300,150, which is here. We've then created a line, 100 pixels [inaudible] across which takes a line across horizontally. We've then created the arcTo so the first value of 500,150 is the imaginary P1 position, which is here. So because we want the arc to then curve round, we'll then drop the Y value to be 300 and 500,300 is the finish position, which is down here. We then extended the line to be straight down to the finish position creating the full arc. I hope that makes sense. Probably play around with the values and see what you can create. Also do a little play around with the interactive example. That's how we can add arcs and circles to the canvas. If you come back in the next video, we'll take a look at drawing text. 10. Canvas Basics: Adding canvas text: In this video, we're going to move on from actually drawing shapes and lines, and I'm going to show you how to add text to the canvas, and how to add various styles and effects to make your text really stand out. I've gone ahead and copied the last video and created a adding text code pen, and then cleared out the script section, leaving the canvas and the context variables. The way to add text to the canvas is by using fillText and also strokeText, and you should be able to guess what those two do from previous videos. The strokeText draws the outline, and fillText draws the text with a color fill. We're going to begin by using fillText. So ctx.fillText, and then the brackets after that. The first property we need to add is the text we want to display. I'm just going to add some text of adding canvas text. Then the starting coordinates of 0, 0. We notice that if we look at the canvas on the right-hand side, we can't actually see any of the texts that we've just drawn. This is because the text coordinates of 0, 0 are actually at the bottom left of the text. To move it down so that we can see it on the screen, we are going to change the y-value to be 50. Now we can just about see it appearing on the screen there. To make it a little bit bigger, we can add some font styles, ctx.font. Let's set the font to be equal to 50 pixels to make it bigger, and also the font type to be Helvetica. In fact, to get this to work, we just need to place this just before the fillText, and that should make the text be bigger now. There we go. That's a lot bigger now, and we've changed the font. The default size is 10 pixels, and it's a sans-serif font. Now, let's give it a little bit color. Let's add a fillStyle, ctx.fillStyle. To make it simple, I'm just going to add a color name of purple. Then let's push the text into the center of the canvas by using textAlign. I'll put this to be in the center. Okay, that's not exactly what we're looking for. If we wanted the text to appear in the center of the canvas, we need to change the starting position in the fillText method. Currently the text is centering over the zero coordinates, which is over here. Let's push that into the middle of the canvas. We're going to add canvas.width over 2. The text is referenced from halfway across the canvas. Let's do the same for this value, change 50 to be canvas height divided by 2, and that's the baseline of the text to be across the center of the canvas. Okay. Next we are going to take a look at text baseline. Before we look at that, I just want to draw a line right across the center of the canvas, and you'll see why in just a moment. Let's quickly just create a line. Move to 0 canvas.height divided by 2. Let's draw the line. The line is going to be the width of the canvas, and then the y position is going to be canvas.height divide by 2. Let's draw the line with the stroke. Okay, now we've got a line appearing across the center of the canvas, and you'll see why in just a moment. I'm just going to move the text just to the very bottom there. Let's start playing around with the text baseline. Underneath there, I'm just going to add ctx.textBaseline. As it currently stands, we've got the text also nicely on the line with the tails hanging below the imaginary line. Let's change this by changing the textBaseline to be bottom, and let's see what happens. That effectively pushes the text up. Every single letter or every part of each letter is now resting on the baseline. There's quite a few different options we've got to look at the baseline, we can also use top, and this pushes everything below the baseline. We can also use middle, and this adds the baseline to be through the middle of the text. There's also alphabetic. This brings us back to the start, as this is the default value. The last one that I'm going to show you is hanging. By using hanging, it actually looks a little bit like when using top. However, there's no gap between the top of the letters and the baseline. They're effectively just hanging off the baseline there. When using the fillText method, there's actually one more parameter which we can add, and this is an optional value. This sets the maximum width, which we can use to restrict the text to a certain size. As an example, I'm just going to restrict the text to be 200 pixels wide. You can see that squashes the text up. Let's change it to 300, that makes it a little bit wider. That's useful if we want to keep the bounds of the text within a certain container. Of course, just like when using all the shapes in previous videos, rather than using fill, we can change this to be stroke, or stroke text. Then we just get the outline of the text rather than a solid fill color. That's how we can add text to the canvas, and how we can add styling to our text. Now let's move on to the next video. We'll take a look at removing sections of the canvas. 11. Canvas Basics: Removing sections of the canvas: Welcome back guys. This video is called Removing Sections of The Canvas. I'm going to take a look at a couple of different methods to both cover-up sections of the Canvas, and also completely remove the pixels which had been drawn to certain areas of the Canvas. But let's take a look at how to clip an area of the Canvas to restrict the drawing to a certain shape. I've gone ahead and fork the last video and set the title to removing sections of the Canvas. I'm now going to remove all of the scripting as usual except the Canvas and the context variables. Then lastly, I'm going to change the style at the background, and let's set that to be red. You'll see why in just a moment. Using what we already know, we can create the effect of removing sections of the Canvas just by adding a shape such as a rectangle with a background color such as white. Let's do that now. First of all, set the fill style of the rectangle, and I'm going to make that white. Then let's create the rectangle itself with fillRect. I'm going to create mine in the top left-hand corner. So zero-zero for the starting position, a width of half the Canvas, which is 300, and then I want to set the height to be half the Canvas again, of 150. Then we get a white rectangle in the top corner, which gives of the illusion that part of the Canvas has been removed. However, this is just covering the object which is being drawn rather than actually removing any pixels. If we wanted to actually remove any pixels within a certain area which has already been drawn, we can do this by using the clearRect method, and this actually removes all the pixels within a given area. Let's take a look at that. If we wanted to remove part of the rectangle which we've just drawn, we could use ctx.clearRect, and the parameters work in the same way as the fillRect. We start with the position that we want to begin with, which in my case is zero-zero. I'm just going to create a 100 by 100 square to remove, which you can see it's just about the top corner. This has removed the pixels which has been drawn within this 100 by 100 section. Of course, if you want to clear the whole of the Canvas, you can just simply add canvas.width and also canvas.height. This will select the whole area of the Canvas and clear all the pixels which has been drawn to it. I'll just put a command in front of this just to get our white triangle back. The last method I want to show you is clip. If you've ever used a clipping mask in photo editing software such as Photoshop, clip works with the same effects. We declare a section we want to clip such as a rectangle or a circle then anything else which we draw on the Canvas will only be visible within this drawn area. Anything else outside of this area will not be visible. Let's take a look at an example. I'm just going to draw one more rectangle. This time I'm going to create a white rectangle in the bottom right-hand corner. I'm going to set the starting position to be in the center of the Canvas, so that's 300, 150. Then exactly the same for the size 300 by 150. To create this clip, I going to first draw a circle in the center of the Canvas. We can use a circle to be the area which we want to restrict the drawing to. Let's add a circle or an arc. We know how to do this. We can use ctx.arc. The starting position is in the center. The Canvas width divided by two. Same for the heights. The radius of 150. Then to draw a full circle, we'll start with the zero as the starting position and then two times Math.PI. Then we'll draw it with the stroke. Now, there is our a circle which is the full height of the Canvas. Now, if we want to restrict all the drawing to be inside of the circle, we can then clip this area. We have ctx.clip. Now, all the rectangles and all the objects which had been drawn is only visible within this circle or this area which we've created. All that's left outside the circle is simply the Canvas background color. That's how we can remove sections off the Canvas. We looked at how to cover up certain areas, we looked at how to remove pixels off the Canvas, and finally, we looked at the clip method to restrict all the drawing to within a certain area, such as the circle which we've drawn. We'll leave this video there, and I'll see you in the next video where we'll take a look at gradients. 12. Canvas Basics: Gradients: Welcome back guys. In this video, we're going to take a look at how to use gradients within the canvas. In particular, we're going to take a look at two different types. We're going to take a look at linear and radial gradients. To begin with, I've created a new pen, titled gradients. I'm going to remove the canvas script in, which we don't need. All the sections below the two variables can be removed. I'm going leave the style background as red, that's fine. Let's begin just with a comment, just of linear gradients. We're going to start by using the create linear gradient method. So ctx.createLinearGradient, and as usual, be careful of the capital letters for linear on gradient. So within the brackets, we need to specify the start and the ending position. So I'm going to create a gradient from one corner of the canvas, right across in a straight line to the other. This is going to be used to blend from one color to another, or even blend using as many colors as you like. So I'm going to set the starting position to be in the top left, which is 0, 0, and then the finish position to be in the bottom right. So let's crop that with canvas.width and canvas.height. So next I'm going to add this line into a variable. So variable I'm going to call mine linear, because it's a linear gradient. Let's store it inside there. We can then use this variable to add color stops, which is the color which we would like to add at various positions or various stages of the gradient. So let's add the variable of linear.addColorStop. So within the add color stop method, I'm going to add two parameters. So the first one is a value between zero and one. This is the position of the gradient where we would like the color to apply to. So zero is the start of the gradient, and one is the end. So I'm going to set the starting color to be green, and then I'm going to add two more. So linear.addColorStop. This time we're going to cycle of orange. I want this to be halfway across the gradient. So I'm going to set it to be 0.5 and color to be orange. Then we'll set one more in exactly the same way. But this time at the end of the gradient, which is position one, and then the color, I want to set mine to be red. So we're nearly there now just a couple more lines to get this gradient to work. So next we're going to set the fillStyle, which you've seen before, ctx.fillStyle. So up to now in this course, we've been setting a certain color, such as white, red, or black that we'd like to apply to the fillStyle. But this time we can apply the gradient by adding the linear variable, which we just created. Then lastly, we need to create the rectangles, add the gradient too. So let's simply use a fillRect method. I'm going to create this rectangle to be the same size as the canvas. So 0, 0, 600, 300, and save that, and there we have it. There is our linear gradient. So we start the beginning, which is position zero. We start with a green color, and then halfway we blend into orange. Then finally we end at the red color, which is set to be position one, which is the very last position of the gradient, which is just here. I've created the rectangle to add the linear gradient too. So I mentioned at the start of this video we're going to take a look at two different types of gradients. So the first one being linear, and then the next one we're going to take a look at is radial gradient. So the difference between a linear gradient work between two points across a straight line, whereas a radial gradient is circular and is a blend between two imaginary circles, which we specify. So let's take a look at radial gradient. Just like we've done for the first example, I'm going to create a variable, store this in. So this time I'm going to call it radial. So set that equal to ctx.createRadialGradient. So the parameters we need to add is different to the linear gradient. Rather than having a start point and an end point, we need to define two imaginary circles. One being starting and one being an ending circle. So to begin, I'm going to create the two circles at the same starting coordinates. Then we'll create the gradient effect by enlarging the second circle's radius. So let's add the six parameters. The first three parameters is for the starting circle. So I'm going to create this at the center of the canvas, which is 300, 150. The third value is the radius of the starting circle. So I'm going to set that to be 10. Then we're going to do the same for the second circle. So again, at the center of the canvas of 300, 150. But this time we'll make the radius to be 150. Then just like the linear example, we can use the radial variable to add the color stops. You can add any color which you like inside there. I'm just going to keep mine the same as the last example. In fact, I just copy these two lines and change the variable to be radial. Then set the fillStyle, and this is radial. Then just as before, we'll also use fillRect. I'm going to set it to be the full size of the canvas. So 0, 0, 600, 300. Now we've got the radial gradient displaying on the screen. So we create the first imaginary circle with the radius of 10. This is the smaller inner circle, which has the starting color of green. Then as we move outwards to the largest circle, which has radius of a 150, this is the endpoint where we blend to red, which is the outside of the circle. So this effect is being achieved by placing two circles, both on the same starting coordinates of 300, 150. Of course, we can play around with these and create an offset. So for example, if we change the x position of the starter circle to be 200, that moves the green section to be far with the left. We can play around with this and get some nice effects. So let's change that back, and we can also change the position of the ending circle. So I'll change that one to be 200 too. This offsets the second circle to the left too giving us a different effect there. So do have a play around with those values and see what you can create. Then when you're ready to move on to the next video, we'll take a look at adding images to the canvas. Will see you there. 13. Canvas Basics: Adding images to the canvas: We're going to take a little break from actually drawing onto the canvas. I'm going to take a look at how we can actually add images to the canvas and how we can work with them. I've gone ahead and created a new pen and named it Adding Images To the Canvas. Go ahead and create one if you haven't already done so. To begin I'm going to change the style, so let's just remove the background color because we don't need that. Then I'm just going to add the border once again of two pixels and a solid line. Then let's get rid of the linear and the radial gradients section. Now we're left with a blank canvas with the border. Let's begin by adding image elements to the canvas and let's store this inside a variable called Image. Variable image is equal to a new image. Then we can set the source of the image with image.src, and then we'll add the path to the image you want to add. To grab an image I'm going to head over to Wikipedia. I'll go to wikipedia.org. Just take a look at an image which you want to work with. This looks like a nice image, so let's just click on that. Then if you right click or Control click, we can then click "Copy Image Address", and then paste this inside the image source. To get this to display we need to use the draw image method, so ctx.drawImage. Then inside the brackets we need to first add the image you want to add. We've got it stored inside the image variable, and then it's at the starting position so the x and y of 0, 0. This should make the image appear in the top left-hand corner. As you can see the image is a lot bigger than the canvas. It's stretched a lot further than we can see. This is easy to fix. All we need to do is set the size of the image. I'm going to set this to be the same size as the canvas with canvas.width, then let's set the height to be canvas.height and save that. That's how we can add image to the canvas. We're not restricted to other new images every time. We can actually use a image which has already been added, not only to the canvas but to any part of a web page. So we can grab either the full image or a section of the image. To do that I'm just going to copy this image source, and then let's delete the image we've just added. I'm going to add this image as a HTML element, so image source is equal to, and then paste in the link that we just copied. You can see that the image has appeared below the canvas. That's good. I'm just going to add an ID, so we can use that with scripting just simply of myImage. I'm going to use that to grab the image soon. Then just to restrict the height, so we can see a little bit better on the page let's set this to be 300, and then close off the image tag. We've got an existing image which is appearing off the canvas. We want to grab the full image or a particular section. The way to do that. If we head back over to the script tags and then we can grab this image by its ID. Let's store the image inside a image variable once again. The image is equal to documents, and let's grab it by its ID with getElementByID. The ID which we want to grab is my image, so just add that inside of there, and then we can redraw the image onto the canvas with ctx.drawImage. What do you want to draw? Well, it's this variable called Image so let's add that in. Then the position which we want to add it to is 0, 0. The image doesn't appear on the canvas. This is because we are trying to crop the image before it is actually finished loading. To overcome this, we can add a onload function. This means our canvas code will not actually be run until the document has finished loading. This includes all the images and all the scripts. Let's surround all the current script within the onload function, so window.onload. Once the browser has loaded up, we'll trigger a function. Let's open up the curly braces, but surround all the existing code within the script between these curly braces. Let's just indent this and save that. Now the image has appeared on the canvas, such as something to bear in mind because sometimes you try to grab an image or something of a web page before it's actually loaded, and then when nothing happens, we sometimes think there's a problem with the code. Whereas all we need to do is wait for the window or the browser to finish loading the script or the image, and then we can begin to work with it. The last thing I want to show you is how to crop or slice an image. We can also do this by using the same draw image method which you'll just take it and look at. The only difference is it takes in a lot more parameters. Let's take a look at a slide to find out how to use this. On the left-hand side is the source image. This is the original image, it's full size. The first parameter is just simply the image that we want to grab. We then got an x and y position which is the starting point in the top left-hand corner of the area that we want to crop. We'll then set the width and the height of the area of the image which we would like to crop. Then on the right-hand side, we've got the last four parameters which all relate to the canvas and how we'd like to place on the canvas. We'll start with the x and y position. They'd like to draw the cropped image too. Again, this is the top left-hand corner of the image in relation to the canvas coordinates of 0, 0. Then lastly, we've got the width and the height of the cropped image. This is the size the image will be when placed back onto the canvas. Let's head back over to CodePen and put this into practice. Using what we've just taken a look at, we can add some additional parameters to draw image. Rather than the full size image, which we currently got, I want to crop a 100 by 100 pixels square from the top left-hand corner of the original image. We can leave the first value as it is, because this is the image which we would like to grab. We can also leave the 0, 0 position as this is the top corner that we want to start from. The area which we want to grab is going to be 100 by 100. Then to place this section into the middle of the canvas, I'm going to use canvas.width, divided by 2, take away 50. This 50 is half the width of the image so this will offset the image to be in the center. We'll do the same for the height. Divide by 2, take away 50. Then we'll keep out the same size as the original crop of 100 by 100 pixels, and there we have it. This is the top left-hand corner cropped from the original image which is from this section. Then we'll place in this cropped area into the center of the canvas with these last four parameters. That's how we can add images to the canvas and I'll see you in the next video. 14. Canvas Basics: Patterns & shadows: This video is all about using pattern and shadows with the canvas. We're going to begin with patterns, and for this example I'm going to add an image. This image is going to be a seamless tile, which means we can repeat the tile horizontally and vertically, and it will all blend into one. I've created a new CodePen with the title of Patterns & Shadows. I've changed the canvas width to be a little bit larger, which is 1,000 by 1,000. This is because the tile which I'm going to be using is 640 pixels, this just gives you a little bit more room to repeat the tile. If keep the function, the onload function from the last video, the canvas variable, the context variable. I will also reuse this image variable that we used in the last video. To begin, I'm just going to head over to Pixabay just to grab a image tile for use in this demonstration. I want to do a search for seamless tile, and then just choose a tile which you like. I'll go for this one and then I just click on the Free Download. Ideally we want to download the picture and include it into our project folder, I'll link from there. But because we're using CodePen, unless you've got a PRO account you won't build out these as an asset to actually use. I'm just going to for this example, click on "View", and then select the image address. Then let's paste this into the image source from the last video. Now we can use this image to create a pattern, and the pattern is declared in a similar way to the gradients that we looked at a few videos ago. We're going to stall this inside a pattern variable, a variable of pattern. I'm going to set this to be ctx.createPattern. Create pattern takes in two parameters. The first one we're going to add the image which you want to display, and then the second parameter is the type of repeats that we want to use. I'm just going to set this to be repeat, and we'll come back to that in just a moment. Then next we can set the fillStyle to be equal to the pattern that we just created. Then lastly, we set the shape that we want to be filled with the pattern, I'm just going to add a rectangle and keep it the same size as the canvas. 0, 0 and the canvas size is now 1,000 by 1,000. We can see the image has been displayed, select your stretch the browser and see all of this. The image has been repeated, it's now filled the full size of the canvas. We know it's been repeated because Canvas is 1,000 pixels wide, yet the image is only 640. We've got repeat just about there, and this is the start of a new tile. Let's take a look at some more of the parameters. This was repeat, I can change it to no-repeats and you can probably guess what that does. This changes the image to only display once at the specified position. There's also repeats on the x and the y- axis. So repeat-x, and this will mean they only repeats across the x-axis, there should be some white space at the bottom and then let's do the same on the y-axis. There's the vertical repeats, and of course you can repeat anything you want, it doesn't have to be a image. Next, we want to move on to looking at shadows, and to do that, I'm just going to change the canvas width box to be 600 by 300. Then we can remove the pattern example to move all of the image section, all of the pattern section, you can also remove the image from the bottom there. For this shadows example, I'm going to draw some text onto the canvas. With ctx.font will make it quite large, we'll make it 80 pixels. Then a font type of Helvetica, and then a fillStyle to be equal to a color. I'll make mine green and then the text-align, let's place in the center of the canvas. Fine, let's draw the text with fillText. Hopefully you remember how to do this, the first parameter is the text that we want to display. Let's keep it simple, with text shadows is five this example. The X and Y position, I'm going to create a size of canvas width divided by 2, and then the same for the height. The last parameter was the maximum width, let's restrict this to be 400 pixels. There's text, but we just got a little typo on this, that needs to be px of course.Okay, great. We've got the text on the screen, we can start to add some shadows. Let's do this above the text that we just drawn. The first method we're going to take a look at is shadowOffsetX. This is a value in pixels, let's begin with five. This is the shadowOffset on the x-axis, and then so that you can see the shadow that we just created let's add a shadow color. We have ctx.shadowColor, it stands out nicely, let's change that to be red. We can see the red shadow, which is coming across five pixels on the x-axis. These values can be positive or negative, so we'll change this to be negative five. We should see the text shadow on the opposite side. We can do the same on the y-axis, we have a shadowOffsetY. Let's add a five pixel shadow on the y-axis. As you can see, we can combine the X and the Y to create some nice looking effects. We can also add a blur by using the shadowBlur method, and it sets the level of the blurred effects. The default value is zero, we'll set this to be something a little bit larger, it's just 15. This gives us a nice blurred or a blended effects. We can increase this to be a little bit larger. We'll try 30, and that's a little bit more subtle. Let's change it back to 20. Have a little play around with those values and see what you can come up to with, and I'll see you in the next video. 15. Stepping It Up: Bezier & quadratic curves: Welcome back guys. We're going to start things up a little bit now and take a look at how to use bezier and quadratic curves. Let's create new pen for this video. So this is called bezier and quadratic curves. We should copy this again just so we don't need to keep remembering how to spell that. Paste that in into the title and save that, make it a bit more space. It should move all the script in again except our canvas and context variables. So we're good to go. First we're going to take a look at quadratic curves. To get started and to explain better how they work, first I'm going to draw three circles or three dots on the canvas for reference. Let's begin with a path, and you see why we draw these in just a moment. Let's create the start points, and then let's create our first circle, we're at arc. So I'm going to make the start points 50, 250, radius of five, and the position of zero to begin with, and to make a full circle is two times math.PI. I'm just going to copy this arc so you can use it a few more times. Let's move to the second points to draw the second circle. So one is to be at 550, 50. Let's draw the second arc on there, and then the third one is going to be moved to position 50, 50, and then the third circle, just on there. Then to draw the circles, we'll use the fill method. Let's change the positions of the arcs so much should they move to. So this one's 550 and 50, and the third one is 50 and 50. Now, we also got the three points on the canvas as a reference. So I'm just going to add a comment. This is the start point, this is the ending points, and then the third one is what we call a control point. We use quadraticCurveTo to create what is called a quadratic bezier curve. This type of curve begins from the current pen points. Let's start with the current pen points by using a moveTo. This is the position that we want to begin with, which is this first dot here. So the starting points was 50, 250. Those are dots inside of the brackets, which will move the pen to this starting dot there. Then we use the quadraticCurveTo method, and it takes in the control points and also the ending points. Let's add that now. So ctx.quadraticCurveTo. The first two parameters are the control points, which is this one. This is position 50, 50, and then two more, which is the end point. We've also got the endpoints of 550, 50, and then to actually draw the line, we can use the stroke. Now let's see what happens. We've got a nice quadratic curve line, so we've got the starting points we've moved to, we've got the ending points, which we've added just here, and then we've got a control point, which effectively pulls the line towards to create the type of curve which we want. Of course, we can change this to be different values and this will affect the position of the line. Let's change that to 0, 0, and we get a different type of curve as the line's pulled further into the corner. Next I want to take a look at a bezier curve. This works in a similar way to the quadratic curve, which we just looked at. But rather than taking in one control point, we use two control points to have a finer control over the line. Let's just add a comment of bezier curve. We can get to work by adding some references, just like we did before. So ctx.beginPath. This time we need to create a starting point, and ending point, and then two control points to work from. To make the stand out on the canvas, we'll just simply change the fillStyle, this time to be red. The starting point, let's do the ctx.arc. The first point is 100 by 50, a 5 pixel radius. I will make a full circle, with two times math.PI. Let's copy this one, and then let's add them with the ctx.fill. There we go. That's the first point, which is our starting point. Then we'll create the ending point. Let's add a new arc, and if I could do the moveTo first. The next one we're going to add our position 500, 50 and then add the circle at the same point, so that's our second circle. These circles which you are drawing are purely for demonstration purposes, just so you can see how the line is being pulled towards reference points. We don't actually need to include them when creating the curves. We got the start points, the end points, and now we need to create the first control points. So control point 1, and then let's move the pen to be position 100, 250, paste in the arc at the same position of 100, 250. Then control point 2, I want to be at position 500, 250. Just change the arc to 500 and then 250. That leaves the starting point, the ending point, and then the two control points at the bond. What we're looking for is a curve which is going to start here, and then go round and be pulled by the two control points and the curve back up to the ending points in the top-right corner. Just like with the quadratic curve, we'll move the pen to the starting position. We have ctx.moveTo, and the starting point was 150, and then rather than quadraticCurveTo, we use bezierCurveTo to draw the line. We've got our starting points up here. So let's add control point number 1 first, which is 100, 250 on the x and y, and then control point 2, which is x, 500, and then y, 250, and then lastly we add the end points, which is our 500 by 50. Then we'll add the stroke to finally draw the line onto the canvas. Just like before, we can move the control points to create different style of line and give us any type of curve that we want to use. Of course, you can also use fill rather than stroke to fill the curve with the background color. So change it back to stroke. That's it. I hope that makes sense, and that's how we can use bezier and quadratic curves with the canvas. I'll see you in the next video. We'll take a look at using the save and restore methods. 16. Stepping It Up: Save & restore: Welcome back guys. In this video, we're going to take a look at a interesting feature of the canvas, which is the save and restore methods. Let's create a new pane to demonstrate this. Let's call this save and restore, so Copy and Paste into the title and let's clean up the script, totally all of the section from the last video. Then change the height of the canvas to be 600 and then we're good to go. There we go. First of all we are going to take a look at save on the say method saves the current state of the canvas onto a stack. The current state saved includes things such as the stroke style, the width of any line style, the phones baselines, mighty limits, and the transformation to name a few. Let's begin by creating two circles, so I'm going to create one red and one green. I'm going to create a path, we'd begin path. This is for the first circle, so I'm going to add a fillStyle equal to green and then draw the circle with the arc method. The first position that I want is 150 by 150 on the x and y, a radius of 80, and then we'll create a full circle with the starting position of zero. Then two times math.pi, and then use a fill, so it's a green circle and I'm just going to Copy this and Paste it in below will change the fillStyle to the red and the position to be 400, 150, so we've got nice reds and a nice green circle. I'm going to create one more circle below, but this time without any color fill, so let's delete that and move the position to be 150, 400. Change the y to be 400. You notice how this third circle, even though we haven't got a fillStyle, has inherited the red color from the previous circle. This is fine if that's what we want. But we can also use save and restore at certain points to changes. For example, we can save the canvas state after the first circle and then use the restore method just before we create the third circle to give it the color of green. Just after the block of code for the first green circle, let's add ctx.save and so we know what we're doing. We'll just add a comment, so this will save the green fill and then to create the green fill on the third circle, we can add ctx.restore. Just fold the third circle is drawn. There we go. So that restores the circles color to be green just like the first one. We can also carry on with multiple save and restore points. I'm going to create a fourth circle, not the bottom. This time the x is 400, the y is 400, and the rest can remain the same. We've got a safe point for the green field, so let's add a safe point also for the red color. Let's do one more save and a comments so this will save the red fill. So you know, is something has just happened there. Once we've created a second save, we save the red fill, the green circle that we restore to you before is now reverted back to red. Let's just comment that out to C, so it's green. Then we add the save, and then it changes red. The reason this happens is because you mentioned at the start of this video that every time we create a save is added to the stack, so we're first going to save, which is a greenfield, would then saved onto the stack a red fill and because we've only done the restore method once, it reverts back to the last safe, which is the red fill. If then we want to revert back one more save back to the greenfield, we need to do a second restore, so ctx.restore. Now this to restore back the green will just remove the fillStyle. That should go to green, which it does. Let's add some comments into that, so because this is the first restore, this recovers the last save and the last save was the red fill. Then down below we've got the second restore, which recovers the second last save from the stack, and the second last color, which you saved was the original green fill. They'll go so hope that makes sense. By using save and restore, it's all down to the order in which we create the saves. Then we need to restore in a particular order to make sure that we recover the particular save that we'll want to re-use. Thank you and we'll move on now to the next video where we'll take a look at how to scale, rotate, and translate. 17. Stepping It Up: Scale, rotate & translate: Welcome back everybody. Let's begin with creating in our new pen for this video, which is called scale, rotate and translate. So let's just change the title to be scale, rotate and translate. Then let's create our skeleton template. To reuse will give the function, the two variables and all the rest can be deleted. There we go. So this video is all about applying transformations to our Canvas drawings. In this video, we'll be looking at scaling, rotating, and translating. So first, we want to begin by creating a simple rectangle to manipulate. So let us draw a rectangle with a fill style. I'm going to make mine purple. Then draw to the Canvas with fillRect. So the top left-hand corner is 0, 0, 300 in the x and 200 on the y. So just a simple filled rectangle. I'm going to begin by adding the translate method, and this moves the reference points of x and y to a different location. So let's add ctx to our translate. It takes in two parameters, which is the x value to begin with. Let's add y value of 100. So we can see what that just did. We've translated the reference points, which was originally 0, 0 in the top corner. Then we've moved the reference point to be 100 across and 100 down on the y axis. We can also rotate our triangle or rotate our drawing by using the rotate method. By using rotate, the default value, which we're at, is in radians rather than degrees. So to convert to degrees, we need to multiply the degrees by maf.pi divided by 180. Same value that we had at the start, such as 45, will then be in degrees. This will rotate the rectangle by 45 degrees. We just got to be careful when using translate and rotate both together. We need to add translate first. Because if we don't, the rotation points is the Canvas origin, which is the top left-hand corner. So just make sure these two are applied in the correct order. So I'm just going to comment out the rotation and I'm going to move on to scaling our drawings. So you can scale them to be larger or smaller. To do this, I'm just going to create one more rectangle. So I'll just copy this section and then paste the second triangle in. So the fill style, I'm going to set mine to orange. Then to move it away, we'll add a translate. So the x of 100 and the y value of 300. So we got the two rectangles drawn to the screen with different translates locations. We're going to use the scale method to apply some scaling to the second rectangle. So we use the ctx.scalemethod. This takes in two parameters. So the width and the height. So if we wanted to scale the drawing to be half its current size, or 50 percent, would use 0.5 on x and y. This makes our rectangle half the size it was before. Of course, one would be 100 percent it's original size. If we wanted to make it twice the size, we could change this to be two or 1.5, to be 150 percent and so on. Such a basic look at applying transformations. In the next video, we'll build upon what we've looked at in this video by looking at how to use both the transform method, onset transform. So we'll see you there. 18. Stepping It Up: Canvas transformations: In the last video, we looked at some transformation methods such as: translate, rotate, and how to scale our objects. In this video, we're going to move on and take a look at how we can apply all these transformations in a single method. In particular, we're going to be taking a look at the transform method and set transform. Let's create our new pen to do this in. This one is called transformations. We can leave the size of the Canvas just as it is. In fact, we'll leave the first rectangle, which is the purple one. We should get rid of the orange example, and we'll get to work with this triangle. I've commented out rotate, and want to do the same for translate. You'll see why these two are left in, in just a moment. This one restores our rectangle to be at the original coordinates in the top left. First we want to take a look at using the transform method, so ctx.transform. This can get quite complicated. I'm just going to add a comment above to show you all the parameters which we can use, so the six interval. The first one is horizontal scaling. The second one is horizontal skewing. The primitive number 3 is vertical skewing. Then number 4 is vertical scaling. Just two more to go, number 5 is to translate or move horizontally. The last one, which is number 6, is to translate vertically. There's quite a lot to take into account there. First of all, we're going to take a look at the parameters which we already know, which we used in the last video and these are scaling and translating. Let's add these Inside the transform method. First of all, let's look at scaling. The first parameter is horizontal scaling. I'm going to set this to be one, which is the equivalent of 100 percent. Just like the last video, 0.5 is 50 percent and so on. It is given for now, so let's set that to zero. Same with the vertical skewing. The fourth parameter is vertical scaling. I'll set that again to be one or 100 percent. Then number 5 and 6 is to translate on the x and y-axis. Let's just keep it simple and we'll translate it on the x-axis, 50 pixels and zero on the y, and save that. There's our rectangle returned. It's been returned the same size because we've set the scaling on the x and y to be 100 percent. I can make that a little bit bigger, just like so. Rather than the starting position to be in the top left hand corner of zero zero, we've moved across 50 pixels on the x-axis, and we've left it at zero on the y-axis, so it's still at the top. The only parameters which we haven't looked at is the horizontal and vertical skewing. Let's apply some of these values now. Start with horizontal skewing and let's see what effect this has. Let's begin with 0.2. Lets increases this. 0.5, and you get the idea so I can keep increasing this. We'll try one, and we can move even further, we don't stop at one, and so on. Let's change the vertical skewing now. Again, let's begin with 0.2. and we should get a skew in the vertical direction rather than horizontally. Let's take a look at 0.5. We can use this to make some interesting shapes. Let's try one. There we go. This is useful if we want to apply quite few transformations to the same shape. I'm going to change it it back to zero and return to our original rectangle. When using the translate methods, not only the transformations which we set within the parameters applied, but it also takes into account any transformations such as scale and translate, which have already been declared previously. This is what we call add into the transformation matrix. Using the transform method, we've moved the translate horizontally by 50 pixels. If we uncomment out the translates that we previously set. On the x-axis we've got the translate of 100 pixels, so we should get the 100 pixels, add it of the 50. If we just uncomment out the translates, which we do. That's moved over 150 pixels and we've also got the 100 pixels on the y-axis. Just bear in mind that anything which is being applied before this transform will also be taken into account. But what if we wanted our transformation to ignore any previous transforms or to effectively reset the transformation matrix. Then this is when we can take advantage of the set transform method. Set transform resets the current transform before applying any transforms which we set. To do this all we need to do is change transform to be set transform. You notice how the translate that we set at the top has now been ignored, leaving only the parameters which we set to be applied to the rectangle. That's how we can translate, scale, and skew by using the transform method. The main thing to remember is when using transform, it will always take into account any previous transforms. However, if we set that to be set transform, any previous transformations will be ignored, leaving only the ones in the brackets to be applied. Thanks for watching and I'll see you in the next video. We'll take a look at working with pixels. 19. Stepping It Up: Working with pixels: In this video, we're going to move on from transformations, I'm going to take a look at working with pixels. I've gone ahead and created a New Pen, within CodePen called working with pixels. We changed the height of the canvas back to 300 because that's all the space we need, and also removed any of the transformations from the last video. Digital photos or rust images are made up of pixels, and the colors are made up of a combination of red, green, and blue to create any color imaginable. Photos can often also have a falloff channel, which is called the Alpha channel and this represents the transparency value. For this video, we're going to be manipulating the values of these four channels to create effects such as making a color image to grayscale. For this video, we're going to be manipulating the values of these four channels to create different colors and effects. These effects can be used to do things such as making the image grayscale, or black and white, and these are similar techniques used in image editing software, such as Photoshop. First we're going to take a look at createImageData, we want to stall this inside a variable called imageData. Set that to be ctx.createImageData, and for this we're simply going to pass in a size of the image which you want to create. I'm going to make mine 400 pixels wide by 200 pixels high, and this creates a blank ImageData objects. New ImageData object takes in parameters such as a width, a height, and also the ImageData. Next we're going to create a JavaScript for loop, and this is so we can loop through all the values within the ImageData objects. The values that we're interested in is the pixel data, because we've created a area of 400 by 200 but a lower pixels to work with, and each pixel has four different colors, or for different channels which is the red, green, blue, and Alpha. When using CodePen it could be quite easy to crush the browser. I'm just going to comment out the loop, or we actually type out, so it don't cause any problems. So i is equal to 0; an i is less than imageData.data.length; i plus equals 4. Let's take a look what we've got, we've created a for loop, and a for loop will keep looping through all of the data for a certain amount of times. The data that we want to loop through, is the ImageData that we just created, and data.length is the array's length or the number of pixels, which is contained within a section of 400 by 200 pixels. Because each pixel has the four values or the four channels that we talked about, which was the red, green, blue, and Alpha. We'll then increment the loop by four each time, and then these four individual values could be manipulated inside of the loop one-by-one. Let's do that now, select the imageData.data and then within square brackets, we can select the individual pixel. We've created the variable of i, i plus 0 is going to be the first channel, and this is the red value and the value is between 0 and 255. Let's copy this three more times to create the four different channels. This one is going to be the green channel, that's i plus 1, and then i plus 2 is for the blue channel, and then i plus 3, and this is the Alpha or the transparency. 0 is fully transparent and 255 is a solid color. If this looks a little bit confusing till maturity just yet, we're going to take a look at all the data within the console and should all become clear. The new objects pixel values are transparent block by default, and this is a RGBA value of zero. I'm just going to change out to be a green color. I'll set the reds to be 0, and the green to be the maximum value of 255, the blue to be 0 and the transparency. To make it a solid color, we'll make that 255. Then finally to put the ImageData onto the canvas, use ctx.putImageData. The ImageData that we want to add is the variable of imageData, and the position is 0, 0. Now we can uncomment out the for loop to run this, so save that. There's our image which is 400 pixels by 200 pixels, with a loop through all the individual colors and change the default black color to be this green color, which we set here. To get a better understanding of what's going on there, I'm just going to do a console.log and the information we want to look is the imageData. We've got a console log, let's right-click and go to Inspects, and then if we select the Console tab, there's is our ImageData object that we've created. Then let's open this up, I click on the little arrow there. We've got the data and this is the data which will be in accessing within the loop. I've also got a width and height which we set to 400 by 200. If we then open up the data, we then find lots of data held in there, and this is all the pixel data that is contained within this area of 400 by 200, and they are all sectioned off into groups of 10,000. I've just open up a dropdown, there's pixel data 0-99. We've been looping over four pixels at a time, 0, 1, 2, 3, 4, this is the four color values for one pixel. Then number 4, 5, 6, and 7 is the second pixel. This is why we jump the loop by four each time so that we move to the second set of pixels, the first set pixels and so on. It's 0, 255, 0, 255 for each pixel, and this is the data which we set it would in the loop. We can quickly change this, and just check the values as being reflected. For example, we could change red to be 10, and let's save that and then refresh the page, open up the ImageData and then back into the first section. Again, there's our first pixel, it's 10, 255, 0, 255, and then we'll loop back through the second pixel, and so on. That's how we can manipulate the four pixel values of RGBA, let's just close up. That's how we can use createImageData. The last method I want to show you in this video is getImageData, and we can use the getImageData method to find out the pixel data for the area of the canvas. For example, if we just wanted to know the pixel data 400 pixels by 100 pixels square we can find this out. Let's add this to the very bottom, I will just comment this console log out first. Let's do ctx.getImageData and then we specify the start position that want to grab. If we want to grab an area in the top left-hand corner, we set the stop position of 0, 0. Let's set the area that we want to grab to be 100 by 100. We can log this to the console and then surround this section with brackets and then refresh. If we go into the developer tools now by clicking Inspect, and then go into the Console and check out the ImageData. We can see straight away that there's a lot less pixel data down the walls for the last console log when we looked at the full section. Because we're only checking out a small area in the top corner, we've got a lot less ImageData within the console, and of course we can still open up each one of these and see the individual data. That's how we can work with pixels on the canvas, and I'll see you in the next video. 20. Challenge intro: Converting images to greyscale: So now we've got a better understanding of how to work with pixels using the Canvas, and now I'd like to set a challenge for you to have a go at. That challenge is to take a color image and convert it to be grayscale, or black and white, I'd really like you to give this a go yourself before moving on to the solution in the next video. But before I leave you to go ahead and give this a go, there's just one or two little things I'd like to show you first, just to help you along. The first one is actually how to make an image grayscale. In the last video we used a for loop, and we grabbed all of the pixel data from the canvas. Once you found a image to place onto the canvas, using draw image I'll then like you to create a for loop in a similar way to this one, although we do only need the red, green, and blue channels. The way we can create a grayscale effect on image is to set the value of the red, green, and blue channel to be the average of all three. One way of doing that is create a variable and add the three values together, and then divide it by three, and set the three channels to be the equivalent of the average value. Another important thing I'd like to point out, which may cause some problems along the way is we need to use the get ImageData method for the challenge. When using this method, it requires that the image as well as the code executing it is on the same domain of the web server. Because we don't have access to the server, because we're using CodePen, we need to add a special attribute to the image called cross origin, and this allows us to use an image from a different source in our demo without throwing any errors. If you want to find out more about the cross-origin attribute, you can head over to this link on the screen now. Otherwise I'll just show you the one line of code which you'll need to add in when creating the image. The line of code that you do need to add, first of all I'm going to select a image variable. If your valuable for load an image is a different name, of course do change that. Then cross origin, and I'm going to set mine equal to anonymous. So if you add this line of code in just before adding the image source, you should be good to go. Also know if you working along with a text editor instead of using CodePen, you may also run into the same issue in certain browsers, such as Google Chrome when using the default settings. A workaround for this is to use a local host such as MMP to serve up your project. Or I've also found the Firefox browser works without any issues, so I leave that with you to have a go. If you do get stuck, don't worry, just move onto the next video and I'll show you my solution. 21. Challenge: Converting images to greyscale: Hi guys. I hope you managed to complete the challenge or I hope at least you gave it a goal. If you did run into any troubles, don't worry, I'm going to go ahead and show you a working solution. Let's go ahead and create a new pen. I'm going to call this the challenge: image greyscaling. I'm going to create a larger canvas than before, just because you're going to be adding an image onto there, which will probably be larger than 600 by 300. Then let's empty out the scripts. We'll start with a clean script tag. From the top I'm going to create our two variables. First of all is a canvas variable, which as usual is document.getElementById. Of course the ID is myCanvas, and next the context variable, which we view as ctx. Let's keep it consistent. The context is equivalent to canvas.getContext. Now I'm using the 2D context. The first thing I'm going to do is to create a image. This is going to be a color image which we can later work with the pixels and turn it to greyscale. Hopefully you got this far at least and you've managed to add an image to the screen. Variable image is equal to a new image. Once this image has loaded with image.onload, we are going to trigger a function. This function is going to first of all, draw the image to the screen,and then a second thing we want to do is trigger a second function, which I'm going to call greyscale. First of all let's draw the image to the canvas, with ctx.drawImage. We haven't created the image source yet but we'll just put the image variable inside there. We'll start the position at 0, 0, which is the top left-hand corner. Then the image.src, which is the file path. Let's go over to Wikipedia. I'll grab an image from there to use. This one is going to no good, it's black and white to start with. Let's find a suitable image. Let's try featured content. This one is fine. Then right-click and copy image address and paste this inside the image source. There's image appearing on the screen, that's all working fine. Then what I did next was to create a greyscale function. We'll create that in just a moment but first of all I'm going to call it within this function. You simply type greyscale and then the brackets. This will call the greyscale function once the image is loaded. Now let's create this greyscale function. What like this function to do, is first of all we'd like to grab the image data, which is basically the full size of the canvas. We want to grab the whole area. Then we want to run the for loop, in a similar way to the last video where we loop through all the pixel data. Just as mentioned in the intro, we're going to average out the red, green, and blue channels to give us a greyscale effect. The last thing I want the greyscale function to do, is put the modified pixel array or the black and white pixels back onto the canvas by taking advantage of the put image data method. Let's begin by creating a image data variable.This is equivalent to ctx.getImageData. We'll begin in the top left-hand corner of the canvas, and then we'll grab the whole of the canvas width, and also the canvas height. This is going to store the data for the image. I'm going to create one more variable, simply called data. I want to set this to be ImageData.data. We don't have to create this variable, the only reason I have did it is because we use ImageData.data quite a lot when using the for loop. It's just a little bit shorter by storing inside a data variable. Then we're ready to create our for loop. The for loop can be pretty the same as the one from the last video, where we looked at modifying pixels. We'll set the variable i to be 0 to start with, and we'll keep the loop going while i is less than data, which is this variable here,.length. This data variable is a just a short version of writing ImageData.data.length. Then i plus or equals 4. If you remember this is because each pixel has four channels. Before we start modifying the individual red, green, and blue channels, I'm going to create a variable called average. This is going to be the average value of the red, green, and blue channel. Let's set this equal to data and square brackets i. This is the first channel which is red, the add this to the green, and blue. Data i plus 1, and then data i plus 2. This is the red, green, and blue. Add all three values together and then divide it by 3 to get the average. Let's start with the red value. Data on the first one is i, if you remember from the last video we set this value to be between 0-255. But this time we're just going to set it to the average variable. Then let's do this two more times, for the green, and the blue. I plus 1 and i plus 2, and then moving down. Make sure this is outside of the loop now. We need to put this image data back onto the canvas, with ctx.putImageData. The data which we want to pull back onto the canvas is this image data variable. On the position, is the top left-hand corner, which is 0, 0, and then save that. You notice after doing that we still don't have any change to the canvas. If you remember before, we mentioned that we need to add a line of code, which was the cross-origin attributes. Let's add this just at the top now. Image.crossOrigin. I'm going to set this to anonymous and then save that. You can see instantly the effect has taken place. This line of code has allowed us to use an image from a different source without throwing any errors. Let's just expand this over so you can see. If we comment out the put image data, we should get the original color image back which we do. If you wanted to work with any different effects, rather than having all three channels set to average, you can change this to be anything between 0-255, and you can see the effect there. That's one way of completing this challenge and of course there's many different ways of doing this. But the main thing is to give it a goal and try and learn from any mistakes. With challenge all complete now, let's now move on to the next video and we'll take a better look at looping. 22. Stepping It Up: Looping: Hope you enjoyed the last challenge and welcome back. We're going to take a better look at looping. I'm going to show you how we can create an effect similar to this one by using for-loops, the translate method and also rotate. This is the end result which we are looking to achieve and it's basically a red arc or a red circle which is the background. Then we're going to create a segment, which is the black triangle section. We're going to draw this to the canvas, and then use a for-loop to loop all the way around and keep drawing the segments until we get back to the start. Each time we use rotate and translate to make sure that the new segment drawn is in the correct position. Let's head over to CodePen. Rather than using the challenge templates, I'm going to folk the work with Pixel Video, just so we got a template to work with. Let's call this Looping. Then you want to change the canvas to be 600 by 600 to begin with, and then let's clear everything except the two variables at the top and also the onload function. There we go. We're good to go now. What I'm going to start with is the red background circle by using the arc method. We're going to make mine to be red. We have ctx.fillStyle to be equal to red and create the arc and this is going to be a full circle. The starting coordinates won't mind to be in the middle of the canvas. I'm going to use canvas.width divided by 2 to the center point, and then canvas.height divide by 2 to begin our arc in the center of the canvas. The radius we want to make it 230. The start position zero, and to create the full circle, it's 2 times math.PI. Then let's autofill to draw this to the canvas. Just like that. That's not drawn, so there must be a typing error somewhere. Just there, which is the canvas height. Good. Now we've got the red background circle. Then we can get to work on drawing the black segments that we want to loop. Let's create a function to do this. I'm going to call my function draw segments, and then the code between the curly braces. Let's start with beginPath, and then we use ctx.moveTo. Want to move to the center of the canvas, so we use canvas width and height divided by 2 to give us the starting points. Now we'll set the fill style to be black. To draw the segments or to create segments, we're going to use a arc. This one to be in the center of the canvas. Let's add this in there. The radius we want to make it 230, which is the same as a background. Then we need to define the starting and the end point for each one of the sections. The starting point is going to be the 12 o'clock position. So that's 1.5 multiplied by Math.PI. That's pretty straightforward. The end angle takes little more of thinking about. We've got 12 different sections in the circle. We've got the six black sections and the six red sections. One full rotation of the arc is 2 times Math.PI. We can divide this two, which is a full circle to be divided by the 12 sections and this gives us a volume of 0.16666, and then we can add this value to the original 1.5. We'll go from the 12 o'clock position, and then we go around a little bit further to create the segments. So 0.16 plus 1.5 gives us the value of 1.6666 multiplied by Math.PI, and that should give us our segments. Then we need to fill the segments with the fill method to draw onto the canvas. Then let's call a function, just below. Draw our segments, and they should add the segments. There we go, says the first one we need to add. The starting point is this line here, which is 1.5 times Math.PI. When added to this value, 0.106, which is one-twelfth of the canvas radius, which is the end point just here. That's our first section drawn to the canvas. Rather than typing all this code over and over again, a simpler way to do this is to use a for-loop. Let's surround the whole of the function with a for-loop. Let's begin just with the function line, and then end it after draw segments. I'll just indent the section. That's the basic for-loop, and to avoid crushing the browser, we'll just leave the for-loop empty for now. But we can go ahead and add the translate and rotate, which you want to be performed on each loop. Underneath draw segments, and still within the loop we're going to add a translate method, ctx.translate. I'm going to translate to the center of the canvas for each rotation. If we don't use translate first, the rotation point is the canvas origin, which is the top left-hand corner. Be sure to add this canvas.width and canvas.height divided by 2. Then we actually want the segment to be rotated. I want this to be rotated by 60 degrees on each loop. Remember that using rotate is in radians, so to convert to degrees, we multiply the value by Math.PI divide by 180. Then lastly, we need to call translate again to reinstate the position back to the origin. We want to translate this by negative 300, and it translates the origin back to 00. So every time we call this translate, we don't have any problems. Now we can go ahead and create the rest of the for-loop. I'm just going to [inaudible] the for-loop or we add the conditions so we don't end up causing a crush within CodePen. First of all, let's create our variable of i equals zero, so this is the loop starting points. We've already got one segment drawn to the screen from the original function. Let's repeat this five more times by using i is less than six. Then to increment this one time on each loop, we use i plus plus. We can go ahead and [inaudible] this for-loop, and then we can run. There we have it. So that works exactly how we want to. Just as a quick recap, we created a red background circle using the arc method. We then called a function called draw segments, and then this function drew a black section onto the canvas. We then surrounded the function with a for-loop to repeat the black section five more times, and on each rotation we rotate the segment by 60 degrees, and also on each rotation, we translated the canvas origin back into the center rather than the default position in the top left. Then after each rotation we translate it back so we didn't get any problems. That's another little look at looping with the canvas. Come back in the next video, where we'll take what we've just drawn and add some animation effects. 23. Stepping It Up: Animating: Welcome back guys. In the last video, we created this block and red pattern, which you can see on the right-hand side. We achieved this by creating a red background, and then we used a for loop to draw the block segments and then we looped round and repeated it six times. In this video, we're going to move on one step further and take a look at animating. In particular, we're going to take a look at the set interval method, which is going to rotate open, and the final results would look something like this. It's not really that hard to create this effect when using set interval. Let's begin by creating its own pen. For the last video, and I'm going to call this animating, just like that. We can reuse all the code from the last video. What basically we're going to do is wrap all existing code within a function and then pass this function into the set interval method at a specified time delay. To begin, we need to wrap the existing code within a function. Just below our contacts variable, create a function, and this you going to call rotate. Then we need to add the curly braces, so add the opening curly brace. Then right down at the bottom, we can add the closing brace, just here. I'm back up to the top. We just need to add one or two lines within this function just to make it work properly. The first thing we need to do is create the reference points in the center of the Canvas. Let's use ctx.translate. All we want to do is translate to the center of the canvas, just like we've done many times before. Let's add these inside the brackets. Now we've got the reference point in the center of the canvas. Then next we want to create a rotate method. We're going to rotate by one degree each time a set interval method is called. Let's just add Math.Pi divided by 180, and this is the equivalent of one degree. Then just like we did in the last video where we translated, rotated, and then translated back to origin, we need to add a second translate to translate back to origin on each rotation. We can do the same as the first one, but instead, we can use negative just so we are back to origin. This translates at the top, can then move to the correct position. I'm just going to indent this code just like that. Then to get this to actually work, also actually cause the rotation just above the last curly brace, which is for the rotate function. We need to add set interval, and then it takes in two parameters. The first one is the rotate function, which will be created. You can see that goes really faster. The second parameter is the specified time delay in milliseconds. Let's just change that to 30, and we can slow it down just a little bit. Of course this can be changed to you and if you want you prefer. Change to 300 makes it really slow, so let's just change about there. It's actually quite simple to create animation using set interval. Just to recap, we use the drawing from the last video and surround it inside a rotate function. We added one, two lines of code. We began with the translate method, which made sure that the reference point was in the center of the Canvas. We then rotate by one degree, each time set interval is called, and then we made sure that we translated back to the origin so it didn't cause any problems every time we move to the center. Then we passed in the rotate function to set interval and then stop it going from real fast. We added 30 millisecond delay just to slow things down, just like that. That's how we can use set interval to create a animation. We'll now move on to the final project, or have a little bit fun by drawing a mickey mouse face. I'll see you there. 24. Final project: Introduction: So a big congratulations from me for reaching the end of this course. So as a little bit of a fun exercise, I'll like to challenge you to draw a Mickey Mouse's face. Now it doesn't need to be perfect, the whole idea is just to give you something to practice with, which involves some of the techniques which we looked at throughout this course and it also gives you a chance to think about things yourself rather than typing along with me. So this is what I come up with and this is what I'd like you to create. So I would recommend finding a simple Mickey Mouse picture, just to copy from. So one little tip which you may find useful is before actually drawing the curves for a lot of the face, you may find it a lot easy by creating some small arcs as reference points. For example, the start and the ending point of a curve, and this is what I do when creating this example and having these reference points to hand really does make it a lot easier when drawing the curves. So go ahead and spend a little time trying to replicate this, and don't worry if you do struggle with any of these paths. Because in the next video, I'll show you the solution to how I created this. So good luck. 25. Final project: Draw Mickey Mouse!: Welcome back everybody. I hope you had some success with this challenge and do share what you've created, and I'd love to see them. Now I'm going to take you through exactly what I did to create this, just in case you're having any trouble along the way. The first thing I done was to create a function called addReferencePoints, and this function contained all the reference points which you can see on the right-hand side. I create these reference points to make life a bit easier when creating the arcs and also the curves, and out of these, the function one by one, just as we would draw on the curves further down in the code. Down the bottom outside of the function, this is the call to the function to actually draw all the reference points on the screen, and the reason why all the reference points are contained in the function is so we can simply comment all the call to the function when we want to remove them, just like that. I began by creating a line width of three pixels, and then a path, and then got to work on the top of the head outline. We used the arc method to draw the outer side of the head at the starting and end points, which we've added inside of here. Then the next thing I done, was create the left ear. Just comment this section out. Created a arc once more using 2 times Math.PI to create a full circle. I then moved on to repeat for the ear on the right-hand side. As you go through this project, you'll notice that a lot of the coordinates are symmetrical. We've got a line down the center which is 300 pixels so a lot of the coordinates are equal on the left-hand side, as you have to the right hand side, so it's just a case of working out one side, and then it's a lot easier to create the same on the other. Then we started moving inside of the face. We've got the interface, which is the top-left arc and the top right arc. You can see I've made a comment that the coordinates that we're referring to is points 1, 2, and 3 which is available inside the function up at the top. We've created these points first and then added them inside of the bezierCurveTo method. Next step I create the reference points for the left cheek and also for the right cheek. I mentioned before about the symmetrical line, which is 300 pixels across on the x-axis. We can then use this line to make sure that each side of the face is even. The left cheek is 40 pixels less than 300, the right cheek is 40 pixels higher, and this creates a symmetrical effect. Then next I move down to the chin. To create this effect, we move the pen to the specified location, and this time use a quadraticCurveTo method rather than a bezierCurve, simply because one control point was plenty for the section, and that's common to all the next section. This part is the curve which sits above the nose, and the eyes rest on top. Again, because this is a simple line, we used a quadraticCurve, and now we have this curve. We now have a position to work at the eyes, so the left, on the right eye, we just added those next, and these are the outlines. I used a ellipse method, which we've not looked at yet in this course, but it makes it a lot easier than trying to use a certain type of curve to create this. I have added in the parameters just above, if you want to take a look at those. We have an x and y center, just like when using a arc. We've got the x and y radius, so the radius is the major axis, and the y radius is the minor axis. We can also add a rotation to the ellipse, this is in radians. We then are the start and endAngle, and they've got a optional parameter at the end, if we want it to be drawn in clockwise or anticlockwise. That's the outlines of the eyes. We then use the same ellipse method to draw the nose, and then move back to the quadratic curveTo, to the arc for the mouth. There's two different arcs that we're going to create. One is the top top part of the mouth and then we've got the bottom part of the mouth. To add some detail onto the tongue, we create two more quadraticCurveTos to give the tongue effect inside of the mouth. Then the next thing I done was create a curve just to the end of each section of the mouth, just like that. All of these items have the stroke effect, so we add the stroke, just at the bottom of all these. Then we need to begin a new path, and the reason we need to do that is because all of the elements from here have a fill rather than a stroke. First of all, we've got the left eye, and again we use the ellipse method, but this time we added a little bit of an angle just to create the effect that we're looking for. We then repeated on the right-hand side for the right eye, and then drew these all to the Canvas with the film method at the very end. Then lastly, we added some text to the very end just with the words of Mickey Mouse, and we added some basic alignments and also some fonts and color fills. That's how I create my Mickey Mouse face and remember number there's no right or wrong way of doing this. Everyone takes different approaches, but the main thing is you manage to draw something which resembles Mickey Mouse. That's it for the end of this project. Please do share what you've created. Thanks for watching and bye for now. 26. Thank you: Thank you for joining me on this course. I hope you've enjoyed it and hope you've learned a lot from it. We've covered so much ground including how to set up the Canvas. We then looked at basic scripting on how to draw shapes such as rectangles. We covered how to understand the Canvas coordinates. We also looked at lines and paths and how important it was to march up to pixels, to create crisp line edges. We looked at various other techniques such as corners and meters, arcs, and circles. How to add text to the Canvas and also gradients. We finished off the Canvas basic section by adding images to the Canvas and also pans and shadows. We then stepped up a little by moving on to the next section, where we started looking at various different types of curves, such as Bezier and quadratic curves. We also covered the save and install methods and how to use them properly. Along with various transformations such as scaling, rotating, and translating. You should now understand how to work with pixels and how to access the pixel data of an image, and then use that pixel data to manipulate the image to create effect such as converting an image to be grayscale. We also looked at how Looping can make repetitive jobs a lot simpler and also how to animate our drawings to really bring them to life. Then hopefully, at the end of the course, you are able to have some success, we draw on Mickey Mouse's face, to put into practice all you've learned from the course. So for me, bye for now, and hopefully, I'll see you again in the future course. 27. Follow me on Skillshare!: A huge congratulations from me for reaching the end of this class. I hope you really enjoyed it and gained some knowledge from it. If you've enjoyed this class, make sure you check out the rest of my classes here on Skillshare. Also, follow me for any updates and also to be informed of any new classes as they become available. So thank you once again. Good luck. Hopefully, I'll see you again in a future class.