What is the use of Canvas in HTML?

Hello guys,

You are welcome to our HTML series.

In the last segment, we learned about gradients and their two types, linear gradient and radial gradient.

We use gradients when we have to go from one colour to another with some smooth transition.

I hope you performed the practical of the last session yourself, if your practicals run successfully it's really well and good.

If you are having any difficulty in performing the practicals you can let us know at forum.learnvern.com.

We will try to rectify your issues and revert as soon as possible.

Let's move further in today's session

Today's segment is based on HTML canvas

As you know, we are moving further in graphics and learning about different types of HTML graphics.

Till the last session, we have finished SVG graphics of HTML.

In today's session, we will learn about the canvas.

So firstly let's see what canvas is.

As we can create graphics, design any shape and add different types of graphics on our web page the same way we add graphics in canvas also.

But the difference between SVG and canvas is, as we saw in the introduction of SVG, it works pixel by pixel and it draws the image or shape through the raster scan method so it is pixel-based

While in Canvas the work is done on bitmap surface, which means when we want to draw anything it doesn't move forward pixel by pixel but through bitmap surface.

So, in SVG we used to code in HTML we didn't use any scripting language while in canvas we define a canvas tag in the HTML portion but we can use any one scripting language like JavaScript when we want to draw something.

So, with the help of scripting languages like JavaScript, we draw the shape or graphics.

So the major difference here is, when we work with SVG we have different tags available to add any graphic while when we have to add something in canvas it's important to have the knowledge of JavaScript because we add the graphics with the help of JavaScript.

The case here is as written in the last paragraph, that the canvas provides us with a container to add graphics, container means a portion on the web page to add the graphics in that.

So, canvas gives us the container in which we add the graphics but to add graphics and shape them up we need the help of JavaScript.

We can dynamically render the graphics using canvas, which means to move them from one place to the other, to give transition all this we can do with javascript. Also we can add graphics like 2d and 3d through the canvas.

So currently, in this HTML session, we will learn how we will add 2d graphics.

So the first thing in the canvas is how to create a canvas.

As given in the example, to add canvas we need the help of a canvas tag

In the canvas tag, we have to give Id, height, width and style is not mandatory.

If you give the style, it identifies that this particular portion is the portion of the canvas.

Let's perform it practically.

.

We will open sublime text

HTML

(10-sec gap)

Okay

So, this is our program

In this HTML program, we will add the canvas, so to add Canvas the first tag was "canvas".

Inside canvas we will add width, let's say 300, height let's say 100 and we added the border, so we will add border through inline CSS.

Let's say the border was 2 px solid.

Okay, so this is our canvas.

If there's something important in the canvas it is the id, Id is so important because in canvas we are not going to draw anything through HTML, whatever we will draw we will draw it by scripting means through JavaScript only.

So, we use ID when we have to fetch an HTML portion in JavaScript or pass a reference.

When we took the segment of Class and ID in the HTML, we explained that there is only one Id in one web page, and if you're using a class there can be multiple classes.

But there is only one Id because we have to uniquely identify that portion on the web page.

So, we need to uniquely identify because we have to get that portion in JavaScript.

So if the id I give here is unique, when we pass the reference of that portion in the JavaScript then the reference of one portion is passed and whatever changes we make through JavaScript are made here.

But if we pass two IDs, the changes are made only in the first one, can't be made in the second and the web page throws an error also.

So, it's really important to give only 1 Id in the whole web page when we are working with IDs which means one unique Id to one element, and any other Id for the second element.

Here, we will give the id to the canvas, let's say "My Canvas".

Save it.

In case your browser doesn't support canvas, for that "your browser doesn't support canvas tag".

Save

Now we will run this program.

When we run this program, this is canvas.html and we get a canvas created and we also passed a border of 2 pixels to this canvas that is why the canvas is shown with border in the output.

Although we have generated the canvas but we haven't added any graphics yet, for that let's move further in the session of canvas and add graphics.

So, we have generated the canvas. Now we have to draw a rectangle on this canvas.

The first was to create a canvas, which means we created a canvas through HTML, now we will add a few graphics through JavaScript in the canvas tag.

Let's say I have to add a rectangle, I will add a script for it.

Okay

So, we will add the script in the head tag, if you want you can add the same script below the body or in the body.

Currently, I am adding inside the head.

Let's say we have to pass the reference of the canvas we created here in the JavaScript.

Then we will first take a variable here, Variable is an entity in JavaScript that will hold the value.

So, here we will take a variable and name it "C".

If we have to get the canvas in the variable

The output that is generated here and the complete portion of our body tag is called "document" in JavaScript.

So, we have generated canvas in the document.

When we have to get an Id through the document, we write "document dot get element by id" in JavaScript.

This indicates that we are getting a specific portion through an id, so we have to pass the unique Id here in the parentheses.

Let's say the id is "my canvas", I will pass "my canvas" here and a semicolon to end the line.

