Duration: 16 minutes
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.
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.
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.