Post
Ask Question

HTML Graphics - Canvas

Introduction

 
The <canvas > element is used for graphics that completely draw through JavaScript. Just basic Javascript knowledge is enough to draw with <canvas>.
 

Attributes of <canvas>

 
id: This is a core attribute.
 
width and height: These two specific attributes define the size of the canvas.
 
Syntax
  1. <canvas id="canv1" width="300" height="200">  
  2. </canvas> 
Note: You can use more than one canvas on the same HTML web page.
 

Find the canvas element

 
If we want to find the canvas element, getElementId(), use the following method:
  1. var canv = document.getelementId("canv1");   

Uses of Canvas

 
HTML Canvas allows you to draw simple lines like graphs and charts and more complex animations like a bouncing ball. It can also let you display colorful text with gradient or animation effects.
 
HTML canvas is an interactive graphical element that responds to JavaScript events and user actions like a mouse click, button clicks, key click, finger hover.
 
HTML Canvas supports animation so it can be used with Games.
 

Rendering Canvas

 
There are no border displays on the content, so it’s quite convenient to use the style attribute with the canvas element.
 
The canvas element uses a method getContext, which contains drawing context and its functions, with one parameter, type of context2d.
 
Syntax
  1. var canv = document.getelementId(“canv1”);    
  2. if (canv.getContext)    
  3. {    
  4. var c1= canv.getContext("2d");    
  5. // drawing code    
  6. else    
  7. //unsupported code    
  8. }   
Example 1
  1. <html>    
  2.    <head>    
  3.       <title>Canvas </title>    
  4.    </head>    
  5.    <body>    
  6.       <canvas id="canv1" width="300" height="200" style="border:1px solid #0000ff">    
  7.       </canvas>    
  8.       <script>    
  9.          var canv = document.getelementId("canv1");    
  10.          var c1= canv.getContext("2d");    
  11.       </script>    
  12.    </body>    
  13. </html> 
Output
 
Note: Initially, Canvas is blank, so we have to use the Style attribute with the <canvas> element which will draw this rectangle.
 

Canvas Drawing

 
Let’s draw a circle on the above canvas.
 
Three steps are required to draw a circle:
 
Step 1 - Find the canvas Element
  1. var canvas = document.getElementById("canv1"); 
Step 2 - Create a drawing object
  1. var c1 = canvas.getContext("2d"); 
Step 3 - Draw a circle on a Canvas
  • beginPath(): Starts the drawing
  • arc(x,y,r,start,stop): Sets the parameters
  • stroke(): Ends the drawing
  1. c1.beginPath(); c1.arc(75,75,50,0,80); c1.stroke();
Example 2
  1. <html>    
  2.    <head>    
  3.       <title>Canvas </title>    
  4.    </head>    
  5.    <body>    
  6.       <canvas id="canv1" width="300" height="200"    
  7.          style="border:1px solid #0000ff;">    
  8.       </canvas>    
  9.       <script>    
  10.          var canvas = document.getElementById("canv1");    
  11.          var c1 = canvas.getContext("2d");    
  12.          c1.beginPath();    
  13.          c1.arc(75,75,50,0,80);    
  14.          c1.stroke();    
  15.       </script>    
  16.    </body>    
  17. </html> 
Output
 
 

Canvas Coordinates

 
Canvas coordinates are two-dimensional grids where the coordinates start from the upper left corner of the canvas (0, 0).
 
X coordinate moves towards the right.
 
Y coordinate moves towards to bottom from the left corner.
 

Methods of Drawings

  • Draw a Line: moveTo(x,y): Starting point of the line
  • lineTo(x,y): Ending point of the line
  • Draw a Circle: beginPath(): Starts the drawing
  • arc(x,y,r,start,stop): Sets the parameters
  • stroke(): Ends the drawing

Draw Gradients 

 
createLinearGradient(x,y,x1,y1)
createRadialGradient(x,y,r,x1,y1,r1): Creates a circular Gradient
 
