Inspect the API

HTML JavaScript
Transcript

English (Auto-generated)

So let's take a brief look at the canvas api before we actually start building something because we need to know what methods and properties this aPI provides for us to use. Now you already know that the canvas html element is the container for two D. Or three D graphics on our webpage. And to actually draw on the canvas we have to use the canvas aPI. S properties and methods via javascript. So canvas has methods for drawing basic shapes, drawing text images and we can even do animations. So let's take a look at the drawing shapes. So for example we can draw rectangles onto a canvas element. And out here you can see a couple of methods for example the Phil recht method, the stroke wrecked method and then the clear wrecked method with all their parameters so X. And Y. With and height and moving down. You can also draw other shapes like these arrows so you can mix and match and draw different shapes using methods provided by canvas A. P. I. Now this gets us to the next part which is that canvas api all also provides properties whose values can be changed. So for example here we have the field style and stroke style properties to change the fill and stroke colors of any figure and moving down. We also you can also change the transparency property and then there's a couple of line styles properties whose values you can change. So line with To make a line thicker or 10or and here's a couple of more now. So these are some examples of properties and we've seen a couple of methods to draw some basic shapes and something important that I want to talk about is the rendering context. This is important. So you can render two D. Or three D. Elements onto a canvas and three D. Is a bit more complicated and uses web G. L. Whereas the two D context is a bit more simple. So when we wanted to draw onto the canvas, we need to get a context right and we can pass in either three D or two D. To the get context method. So out here what get context to D does is that it returns a two D object that has all the drawing properties and methods that you can use to draw onto a canvas. So this is something that needs to be done before you actually start drawing onto the canvas element on your web page. So that's just a brief overview of the canvas api we know it has properties and methods and in the next podcast is when we'll actually start using these properties and methods, starting by first drawing out a few simple shapes
86 Views 0 Likes 0 Comments

Let's briefly inspect the API before we start using it

Comment
Leave a comment (supports markdown format)