× Please, log in to give us a feedback. Click here to login

You must be logged to download. Click here to login


MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation


MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

Canvas - Course HTML 5 - an introduction of the new web language - Part 14 | web Developer courses

In this video, we will learn about the canvas. The canvas is a drawing region with width and height attributes.


Duration: 16 minutes

In this video, we will learn about the canvas. The canvas is a drawing region with width and height attributes. We use scripting (like JavaScript) to draw graphics on the canvas. We will start by creating a canvas element on a page with width and height. We will then add some style to show the canvas bounds. To do the drawings we need to create a script element. Since we are using jQuery in this case, we will add a reference using Google’s CDN (Content Delivery Network – which is the hosted version of jQuery on Google instead of having it on your machine). When the DOM is ready, we will get the canvas element (using getElementById function), get the canvas context, and start the drawings. We will start with drawing lines in these examples and move to the advanced drawings in the next couple of videos.

Technology Used:
HTML 5 and Visual Studio 2010

Keyword: HTML 5, Visual Studio 2010, canvas, width, height, document, getElementById, getContext, beginPath, moveTo, lineTo, fill, stroke, lineWidth, closePath, fillStyle.


Welcome back everybody. This is Ayad Boudiab. I am a senior.net application developer, and we are continuing our series of HTML 5. We've discussed many of the elements before and today we'll dive into the canvas. When we talk about canvas we're just talking about some growing area. All right? So we define a certain growing area on the screen and then using some type of scripting language, for example JavaScript we'll be doing some drawings on that canvas.

We have control of this pixel-by-pixel type of drawing and it has a lot of features as you will see in this video and the upcoming few videos. You will see how powerful it is to do a lot of those drawings and also how we can get to animation level and you do all that using animation. If you'll recall some of the videos we discussed before. For example we talked about Silverlight that help us do some gradients on the screen. Right now we can do that using HTML 5 and specifically when we're working with a canvas. So what we'll do is we create a page that contains the canvas and then we'll see how we can get to the context and we'll start doing our work. That's pretty much what it comes down to. So let's go ahead and create a page and then we'll set the page with the canvas and we'll see how we can proceed.

I'm going to right-click on the HTML 5 and then say, examples and say add your page. I'm going to add an HTML page and say this is a canvas examples. Click add and that should really give us a simple HTML page, but of course I want to change this, I don't want the dark type the way it is and the xml.ns like I've seen before, so I can just take the copy from the video and try to drop that here and make some modifications. So this is the dark type. This is the HTML . They had the chart set as correct, now experimenting with the canvas. I don't need any of this and I don't need the audio. In the header section I will say something like here are some canvas examples, so that way that shows up on the header and then in here I should be able to create my canvas. OK? So we do this using the canvas tag and a canvas, as others, have an ID, so let's call it for example, my canvas, and then the canvas has a width and a height, so let's go with a width of 400 and let's go with a height of 400 as well.

This is the canvas and down here in case the browser does not support canvas let's put some type of text to the user to let them know that this specific browser that they're using does not support canvas, so let's put a paragraph tag here and we say this browser does not support the canvas element. OK? So let's preview that to see what we have so far and it says here are some canvas examples and of course we didn't do anything yet, but at least it doesn't say that the browser does not support it, and here I'm using Chrome and Chrome does support the canvas.That's for the body right? I have a header and I have a canvas. Now I'd like to add some styles on the top to basically show the canvas right? Because when we tried to preview that in the browser and let me do that one more time, we didn't see any bounds in here, I mean, where is the canvas, right? We said it's a canvas 400 by 400, but where is it? I don't see it. So let's go ahead and add some style in here at least to see the bounds for that specific canvas. So let's add the style tag and within the style tag I can reference the canvas and add some CSS so we'll be able to view that canvas.

Here I'm going to give it a box shadow and that box shadow is inset and it's 000, and it's 10 pixels and it's black. So now we should be able to see the canvas looks like this, so at least I know where my canvas is right? I will need to be doing my drawings in here, within the specific canvas. Now, I'll be using of course some JavaScript right? So I'll be using JavaScript to do a drawing on the canvas and also specifically I'll be using jQuery, so when the DOM is ready, I'll be able to work with the canvas. I need to reference jQuery right, so that would come in a script there. Underneath the style I need to put a script tag in here, but one thing that I'd like to do, before when we were working with jQuery we used to add jQuery in here in a folder, whichever jQuery version we have, and then reference that over here right? But right now I'm going to do something different and basically reference jQuery as it is hosted by say, Google. Because Google hosts for example, jQuery, and I'll be able to reference that and use it within my page. I can specify which version that I want, so I can use that instead of actually copying jQuery down to my project and then referencing it. That's just another version of doing so. So let's go ahead and I'm going to copy that and show it you on the screen. Here it is. So I'm referencing in here, type is JavaScript, you'd seen that right? The script type is JavaScript, but the source, instead of referencing something in here in the project.

