Want to know the basics of what an HTML Canvas is all about? The HTML canvas element is used to draw the graphics on the webpages. The <canvas> element is taken as a container only for graphics. You must use a script to draw the illustrations.
Canvas has many methods for drawing many things like paths, boxes, circles, text, and adding images.
What is an HTML canvas?
In HTML, a <canvas> element looks like this:
<canvas id="myCanvas" width="200" height="100"></canvas>
You can easily find that element in DOM using getElementById() method as follows -
var canvas = document.getElementById("mycanvas");
Let’s see an example of using <canvas> element in HTML:
You will get a rectangle inside your web page.
Your web page will look like below -
The getElementById() is a DOM method that is used to find the element by the id name.
The getContext() method is used to draw objects for the canvas.
The fillRect(x, y, width, height) draws a rectangle, filled with the fill style, on the canvas.
The HTML canvas is a two-dimensional grid. The upper-left corner has a coordinate (0,0).
Let’s see how we can draw a line using the same.
You can draw a straight line on the canvas. For this, use the following methods:
- moveTo(x,y) - It defines the starting point of the line.
- lineTo(x,y) - It represents the ending point of the line.
The stroke() method is used to stroke the subpaths and actually draw the line.
Canvas - Gradients
Gradients are used to fill the shapes on the canvas and are not limited to solid colors.
There are two types of gradients:
As its name suggests, it creates a linear gradient.
This will produce the following gradient:
The addColorStop() method specifies the color stops. The 0.0 is the offset at one end of the gradient, and 1.0 is the offset at the other end.
You can now use the gradient by using the fillStyle or strokeStyle property and then drawing the shape.
It creates a radial/circular gradient.
The gradient will look like the image below:
You can include the text in your canvas by using the properties mentioned below:
- Font - It defines the current font settings.
- fillText(text,x,y) - It fills the given text at the specified position.
- strokeText(text,x,y) - It strokes the text at the specified position.
The text will look like below:
HTML canvas allows the user to add an image to the canvas. The drawImage(image, x, y) method is used to add an image.
This code will produce the following result :
Get skilled in HTML5 and CSS3 with the Full Stack Java Developer Master's Program. Click to check out the program details!
We hope that this article offered you a brief insight into HTML Canvas and its functionalities. But to learn more about web development in its entirety, certification is highly recommended for jumpstarting your coding career.
Simplilearn’s Full Stack Java Developer will help you master the world of web development. The course covers a comprehensive list of relevant topics, including front-end, middleware, and back-end Java web developer technologies. It will help you learn to build an application, end-to-end, test and deploy code, store data using MongoDB, and much more.
If you have any questions or feedback regarding the HTML tags article, let us know in the comments section. Our experts will get back to you as soon as possible.