In this session, we will see few miscellaneous topics. We will get an overview of Canvas JavaScript API for html5, we will understand what is what are blocking inline elements? And what is the meaning of content editable. That is, first start with Canvas. To work with Canvas, you must have a basic knowledge of JavaScript. And to understand the JavaScript API for HTML, again, you need to have a knowledge of JavaScript.

So once you have completed JavaScript, I am covering the web storage API for HTML in JavaScript. And also, I will give an example of how to use Canvas in JavaScript code. Now, here, what is the purpose of Canvas? And what is the use of this JavaScript API? Let me explain. Canvas.

Canvas is a container which helps to draw from Graphics using JavaScript. You know that in a browser, you can create a nice web page. And you can invert the media elements, you can create forms, you can add different kinds of form elements. All these are possible. What if you want to draw something in the browser for that you need to go in for this canvas. Canvas is a drivable region with height and width.

If you want to create some games that are playable in the browser, you need to go in for Canvas. You can create different kinds of shapes with the handbook and let's see, have a look over here past boxes, circles, characters and adding images. All these are possible in the drawable region of your browser. So how to do that. Have a look over here you have to go in for the canvas stat. Now I have given an ID I have attached from CSS part you will understand this once you have completed CSS Then I am using a script tags with the help of fish and retrieving the canvas details.

Then I am specifying what exactly I want to do whether I want to draw a rectangle or circle, or I want to create a line. There are multiple methods available in JavaScript, which you can use for working on the drawable. Area working on the canvas. JavaScript API for html5. API is Application Programming Interface. With html5, you can create an interactive web page.

Of course, there are few validations, which are supported. So you of course, you can create an interactive web page. What if you want to perform still more? In that scenario, you can use the JavaScript API. There are few APS available, like drag and drop for dragging and dropping few components of your HTML page. assume you are having a do if you want to move that deal from one Place to another place you can go in for drag and drop.

Or if you want to pull some text and add it to this deal that also is possible. So drag and drop geo location, you to get the location of the user that storage. If you want to store the details in the user system, then you need to go in for rich storage earlier, whenever you want to store the details in the user's machine, you need to use catch. Instead of that now you can go in for the JavaScript API a web storage, which helps to store the data in the user system. It also store unstructured data also. Then application cache, again for caching the information and selector for working with selected details.

Sorry, JPA. So when you want to store some details in the user's machine for users machines, you need to go in for this web storage API. There are two ways of storing it local storage and session storage, local storage, it stores the data without any expiry date session storage for a period of session. So that's what is given over here. Right We will see how to work with local storage session storage once we have completed the JavaScript course, because all these involve more of JavaScript, the canvas part also. Next, let us understand the difference between block and inline elements.

A block element is an element which takes the whole viscosity container by container I mean to say the whole width of the browser. The examples for the block elements are h one p list and the example for inline span an anchor tag as fat that is the inline elements take only till the content part. Let me explain this with an example. I have created a HTML page with few block elements, h1, do unordered list and paragraph tag. Let me just open this in the browser. Have a look on this output each and every element is listed one below each other.

The reason is they are block elements, they take the whole width of the container that heading takes from left to the right. And again, the dude takes from left to right. Similarly, the unordered list and they paragraph. Now let me go in for a span and anchor stack. These two tags are inline elements, I will show you the difference. Then, let me create an anchor tag.

Trial added a span and an anchor tag. Let me open this in the browser. Let me refresh that. Let me first save this refresh. Have a look I have added this path, I have never given a break, but till the anchor tag is added next to the spam because Spam is not taking the whole width. So, the anchor tag is an attack next immediately to the spam.

So, I hope you can understand the difference here on the block elements take the whole which in case of these I mean inline elements, they take only till the content part. So, rest of the space is free. So, the elements float next to each other so that they are arranged in an order. Right. Okay. One more thing we were talking about the content editable, what is the meaning of content editable?

Whatever you are seeing in the web page, it is fixed. You can never change it. You are supposed to read it only it is in a readable mode. If you want to input data you need to go in for the form fields. What if you want to change the content or what if the developer wants the user to change the content of a particular paragraph. In that scenario, you need to go in for content editable attribute.

Let me show you that. paragraph tags to that I have given content editable as true. So what happened automatically give me an edit option wherein I can go and change the content and say this paragraph. Let me show you that in the browser directly. I'll go into the program. here already, we have a paragraph.

So I will use content editable and make this as true. Let me save this. I'll go and reload the browser. Let me refresh. Now, this is editable content. Can you see automatically and also see this is taking the whole width of the container.

Now I can show I can change a race. So if you want the user to change the content of a particular elements you can go in for this content editable attribute. Tell about the block and inline elements. We have completed the whole HTML part. We have seen different types of tags in HTML. And also we have learned how to use each and every time.

Thank you.