• JavaScript Video Tutorials

JavaScript - Canvas

Handling Canvas with JavaScript

The HTML <canvas> 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 <canvas> 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.

<canvas id="myCanvas" width="480" height="320">
   Your browser does not support the HTML canvas tag.
</canvas>

In the above syntax, we have defined the HTML <canvas> element with id as 'myCanvas'. The message written in between <canvas> tags will be displayed when the browser doesn't support the <canvas> 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 <canvas> 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.

<html>
<body>
   <h2> JavaScript - Canvas </h2>
   <p> Drawing Rectangle on Canvas using JavaScript</p>
   <canvas id = "myCanvas" width = "600" height = "300" style = "border:1px solid #000000;">
      Your browser does not support the HTML canvas tag.
   </canvas>
   <script>
      var canvas = document.getElementById("myCanvas");
      // Getting the 2D context of the canvas
      var ctx = canvas.getContext("2d");
      // Drawing rectangle using canvas
      ctx.fillStyle = "#FF0000";
      ctx.fillRect(50,30, 470, 240);
   </script>
</body>
</html>

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.

<html>
<body>
   <h2> JavaScript - Canvas </h2>
	<p> Drawing circle on Canvas using JavaScript</p>
   <canvas id = "myCanvas" width = "600" height = "300" style = "border:1px solid #000000;">
       Your browser does not support the HTML canvas tag.
   </canvas>
   <script>
      var c = document.getElementById("myCanvas");
      // Getting the 2D context of the canvas
      var ctx = c.getContext("2d");
      // Drawing circle using canvas
      ctx.beginPath();
      ctx.arc(300, 150, 100, 0, 2 * Math.PI);
      ctx.stroke();
      ctx.fillStyle = "green";
      ctx.fill();
</script>
</body>
</html>

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.

<html>
<body>
   <h2> JavaScript - Canvas </h2>
	<p> Drawing lines on Canvas using JavaScript</p>
   <canvas id = "myCanvas" width = "600" height = "300" style = "border:1px solid #000000;">
      Your browser does not support the HTML canvas tag.
   </canvas>
   <script>
      var canvas = document.getElementById("myCanvas");
      // Getting the 2D context of the canvas
      var ctx = canvas.getContext("2d");
      // Drawing lines using canvas
      ctx.moveTo(0, 0);
      ctx.lineTo(300, 200);
      ctx.stroke();
      ctx.moveTo(300, 200);
      ctx.lineTo(400, 0);
      ctx.stroke();
</script>
</body>
</html>

Example: Drawing a Linear gradient

<html>
<body>
   <h2> JavaScript - Canvas </h2>
	<p> Drawing linear gradient on Canvas using JavaScript</p>
   <canvas id = "myCanvas" width = "600" height = "300" style = "border:1px solid #000000;">
      Your browser does not support the HTML canvas tag.
   </canvas>
   <script>
      var canvas = document.getElementById("myCanvas");
      // Getting the 2D context of the canvas
      var ctx = canvas.getContext("2d");
      // Drawing a linear gradient
      ctx.beginPath();
      var grd = ctx.createLinearGradient(0, 0, 440, 0);
      grd.addColorStop(0, "yellow");
      grd.addColorStop(1, "white");
      ctx.fillStyle = grd;
      ctx.fillRect(10, 10, 550, 240);
      ctx.fill();
      ctx.closePath();
   </script>
</body>
</html>

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.

<html>
<body>
   <h2> JavaScript - Canvas </h2>
   <p> Rendering text on Canvas using JavaScript</p>
   <canvas id = "myCanvas" width = "600" height = "200" style = "border:1px solid #000000;">
      Your browser does not support the HTML canvas tag.
   </canvas>
   <script>
    const canvas = document.getElementById('myCanvas');
	 // Getting the 2D context of the canvas
    const ctx = canvas.getContext('2d');
    ctx.font = '30px Arial';
    ctx.fillStyle = 'red';
    ctx.fillText('Hello, Canvas!', 150, 100);
</script>
</body>
</html>

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

Advertisements