So, the complete line "document dot get element by id", will pass the reference of the ID portion inside the variable.

So currently, my variable will hold the reference of my canvas.

Okay, so that was the first line.

Now, we have the place where we have to add the graphics to the screen, so now we will see in which way we will add the graphics.

Let's say I have to add 2d graphics that is why I am taking one more variable named "CTX", CTX stands for context.

So context means, in which context we have to add graphics, we will pass 2d if the graphic is 2d, if it's 3d we will pass "web gl" and if it's any newly introduced technique we will pass its reference.

So, currently, 2d for 2d, web gl for 3d.

Currently, we will not move further in 3D we will only learn to add 2d graphics in HTML for that we have created the second variable.

The first variable we created holds the reference of the canvas, through that only, we will add 2d graphics using the same reference.

So C dot get context, and here it will be 2d.

This means, first we took the reference of the portion from the document, passed it in "C", and to C we are defining that the graphics we will add are 2d.

So, C dot get context 2d which is inside CTX.

We have got the CTX means context variable, now we will move ahead in adding graphics.

So, CTX dot

We have to give colour to our graphics, so it should be like: ....

Let's say I need to pass any colour,

I am randomly passing a colour here and...

That is my colour.

Fill style indicates the colour we want to fill in the shape.

And if I want to generate a rectangle, I will write a command "fill Rect" RECT.

CTX dot fill Rect means the rectangle will be generated through this.

When we were learning SVG, we generated the SVG moving point to point ahead, like (0,0), (0,1), (0,2) and then (200,100).

Like this, we moved point to point ahead.

Same way, we have to give points for a rectangle, which one is the starting point and the end point.

The rectangle will generate between those two points.

Here I am passing the points, 0 comma 0 comma 200 comma 100 and save the program.

..

When I am reloading, the rectangle is not generated which means there is something incorrect in the program.

The incorrect thing here is that we have written the scripting language first, which means we have added the script in the head.

After that, we are generating the canvas.

So the code to generate the rectangle is running first, instead of generating the canvas.

So, to correct this I will remove the script from here, place it below the canvas.

Now I have saved it, and I am loading it,

The moment I reloaded, the rectangle was generated which means it's now working fine.

It is working the moment we made the canvas first and after that, we wrote its script.

The program will not run properly and errors will be shown on the console if we write the script before the canvas.

With this, we got to learn when we add the canvas

First, we have to add canvas and after that, we have to add its script.

So here, the rectangle is generated, the height of Canvas is 100 I will make it 200.

So this is the canvas, and this is the generated rectangle.

So that was the rectangle, now we will move further in this

The second is "Line on canvas", how we can add a line on canvas.

So, the program will be the same, the same script and canvas have to be added.

Let's say I add one more canvas here, and give it the name "my canvas 2".

I will generate the same script like this one

I will pass its canvas here, "my canvas 2".

Only two lines will be changed, rest of the portion like:

Document dot get element by Id, get context by 2d will remain same.

Change is only for drawing the line.

We used the command "fillRect" to generate the rectangle, Instead of that the method will be "move to and line to" as we saw in the SVG also.

When we had to draw lines or paths, first we used to move to a particular point after that we used to draw the line from there.

Same way in JavaScript, we will Firstly use "Move to" and after that we will use "line to" from there.

So for that, I am temporarily commenting on these two lines and here I will generate a CTX dot, the first among all was "move to", move to means on which line I want to move in the canvas.

So let's say, I take a basic point (0,0) and from there I will generate a line, let's say "Line to" to the point (200,100).

This means, first I moved to this point (0,0) on the canvas, from there I will draw a line at (200,100), so let us see if the line is generating or not.

So, here another canvas is generated because I have taken two canvas in the program canvas 1 and canvas 2.

So, the second canvas is generated but the line is not visible because we have only defined the points like move to means on which point we have to go and where to generate the line.

The method to generate the line and show it up is CTX dot stroke.

Save and run

The moment we run the program, we get a line from the point (0,0) to (200,100), which means when we need to draw a line we will use the Move to, Line to and stroke method between them.

Now, let's say we want to show output in both programs. I will take one more "C2" here.

..

The same line, right now its canvas now we will give the second canvas the name "C2".

...

CTX 2

2

2

C is here, CTX 2 is here...

Here it will be 2.

And we will uncomment this line.

....

So, two canvases are generated, and both the examples rectangle and line are shown.

Next, we move further,

It is the circle after the line, how we can add a circle in the canvas.

There are two methods for circle also.

The first is "begin the path", which means from where we want to start drawing the circle and then the arc means how we want to generate the arc on the canvas.

Then, we need to use a stroke to show up.

So let's start with generating the circle,

I will take one more canvas here, and I will take its Id as 3.

Same line,

Document dot get element by Id, my canvas 3 and it's I will make its variable name as C3, here we will make it CTX 3.

