How to create shapes with HTML canvas

#webdev #javascript #beginners #tutorial

Introduction
Getting Started
Drawing Shapes
Conclusion

✍️ Introduction

HTML <canvas> element is used in creating content that includes graphics. This gives developers the opportunity to draw shapes, texts and shapes including styles and animation.

✨ Getting Started with Canvas

In creating the shapes with HTML <canvas>, there are few tips to set up

1. Adding <canvas> element to the HTML page to specify its use, in the canvas tag includes the identity(id) attribute which will be dynamically controlled by Javascript. You should also set the width and height to determine the size of the canvas element

2. Manipulating the <canvas> element with JavaScript by retrieving the element using the ID and assign to the constant canvas. The getContext("2d") method make the canvas to be rendered as text, shape or image.

✏️ Drawing Shapes

🟦 Rectangle

These methods can be used to create a rectangle where x = the x coordinate of the rectangle, y = the y coordinate of the rectangle, width = the width of the rectangle and height of the rectangle.

fillRect(x, y, width, height) This method create a filled rectangle with a fill style to give it a specific color.

strokeRect(x, y, width, height) This method create an outline rectangle or a rectangle with a stroke, the strokeStyle can be used to add color to it.

clearRect(x, y, width, height) This method create a transparent rectangle but you have to specify the canvas width and height filled with a color name so it the transparent rectangle can render

🟩 Square

The methods for creating square are same as rectangle, the difference is the width value which is the same as the height unlike in rectangle.

🔺 Triangle

These methods can be used to create a triangle.

-beginPath(): This method is to start a new path for the drawing.
-moveTo(x, y): This method help to move the pen at the first vertex of the triangle
-lineTo(x, y): This method draw the bottom vertex of the triangle.

⚪️ Circle

These following methods are used in creating a circle:

beginPath(): this method to begin a path.
arc(x, y, radius, startAngle, endAngle, anticlockwise): this is for to create circle where x and y is for center coordinates of the center, radius is the radius of the circle, startAngle and endAngle which is an angle for the circle.
Math.PI- This is used in creating a half circle while multiplying this by 2 will give a full circle

🟠 Ellipse

This shape uses the same types of methods but uses;

-ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, counterclockwise): where
-x and y are the center coordinate of the ellipse,
-radiusX and radiusY is the horizontal and vertical radii of the
ellipse,
-rotation displays the rotation of the ellipse in radians,
-startAngle and endAngle indicate the start and end angles for the
drawing, in radians and
-counterclockwise which is optional with the value of true or false
(default is false).

🟦 Parallelogram

This shape uses the following methods;

beginPath to start a new drawing path and moveTo(x, y) to set the first corner since the shape has 4 sides with 4 corners.
lineTo to draw the lines which will connect them together since there are 4 sides.

🟥 Trapezium

This shape is quite similar to parallelogram, they utilize the same methods in drawing them. The only different about them is the values of the coordinates.