JavaScript - Canvas

---

---

Handling Canvas with JavaScript

The HTML element can be used to create and draw graphics on the web page. It can draw various graphics or shapes, like lines, circles, etc., on the web page and animate them.

You can define element in HTML, and after that, you need to use JavaScript to draw graphics on the web page. Let's look at the syntaxes to define a canvas element in HTML and manipulate with JavaScript.

Syntax

Use the following syntax to create an HTML canvas element.

   Your browser does not support the HTML canvas tag.

In the above syntax, we have defined the HTML element with id as 'myCanvas'. The message written in between tags will be displayed when the browser doesn't support the element.

We access the canvas element using the getElementById() method of document object. Look at below syntax −

var canvas = document.getElementById('canvas_id');
var ctx = canvas.getContext('2d');

In JavaScript, we can use the getContext('2d') method to get the context of the 2D canvas. Next, we can use various methods to draw a shape and fill in the color by taking the 'ctx' variable as a reference.

Examples

Example: Drawing a rectangle

In the code below, we have added the element in HTML.

In JavaScript, we have used the getContext('2d') method to access the context of the canvas. After that, we used the fillstyle() method to color the element in the canvas. The fillRect() method is used to draw a rectangle. It takes the coordinates of 4 corners in the canvas.

   
 JavaScript - Canvas 
   
 Drawing Rectangle on Canvas using JavaScript
   
      Your browser does not support the HTML canvas tag.
   
   

Example: Drawing a circle

In the code below, we used the arc() method to draw a circle. It takes the coordinates for the circle position as the first 2 parameters and the radius of the circle as a third parameter.

   
 JavaScript - Canvas 
	
 Drawing circle on Canvas using JavaScript
   
       Your browser does not support the HTML canvas tag.
   
   

Example: Drawing a lines

In the code below, we have drawn the lines using the moveTo() and lineTo() methods. The moveTo() method takes the starting point of the line as a parameter, and the lineTo() method takes the ending point of the line as a parameter.

   
 JavaScript - Canvas 
	
 Drawing lines on Canvas using JavaScript
   
      Your browser does not support the HTML canvas tag.
   
   

Example: Drawing a Linear gradient

   
 JavaScript - Canvas 
	
 Drawing linear gradient on Canvas using JavaScript
   
      Your browser does not support the HTML canvas tag.
   
   

Example: Text Rendering

In the below example, we have rendered a text message "Hello" on the canvas. For this, we have used fillText() method. The fillText() method in HTML Canvas draws a text string on a canvas element.

   
 JavaScript - Canvas 
   
 Rendering text on Canvas using JavaScript
   
      Your browser does not support the HTML canvas tag.
   
   

We have learned to use elements in HTML and draw graphics by accessing elements using JavaScript. We can draw various shapes and add colors to shapes.