I'm going to go to https://ajax.googleapis.com and then referencing jQuery, this version 1.7.2 of jQuery, so this is hosted by Google and I'm referencing that. You can find these URLs on the Internet, I believe there is for example some references by Yahoo, you can use that instead, but at least right now I'm just referencing this version of jQuery, because I want to use jQuery within my page. OK? So here's the script for the jQuery. Now I need to start doing my work right? So let's go ahead and specify again, the type is JavaScript like you see up here and here goes my code right? This is where I'll be writing all my code that has to do with the canvas that we are talking about. So when we work with jQuery you use the dollar sign and then here we say function, and for that specific function when the DOM is ready I want to do something right? So I'm going to close it over here and then close the parentheses and then close the semicolon. So this is the function that says when the DOM is ready, when I'm loading the page and the DOM is ready, what do you want me to do? OK? Well, the first thing that I like to do is get a hold of this canvas. This canvas is defined by its ID, my canvas. I should be able to get to that, get its context and start doing the drawings and everything that I /want. OK? So if I scroll up here then and I go inside when the DOM is ready function, I need to get a hold of my canvas and then do the rest of the work. Now, how can I get a hold of my canvas?

I can use var c=document.GetElementByID and I give it the ID of the canvas that I'm working with and in this case it's named my canvas right? So this will give me the actual canvas element that you see down there in the body. Now for this canvas I need to get its context. From that I'll be able to do some drawing. OK? So check F, the canvas.GetContext. If I'm able to get the context for this canvas, because without the context I cannot do anything, so I get the context, do my work, so the check in here says, if I'm able to get the context then do whatever you want to do. So here's my if statement. It says, if I'm able to get the context what do you want to do? Well let's get the context and actually do some drawing. So var context=c.GetContext and in this case the parameter that's available at this time with HTML 5 and that's the only one that's available is the 2D drawing, so I'm saying 2D drawing.

There could be some 3D in the future, but at least for now that's the only parameter that is supported, which is the 2D drawing for the context. Again, let's go over it one more time quickly. Be able to retrieve the canvas which is defined by its ID, retrieve that canvas, see if you can get the context. If you're able to get that context, the 2D context and now let's start doing some work. Now what do you want to do? I want to move to a certain line. I believe we've done a little bit of this in other videos of HTML 5. I just need to give you a quick refresh and then be able to proceed with the rest of the work. So what should I do first? Let's do some line drawing right? So the way this works is you begin your path, you're doing some drawing and then you stroke, which is basically you fill the outline of the shape right? Say for example you do fill means you fill the inside of the shape, so stroke is the outside of the shape, the outline of the shape and then fill actually fills the inside of the shape.

So begin a path, draw, stroke, let's do that. Context.BeginPath, now context. I'm going to moveto, so let's go ahead and move to a certain line. Let's say for example, move to 200,0 all right? That's taking me to that specific line and then context.lineto, I'm going to go to a certain line right? Draw a line to a specific point. That will line 200,200 and then I will need to specify, for example, before I do my drawing I can do the actual line width and then I do the stroke, which does the drawing, so let's go ahead and do that, context.linewidth. I'm going to specify the line width in here to be equal to say, 5, and then I'm going to stroke or actually draw this shape, so context.stroke. So get the context, begin the path, move to a specific point, line to another point, get the line width and then stroke. I loaded here Paint and I need to show you a couple of things. OK? Let's say for example I need to draw something in the canvas, how does that work? Here's one of the lines and here is the other part of the canvas right?

Over here, up in the corner, this is the 0,0 point OK? This is where X is zero, Y is zero. X is the horizontal line that you see here, so X grows positively this way. So zero, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, OK? And then Y increases positively down this way, so it's a little bit different from they used to do that in math OK? So if I say for example, I need the point 10,10 it would be somewhere over here for example. It's 10 on the X, 10 on the Y gives you the point and that's what I need to do when I'm working with the canvas in this case. So this one we did here we said move to 200,0, line to 200,200, the line width is 5 and then stroke. Now let's do that in the browser. Here it is right? So what we did is we said move to 200,0. Remember, the width of this canvas is 400, so 200 is right in the middle, 200,0. 200 on the X, 0 on the Y drew a line to 200,200. So if the line was to be 5 and then stroke and then it draws the line. So that's all it did right? It begins the path and that's how we normally do, we begin the path and then we move to a specific point and then line to another point and then proceed with the rest OK? So this is basically how we work with a canvas. Again, canvas is a drawing area and we specified that by the width and the height. We gave it some CSS so we'll be able to see where it is. Of course you know you don't have to specify the shadow and everything, but we just did some CSS in here so we can know where the canvas is and we start doing all the drawings within that canvas OK? Now, there's a lot more to come on those canvas work, so please stay tuned. I'm going to proceed with this on the upcoming videos. Thank you very much for listening. I'm Ayad Boudiab, and you take care.

Senior Software Engineer with experience in C#, JavaScript, jQuery, Knockout JS, Kendo UI, HTML5, and SQL Server. Ayad has more than 20 years experience in technical training and teaching. Contributor to MrBool for about 7 years.

What did you think of this post?
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 2,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 1,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,33
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!

> More info about MrBool Credits
You must be logged to download.

Click here to login