Canvas Rectangle, Shadow, Path and Text training in HTML
6 minute(s) read
Published on: May 14, 2021
Updated on: Dec 14, 2021
Web owners are always trying to improve the quality of content on the web. To achieve this goal, they take various measures and use all available facilities. To draw graphics on web pages, you can use the Canvas element, which we are going to explain to you in this regard, so that we can learn the ways to implement important things together, such as adding shadows, text, and so on.
What is HTML Canvas?
This method is used to draw a rectangle with various parameters that we will mention in the following.
This parameter represents the width of the rectangle, which is in pixels.
As you know, in addition to the width of the rectangle, it also has a length, which determines the height of the rectangle, and it is also in pixels.
Using this parameter, you can specify the coordinates that the upper-left corner of the rectangle should have and determine where the rectangle should start from.
This parameter also specifies the coordinates of the upper-left corner, so with these four parameters, a rectangle can be drawn.
After doing this, you can easily draw a rectangle and use it to make your content more attractive.
Now imagine that you want to draw a slightly smaller green rectangle inside this blue rectangle. If you want to do this, you have to do the following.
Everyone's effort is to convey a better feeling to the user that in HTML5 canvas, you can make images, text, even a line more realistic with the help of shadows. In other words, with the help of shadows, everything can be made 3D. The shadows that are created can have the following properties:
- shadowOffsetX () Property:
This is one of the properties of the shadow, which is zero by default. With the help of which you can specify the horizontal distance of the shadow from the shape, it should also be noted to change the position of the shadow. You can use positive or negative values.
The way of doing this is as follows:
- shadowOffsetY () Property:
This is another property for adding a shadow, which is used to adjust the vertical distance of the shadow from the shape, and just like the previous case, it is zero by default. With the help of positive and negative values, you can determine its position.
To do this, you must do the following:
- shadowBlur () Property:
Another feature for shadows is the amount of blurring that can be adjusted, which must be done as follows.
- shadowColor () Property:
Shadows can have different color spectrums, which can be adjusted this way: ctx.shadowColor
For example, suppose you want to create several rectangles of the same size that have shadows with different colors. To do this, you can do the following.
In addition to adding a shadow feature to a rectangle or any other shape, you can also add shadows to a text if you want to make it more attractive to the user.
In HTML5 canvas, you can create custom shapes. For example, imagine that you are going to start drawing a path. First, you need to start from beginPath () and finally draw the path you want, then you need to use the fill () or stroke () methods to create a suitable shape for the user. In the last step, you can execute the command of a new path with closePath (). For example, imagine that you want to draw a yellow triangle. To do this, you have to do the following.
If you want to draw any other path, you can do the same, which may only differ in characteristics, such as color, starting point, endpoint, number of paths, etc.
One of the other things that you can do with the help of this version is drawing text, which also has different properties, such as drawing a map, drawing a rectangle, etc., the text may be italics, bold, normal, and so on, also the font size and other features may differ from each other, in general, among the characteristics of the texts, the following can be mentioned.
To draw text on canvas, you can use the string type and draw it.
To draw text, you must specify what horizontal coordinates you want to draw with the canvas.
Like drawing all items, you need vertical coordinates for a canvas to draw text in addition to horizontal coordinates.
Another feature that different texts can have is the maximum text width.
In general, different texts can be drawn, and different methods can be used to draw each one. We will mention an example of drawing text with the fillText () method in the following.
If you want to draw the text 'Canvas Rectangle, Shadow, Path' simply, you can do it by coding, which is mentioned below.
In general, HTML Canvas can draw various items that ultimately cause users to get a better user experience by viewing them. In this article, we have mentioned drawing items to give you an idea about making your site attractive; as a result, you can increase the traffic to your website with these simple tasks.Click to analyze your wesbite SEO