• Have Any Question?
  • contact@eitworld.com

HTML5 Canvas





    • <canvas> tag is an element of HTML5.
    • HTML <canvas> tag is basically used for the purpose of designing graphics on a html web page.
    • You can draw circles, lines, rectangles, text and much more by using this html <canvas> tag.
    • We will discuss about the whole HTML <canvas> element in our upcoming “HTML Canvas Tutorial” Here we are going to introduce you with the basics of HTML <canvas> tag.
    • Here is the basic syntax of <canvas> tag:
<canvas id=”HTML_Canvas” width=”300″ height=”200″ ></canvas>
    • A canvas is a rectangular area on an HTML page. By default, it does not contain any border and content.
    • Here is a basic example of <canvas> tag:
<!DOCTYPE html >
<html>
<body>
<canvas id=”HTML_Canvas” width=”300″ height=”200″ style=”border:1px solid #000000;”>
Your browser does not support the canvas tag.
</canvas>
</body>
</html>

To see live output : Visit Try Yourself Editor

Output

      • You can draw anything with html canvas by using JavaScript.
      • Each canvas will show up in the DOM, and each canvas maintains its own state.

    (note:The Document Object Model (DOM) is an application programming interface (API) for valid HTML and well-formed XML documents. It defines the logical structure of documents and the way a document is accessed and manipulated.)

    • To find out the <canvas> in DOM you have to use the following statement:
var a_canvas = document.getElementById(“HTML_Canvas”);

 

  • Once you have found a <canvas> element in the DOM , you call its getContext() method. You must pass the string “2d” to the getContext() method as following:
var a_context = a_canvas.getContext(“2d”);

 

HTML Canvas : Draw a Line

 

    • To draw a line using html <canvas> we have to use four methods beginPath(), moveTo(), lineTo(), and stroke(). We will discuss about the each method in details further. Firstly go through the given program:
<!DOCTYPE html>
<html>
<body>
<canvas id=”HTML_Canvas” width=”300″ height=”200″ style=”border:1px solid #000000;”>
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var l = document.getElementById(“HTML_Canvas”);
var lx = l.getContext(“2d”);
lx.beginPath();
lx.moveTo(50,50);
lx.lineTo(150,200);
lx.stroke();
</script>
</body>
</html>

To see live output : Visit Try Yourself Editor

Output

In the above program :

  • “var l = document.getElementById(“HTML_Canvas”);” this statement find out the <canvas> element in DOM.
  • “var lx = l.getContext(“2d”);” this statement shows the drawing context of the <canvas> element.Once you have found a <canvas> element in the DOM , you call its getContext() method. You must pass the string “2d” to the getContext() method.
  • “lx.beginPath();” this statement shows that we are going to draw a new path.
  • “lx.moveTo(50,50);” this statement use to position the drawing cursor to a coordinate (50,50).
  • “lx.lineTo(150,200);” this statement draw a straight line from the starting position (drawing cursor) to a new position that is (150,200).
  • “lx.stroke();” this statement make the line visible.

HTML Canvas : Draw a Circle

 

    • To draw a circle using html <canvas> we have to use arc() method. See the given program:
<!DOCTYPE html>
<html>
<body>
<canvas id=”HTML_Canvas” width=”300″ height=”200″ style=”border:1px solid #000000;”>
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var l = document.getElementById(“HTML_Canvas”);
var lx = l.getContext(“2d”);
lx.beginPath();
lx.arc(100,100,50,0,2*Math.PI);
lx.stroke();
</script>
</body>
</html>

To see live output : Visit Try Yourself Editor

Output

In the above program :

  • “var l = document.getElementById(“HTML_Canvas”);” this statement find out the <canvas> element in DOM.
  • “var lx = l.getContext(“2d”);” this statement shows the drawing context of the <canvas> element.Once you have found a <canvas> element in the DOM , you call its getContext() method. You must pass the string “2d” to the getContext() method.
  • “lx.beginPath();” this statement shows that we are going to draw a new path.
  • “lx.arc(100,100,50,0,2*Math.PI);” this statement will draw a circle. In this arc function first two arguments shows the center of circle that is (100,150), third argument shows the radius of the circle that is 50, here fourth and fifth arguments shows the starting and ending angle here starting angle is 0 and ending angle is 2*Math.PI which is must for drawing a circle.
  • “lx.stroke();” this statement make the circle visible.