Example 3
  1. <html>    
  2.    <head>    
  3.       <title> Canvas-gradient </title>    
  4.       <style>    
  5.          #drawgrad {    
  6.          width: 170px;    
  7.          height:150px;    
  8.          margin: 20px;    
  9.          border:1px solid #0000ff;    
  10.          }    
  11.       </style>    
  12.       <script type = "text/javascript">    
  13.          function drawGrad(){    
  14.          var canvas = document.getElementById('canv1');    
  15.          if (canvas.getContext){    
  16.          var c1 = canvas.getContext('2d');    
  17.          var radgrad = c1.createRadialGradient(45,45,10,52,50,40);    
  18.          radgrad.addColorStop(0, '#009900');    
  19.          radgrad.addColorStop(0.9, '#99ff66');    
  20.          radgrad.addColorStop(1, 'rgba(153, 255, 102,0)');    
  21.          var radgrad2 = c1.createRadialGradient(110,110,20,112,120,50);    
  22.          radgrad2.addColorStop(0, '#ffcc99');    
  23.          radgrad2.addColorStop(0.85, '#0000ff');    
  24.          radgrad2.addColorStop(1, 'rgba(0, 0, 255,0)');    
  25.          var radgrad3 = c1.createRadialGradient(95,15,15,102,20,60);    
  26.          radgrad3.addColorStop(0, '#99ccff');    
  27.          radgrad3.addColorStop(0.8, '#ff3399');    
  28.          radgrad3.addColorStop(1, 'rgba(255, 51, 153,0)');    
  29.          var radgrad4 = c1.createRadialGradient(0,150,30,0,140,90);    
  30.          radgrad4.addColorStop(0, '#66ffff');    
  31.          radgrad4.addColorStop(0.8, '#9900ff');    
  32.          radgrad4.addColorStop(1, 'rgba(153, 0, 255,0)');    
  33.          c1.fillStyle = radgrad4;    
  34.          c1.fillRect(0,10,250,250);    
  35.          c1.fillStyle = radgrad3;    
  36.          c1.fillRect(10,0,250,250);    
  37.          c1.fillStyle = radgrad2;    
  38.          c1.fillRect(10,10,250,250);    
  39.          c1.fillStyle = radgrad;    
  40.          c1.fillRect(10,10,250,250);    
  41.          }    
  42.          else {    
  43.          alert('This browser does not support the Canvas.');    
  44.          }    
  45.          }    
  46.       </script>    
  47.    </head>    
  48.    <body id = "drawgrad" onload = "drawGrad();">    
  49.       <canvas id = "canv1"></canvas>    
  50.    </body>    
  51. </html> 
Output
Green: radgrad
Blue: radgrad2
Pink: radgrad3
Purple: radgrad4
 

Drawing Text

  • Font: Font properties for the text
  • fillText(text,x,y): Draws filled text like the bold text on the Canvas
  • strokeText(text,x,y): No fill to the text, such as the bordered text.
Example 4
  1. <html>    
  2.    <head>    
  3.       <title> Canvas-text </title>    
  4.       <style>    
  5.          #drawtext {    
  6.          width: 300px;    
  7.          height:200px;    
  8.          margin: 20px;    
  9.          border:1px solid #0000ff;    
  10.          }    
  11.       </style>    
  12.       <script type = "text/javascript">    
  13.          function drawShape() {    
  14.          var canvas = document.getElementById('canv1');    
  15.          if (canvas.getContext) {    
  16.          var c1 = canvas.getContext('2d');    
  17.          c1.font = 'Bold 40px Calibri';    
  18.          c1.strokeText('Stroke Text!', 1, 50);    
  19.          c1.fillStyle = '#00F';    
  20.          c1.font = 'Bold 40px Calibri';    
  21.          c1.textBaseline = 'Top';    
  22.          c1.fillText('Filled Text!', 1, 100);    
  23.          } else {    
  24.          alert('This browser does not support the Canvas.');    
  25.          }    
  26.          }    
  27.       </script>    
  28.    </head>    
  29.    <body id = "drawtext" onload = "drawShape();">    
  30.       <canvas id = "canv1"></canvas>    
  31.    </body>    
  32. </html> 
Output
 

Summary

 
In this article, we learned about the various methods to draw shapes on the Canvas. There are many more methods used to draw different shapes. We discussed only the most common methods. The remaining methods we will try to cover in the next article.
 

Reference

 
https://www.tutorialspoint.com/html5/html5_canvas.htm
https://www.w3schools.com/graphics/canvas_intro.asp


Similar Articles