Hello and welcome to another episode in the Godot basics tutorial series. In this episode we will be taking a look at the canvas item class canvas item is a class where we can draw things onto our scene. The canvas item class is the base class of anything to d.. That means that our control class and are no 2D class along with their subclasses will be inheriting the canvas item class. This means that all these subclasses will be able to use methods and properties provided to you by the canvas item class the canvas items are drawn in entry order. That means that the root Canvas item will be drawn. Behind everything else and the canvas item at the bottom of your scene tree hierarchy will be drawn in front of everything else. One thing to note is that if you hired a parent you hide their children. The most important method that the canvas item class provides you is the draw virtual method. You have to define drawing methods inside the draw virtual method or nothing will be drawn just to give a quick pseudocode example. Here's our virtual draw method and we have to declare our draw methods inside our virtual draw method. Basically any method that starts with the keyword draw must be inside the draw virtual method.

The next most important thing is the update method that the canvas item provides you. When you call the Update method accused the canvas item drawing for update. Basically if you decide to change something change the position of your drawing or change the colors. You need to call the Update method on top of that canvas item allows you to hide and on hide. Essentially Essentially your Node. Because again keep in mind that canvas item cannot be used directly. You have to use a no 2D or its subclasses in order to get the canvas item functionality. So if you would like to hide or untie your no 2D and its subclasses you can call the hide and show method the hide method makes your canvas item invisible and the show method and hides it. Keep in mind that even though your canvas items are invisible your code or rather your script attached to your node that is hiding has its code running. Basically life cycles are not paws one property. You may find useful that the canvas item class provides you is the modulate property to modulate property as a color class data type and basically you can change the colors applied to your texture. Keep in mind that whatever color is set to the modulate property will be inherited by the children.

If you don't want your children to inherit the parents modulate property use the self modulate property instead. The only difference between modulate and self modulate is self modulate property when change will not be inherited by their children. There are quite a lot of methods that the canvas item provides us for drawing on to the scene. These would include lions circles squares triangles and so forth. The key thing to take in no matter what draw method you will call is that it needs a value for your position and a value for color. Let's start with lines if you would like to draw a line. We have two methods provided to us. The draw line method and draw multi line method. The draw line method takes in three arguments. The first two arguments must be a vector. The third argument has to be a color so the vector 2 will be your position in the x y coordinate system. The second argument will be the last point in your line in the x y coordinate system and you have to give that line a color.

The draw multi line method takes in two arguments. The first argument is a pull vector to array which is just basically an array of vector two values while the second argument is a color because you would like to apply some sort of color to your lines and towards the bottom. This is an example of how you would create your pull vector to array. You would create a variable. Use the pool vector to array keyword by load by parentheses followed by square brackets followed by vector to keyword and then your float values in the x y coordinate system. If you would like to draw a circle we have the draw circle method it takes in three arguments. The first argument will be were you would like the center of your circle to be positioned in an x y coordinate system. Basically where you would like it to draw on the screen. The second argument will be the radius. So how big you would like this circle to be in the third argument is the color. If you would like to draw squares or rectangles we have the draw rect method.

It takes in a rect to data value as the first argument and a color value as the second argument towards the bottom. I have an example of how you would create your rect to data value. First you would declare a variable name followed by the assignment operator followed by the rect to keyword followed by parentheses and then that takes in for argument's the first argument is where you would like your rectangle or square to be positioned in the x coordinate. The second argument is where you would like your rectangle to be positioned along the y coordinate the third and fourth arguments are basically how wide and how tall you would like your square or rectangle to be if the width and height are the same values you have created a square. If they are different values you've created a rectangle. If you would like to create dots triangles or quadruple laterals that are not a square and rectangle use the draw underscore primitive method.

It takes in a pool vector to array as its first argument a poor color array as the second argument and a pool vector to array again for the third argument. Keep in mind that you can only provide four vectors in the pull vector to array. It will not take in more than four arguments if you provide one vector in your vector array or you're going to do is draw a dot. If you provide two values and your vector array you're going to draw a line. If you provide three you're going to create a triangle. And if you create four vectors in your vector to array excuse me your pool vector to array you're going to create a quadrilateral. Now the third argument is a pull vector to array. However the values provided is just a texture coordinate for each vertex. Basically you can provide the same values you provide in the first argument to the third argument. One thing to keep in mind is if you would like a solid color make sure that you provide a pool color array that is the same length as the first arguments pull vector to array. That sounds a little confusing so I'm going to upload to get hub an example project file with all these examples so please feel free to play around with the drop permitted to see how the drawing behaves when you change the values in the first second and third argument of the draw.

Primitive method last but not least we have the draw string virtual method it takes in a font value as the first argument takes in a vector to value as the second argument and a string value as the third argument the draw string method is fairly straightforward. However we do have to do something special in order to create our fund variable in order to pass that data along. Tourist draw string method so all the draw methods that I talked about. I'm going to create a simple project file upload that to get hub. So again please feel free to download that and play around and try to understand how we are able to draw different things onto the screen using the canvas. Item class provided to the no 2D and all its subclasses. Well that's all I have for you in this episode. Thank you so much for joining me. Thank you for clicking the Like button. Thank you for clicking the Subscribe button. If you're curious about other Godot channels in tutorial videos I have a Trello page link in the description down below. Please feel free to take a look at that. I look forward to seeing you and the next episode. Have an amazing day