HTML Canvas : Draw a Rectangle

 

    • To draw a circle using html <canvas> we have to use rect() method. See the given program:
<!DOCTYPE html>
<html>
<body>
<canvas id=”HTML_Canvas” width=”300″ height=”200″ style=”border:1px solid #000000;”>
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var l = document.getElementById(“HTML_Canvas”);
var lx = l.getContext(“2d”);
lx.beginPath();
lx.rect(50, 50, 150, 100);
lx.stroke();
</script>
</body>
</html>

To see live output : Visit Try Yourself Editor

Output

In the above program :

  • “var l = document.getElementById(“HTML_Canvas”);” this statement find out the <canvas> element in DOM.
  • “var lx = l.getContext(“2d”);” this statement shows the drawing context of the <canvas> element.Once you have found a <canvas> element in the DOM , you call its getContext() method. You must pass the string “2d” to the getContext() method.
  • “lx.beginPath();” this statement shows that we are going to draw a new path.
  • “lx.rect(50, 50, 150, 100);” this statement will draw the rectangle. first two arguments show the coordinates of top left corner of rectangle that is (50,50) and the second two arguments show the coordinates of bottom right corner of rectangle that is (150,100).
  • “lx.stroke();” this statement make the rectangle visible.

HTML Canvas : Draw a Text

 

    • To draw a text using html <canvas> we can use font property and the fillText() method of the canvas context. See the given program:
<!DOCTYPE html>
<html>
<body>
<canvas id=”HTML_Canvas” width=”300″ height=”200″ style=”border:1px solid #000000;”>
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var l = document.getElementById(“HTML_Canvas”);
var lx = l.getContext(“2d”);
lx.font = ‘bold 25px Calibri’; lx.fillText(‘www.eitworld.com’, 0, 50);
</script>
</body>
</html>

To see live output : Visit Try Yourself Editor

Output

In the above program :

  • “var l = document.getElementById(“HTML_Canvas”);” this statement find out the <canvas> element in DOM.
  • “var lx = l.getContext(“2d”);” this statement shows the drawing context of the <canvas> element.Once you have found a <canvas> element in the DOM , you call its getContext() method. You must pass the string “2d” to the getContext() method.
  • “lx.font = ‘bold 25px Calibri’; “ this statement set the font property of the text. In which the style is bold, size is 25 px and family is Calibri.We can set the font property of the canvas context to a string containing the font style, size, and family, delimited by spaces. The style can be normal, italic, or bold. unless otherwise specified, the font style is defaulted to normal.
  • lx.fillText(‘www.eitworld.com’, 0, 50);” this statement will draw the text “www.eitworld.com” at the position (0,50).

HTML Canvas : Draw an Image

 

    • To draw a text using html <canvas> we can use drawImage() method.See the given program:
<!DOCTYPE html>
<html>
<body>
<canvas id=”HTML_Canvas” width=”300″ height=”200″ style=”border:1px solid #000000;”>
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var l = document.getElementById(“HTML_Canvas”);
var lx = l.getContext(“2d”);
var imagedraw = new Image();
imagedraw.onload = function() {
lx.drawImage(imagedraw, 0,50);
};
imagedraw.src = ‘logo3.png’
</script>
</body>
</html>

To see live output : Visit Try Yourself Editor

Output

In the above program :

    • “var l = document.getElementById(“HTML_Canvas”);” this statement find out the <canvas> element in DOM.
    • “var lx = l.getContext(“2d”);” this statement shows the drawing context of the <canvas> element.Once you have found a <canvas> element in the DOM , you call its getContext() method. You must pass the string “2d” to the getContext() method.
    • “var imagedraw = new Image();” this statement shows the declaration of image object that is imagedraw.
    • “imagedraw.onload = function() {lx.drawImage(imagedraw, 0,50);};” this statement draw an image on the canvas frame.

In drawImage function imagdraw is image object and (0,50) are destination points The destination point defines the top left corner of the image relative to the top left corner of the canvas.

  • “imagedraw.src = ‘logo3.png'” this statement defines the source of image to display in the canvas frame.

 

We will discuss about the whole HTML <canvas> element in our upcoming “HTML Canvas Tutorial”.



Real Time Web Analytics