C3 get context 2d.

We will generate the circle with the help of CTX 3.

So firstly, we have to mention the place we want to start the path, so "begin path" is our method to start the drawing.

Then CTX 3 dot arc, an arc for drawing circles or any arc we want to add, let's say the point is 95 comma 50 comma 40 comma 0 comma 2....

So here into (*) math dot PI..

Let me explain this to you, we have to see it in this way

First these three variables and then these two variables, so here the first two is the centre just like in SVG XY was the centre the two values we passed here are the centre values that are XY.

Let's say, I passed 300, 200 as the width of the canvas and in that canvas, I passed the centre of the circle as 95, 50, 95 on X and 50 on Y.

So, 95 stands for X and 50 stands for Y.

Let's say, if we want to show this in a comment, so X equals 95, Y equals 50.

After that, it's the radius in the Circle so R equals 40.

R is the radius, the radius of the circle we need.

After that, it's the start point and the endpoint means start and end.

So if we start from 0, and stop

As you know it's a circle and its formula is 2 Pi, so that's why we have taken 2 into(*) math dot PI so that the circle can be generated properly.

We will start from 0 and stop until 2 pi ends, so we took 2 into (*) math dot pi.

....

Okay,

I will comment this so that we remember this, that we have taken the centre of the circle XY as 90 & 50, radius 40, the start point is 0, that we have to generate the path starting from 0 to 2 into math dot pi, means until 2 pi is generated.

So that was the circle,

Now, lastly, we have to give stroke to the circle so that I can be visible, CTX dot stroke.

We will save it and run

Upon running, we get the canvas and the circle on the defined position.

So this is the circle and how we can add the circle in the webpage through the canvas.

Next, moving further in the slide it's the text after the circle, how we can add a text in the canvas.

So, we have to keep the same until "get context"

We will generate the same canvas again, my canvas 4, pass its ID in C4.

Pass context in variable CTX 4.

Now, we have to add text in our canvas through CTX 4, for that, we will first define its font or font size and how our fonts should be.

Let's say, it's CTX 4 dot font.

So, font equals

If I want bigger fonts let's say I take 30 PX and font Arial.

Arial is the font family that defines how our font should look, different font families are available like Times New Roman, Roboto etc.

So, currently, I will use Arial.

Now I have to add a text that must be filled in.

So let's say CTX dot fill text, let's say my text is "Learnvern", so from where do we have to enter this?

I will have to define the points from where I want to show the text, let's say I take (10,50) here.

Now, I will save it ..and run

We cannot see the text, which means something is missing,

So the missing thing is that I took CTX whereas it should be CTX 4 at this place.

Here the reference of three is passed,

Okay, here it will be 4, get context.

Okay run,

Here, the moment I run the text is shown in the canvas

That is shown from points 10,50, which means 10 and then here 50.

So, from this point, the text has started showing and the text is "learnvern".

Let's say I update it to " this is learnvern".

Okay

So the text is updated, which means this is how we can add text through the canvas.

Next, move further in the slide.

First is the fill text, in this get the text in dark black colour and it's filled.

If I don't want the text to be filled and keep it empty so that I get two bordered texts.

In that case, here it's stroke text.

Through stroke text, only strokes will be shown; there will be no colour filled in the text.

So let's say I use stroke text in the same canvas and I will take 100 here in the stroke text.

Run

So here in the canvas, the first text is filled and the second text in which the colour is didn't get filled it's kind of empty and here we only get the borders of the text.

So this is our stroke text.

So here, we learned to add two types of texts: first in which the colour is filled and second in which the colour isn't filled we only get borders or strokes.

So these were two types of strokes we added fill and stroke

So that was our session for canvas

Today we learned a total of four things in canvas:

How we add canvas and JavaScript along with it, we learned a few commands of JavaScript and saw some methods through which we can add shapes in canvas.

So that was the canvas,

We first learned to generate a rectangle through fill Rect we had to generate a line by using the move to,

the line to and stroke to show up the line,

Then we learned how to start a circle and saw all its points like XY, R, start point and end point and begin path is important to see where to start our path.

The stroke method in it is also important because we have to show the circle and make it visible.

After that, we added two texts with the help of fill text and stroke text.

So that was the session for canvas, I hope you will perform all four practicals yourself that we learned today so that it can get more clear.

The next segment after canvas will be based on URL encode, so URL encode and the difference between

 HTML & XHTML .

So, when we submit the form and the form passes from the HTML, we will see how it goes and along with that, we will see what is HTML and XHTML in the upcoming two sections.

In today's session, we learned to add basic canvas and basic shapes.

So guys I request you all to yourself try all that we learned today and perform these practicals.

If you have any queries or comments, click the discussion button below the video and post there. This way, you will be able to connect to fellow learners and discuss the course. Also, Our Team will try to solve your query.

We will meet in the next segment, URL encode

Thank you.