Hi everyone. My name is chorus. You can also call me Janet and in this podcast I'm going to be going over the canvas api. So the canvas api allows us to draw things like shapes, images, videos, and other drawings onto a canvas element on a web page. So essentially you can write or draw within the space inside of a canvas element. Just like we have this green rectangle drawn here inside of a canvas element. Now an A. P I like you might already know provides a software to software interface. So basically you can use the canvas A P. I. S. Methods and properties to interface with your own code or in this case the canvas object on your web page and the canvas api is used a lot in browser based games. So here we see fraser dot Js, which is a mobile and desktop html five game framework and all of the games interactions will happen inside of the canvas element on a web page. As another example, ml five Js is a machine learning library for the web. And to some extent this also uses the canvas api So let's head over to my code editor And out here I have already set up a basic html document. So there's not much going on. I have a style sheet called style dot CSS which is within my styles folder. And I have a javascript file which is called a script dot Js and this is within the scripts folder. So first things first let's go ahead and actually set up the canvas element on the webpage. And to do that type in canvas. And then since this is not a self enclosing tag, I do actually have to close the canvas tag and let me give my canvas an I. D. Attribute whose value is equal to my canvas. And then let me go ahead and save this with control. S now on the right side in the index dot html browser preview. You don't actually see anything as yet. And let's go ahead to the style dot CSS style sheet. And out here I'm going to select the element with the idea of my canvas And then give it a width of let's say 50 okay A height of let's say 300 pixels. And then let me give it a border off one pixel solid black. And then control us to save. And out here on the right side in the index dot html preview. You actually do now see the canvas element on the webpage. So that's all for this code cast. And in the next one we'll delve into the canvas api a bit more