Canvas Element in HTML
HTML canvas element and the canvas context are two different things between which most developers are commonly confused. The canvas element is a Document Object Model defined in the HTML, whereas the canvas context is where the drawing or animations are made.
Let’s dive into the article and learn about the different properties available to use for the HTML canvas element.
Properties of the <canvas> element
The following table depicts the various properties and their usage of the HTML canvas element. It shows the available drawings we can create using the canvas element.
To draw rectangles
(fillRect, rect(), strokeRect(), clearRect())
|It is used to draw rectangle elements by specifying the height and the width of the <canvas> elements. These functions are used to remove, fill and clear a specified rectangle.|
To draw paths
(fill(), stroke(), beginPath(), moveTo(), closePath(), lineTo(), clip() )
|It is used to make different shapes and paths of <canvas> elements.|
To draw lines
|It is used to create lines using the lineto(), moveto(), and stroke() in the <canva> element|
|Draw bezier |
|It is used to draw the bezier curve within the <canvas> element.|
|Draw Quadratic Representation|
|It is used to represent the curve of the quadratic on the <canvas> element.|
|This property allows us to use images in the <canvas> elements|
|This property is used to create gradient colors using the HTML <canvas> element|
|Add Styles and Colors|
|This property is used to add styles and colors to the Canvas element|
Text and Fonts
font(), textAlign(), fillText(), textBaseline(), strokeText()
|This property is used to edit the text and fonts on the canvas element on the HTML document.|
|Patterns and Shadows |
shadowBlur(), shadowColor(), createPattern()
|This property is used to add different styles of patterns and shadows on the canvas element.|
|Canvas States |
|This property is used to store and restore the canvas element|
|Canvas Animation |
setInterval(), setTimeout(), requestAnimationFrame()
|This property is used to translate the contents on the HTML canvas element.|
|This property is used to rotate the canvas element on the HTML document.|
Using these properties, we can draw various elements and shapes on the canvas element. We will discuss the basic drawings essential for a developer before exploring more of the canvas element.
Designing different elements
Let’s start by creating a canvas of height 300px and width 400px,
To draw text on the canvas element.
We can add text on the canvas element using the fillText() method. This method is used to draw the text on the HTML canvas. We can edit the font using the font property and use the strokeText() method to draw the text on the canvas without filling.
The above example shows the use of strokeText() and fillText() methods, which have specified the coordinates and the text that is to be displayed on the canvas element.
To draw a line on the canvas element.
We have three methods that are used to draw a line on the canvas, moveTo(), stroke(), and lineTo(). The movesTo() method is used to move the cursor to the element space. The lineTo() method specifies the line’s endpoint, and the stroke() method makes our line visible on the canvas. Here is an example to help you understand the concept better.
NOTE: The points defined in the moveTo,lineTo functions are used to define the X coordinate and the Y coordinate of the line.
To draw a rectangle using the HTML canvas element
In the above syntax, the x and y specify the rectangle coordinates, and the width and height are used to make the rectangle with the specifications given attributes. In the below example, we have used the context.strokeStyle method to change the stroke’s color, and we have set it to red to get a colored rectangle border.
To draw a circle using the HTML canvas element.
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
In the above syntax, the start angle is set to 0, and the end angle is 2π which would form a complete circle. HTML canvas does not have a particular function Weon like a rectangle to create a circle, but we implement the arc function, and create a circle on the canvas. Let’s go through the code below and try to understand better using this example,
To draw a gradient using the HTML canvas element.
To draw a gradient in the HTML element, we can use the createLineargradient() method to draw gradients of our choice inside the canvas element. If we want to get the colorful gradient, we can use this method along with the addColorStop(), which would help to denote the gradient colors. If you wish to attain a more radial gradient, we have another method to save you: the createRadialGradient(). This method would make the color disposal more circular than linear.
→ createLinearGradient(x,y,x1,y1) - creates a linear gradient
Here, the (x,y) and (x1,y1) define the coordinates of two points that specify the linear element’s position.
→ createRadialGradient(x,y,r,x1,y1,r1) - creates a radial/circular gradient
Here the (x,y) and(x1,y1) also define the coordinates of the two different points, but the r1 and r2 define the radial coordinates, which gives us a circular effect on the gradient.
Let’s consider the below code as an example to understand both of the gradients better,
- Linear Gradient:
- Radial Gradient:
These were a few designs we could create using the HTML canvas element. You can use these basic designs and try to make something more attractive on the canvas element.
Frequently Asked Questions
- What is the HTML canvas element used for?
- What is the difference between SVG and the Canvas element?
→ SVG(Scalar Vector Graphics), as the name suggests SVG is composed of various shapes, whereas the Canvas element is based on Raster that means it is composed of pixels.
→ SVG can be modified using both the scripting language and the CSS, but the Canvas element can only be modified using the scripting language.
→ SVG is faster for rendering significant elements but slower for generating many elements as a group than canvas.
- How can you create a simple shape on canvas?
Ans: We can create a simple rectangle using the fillRect(), rect() and stroke() methods. The rect() method is used to define a rectangle image on the canvas, fillRect() is used to define a rectangle filled with a color property, and the stroke() method is used to draw the rectangle on the canvas. Using these methods, you can create a simple rectangle drawing on the canvas.
Happy Learning Ninjas!