This write-up will acknowledge you about
- What is a canvas
What is a canvas
Canvas is a container, that allows us to draw different shapes, lines, and texts in a browser. By default, the canvas container is invisible and has no border. So to make it visible we use HTML 5 canvas tag and the CSS border property.
The above syntax only displays a simple container with a border.
const contxt = canvas.getContext("2d");
canvas.width = 400;
Here variable name represents the variable we have created for the getContext() method. While the strockRect() method takes four parameters where the value x and the value y represent the position on the canvas where you want to draw the shape(rectangle). Whereas, width and height are used to mention the size of the rectangle.
In this code, a rectangle is created with 250px width and 100px height.
In case, you want to change the color of the rectangle just add the following code before your rectangle creation code:
The fillRect() method also takes the four parameters and is used to create a filled rectangle.
To change the color of the rectangle just use the fillStyle property before your rectangle creation code:
Here arc() method takes five parameters including the value x and value y representing the position of the circle, circle radius, starting angle, and ending angle value. stroke() method is used draw a path of the circle which will eventually displays a circle.
In this syntax,
beginPath() method starts a path,
moveTo() method takes two values x and y which moves the cursor to the specific point.
lineTo() method also takes two values, the starting point from where the line starts and ending point where the line ends.
stroke() method is used to draw a path of the line which will eventually display a line.
variable-name.fillText("Displaying-Text", value-x, value-y);
First, you need to mention the font size and font family using the font property. Secondly, provide the color if you want using the fillStyle property. Lastly, fillText() method takes three values, text, value x and value y.
contxt.fillStyle = "lightgreen";
contxt.fillText("Canvas", 110, 120)
variable-name.strokeText("Displaying-Text", value-x, value-y);
Here strokeText() method is used to writethe text in hollow style..
contxt.strokeStyle = "orange";
contxt.strokeText("Canvas", 110, 120)