programplug Logo




HTML5 Canvas

HTML5 element provides an easy way to draw graphics on a web page using javascript.
HTML<canvas> element consits of container of graphics and to add graphics you must need a scripting language.Canvas has saveral ways to draw paths,circles,text and adding texts.
Canvas tag is the low level,procedural model that upadte a bitmap and does not have a built in scene.

How to create a HTML canvas?

A canvas is a rectangular shape area on a HTML page.By default <canvas> element has no border and no content.

Example:
<!DOCTYPE html>
<html>
<body>
<canvas id="Canvas" width="200" height="200" style="border:3px solid;"> 
 HTML5 canvas tag does not support your browser .  
</canvas>
</body>
</html>

		  
Result:
HTML5 canvas tag does not support your browser .

HTML Canvas Tag with JavaScript:
A canvas has two dimensional grid.
Example:
<!DOCTYPE html>
<html>
<body>
<canvas id="Canvas" width="200" height="200" style="border:4px solid #FDFF06;">
</canvas>
<script>
var c = document.getElementById("Canvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#CD5C5C";
ctx.fillRect(0,0,180,100);
</script>
</body>
</html>
  

In ctx.fillRect(0,0,180,100); in this code 0,0 is start point to fill the color from both axis x-axis and y-axis respectively and '180'is indicate to fill the rectangle from 0 to 180 in x-axis and 100 indicate to fill the rectangle from 0 to 100 on y-axis.

Result:

Draw a line:
To draw line you need following methods:

  • stroke()-It draw a line.
  • stroke()- It define the ending line of point.
  • stroke()-It define the starting point.
<!DOCTYPE html>
<html>
<body>
<canvas id="CanvasLine" width="200" height="100" style="border:3px solid #000;">
</canvas>
<script>
var c = document.getElementById(CanvasLine");
var ctx = c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
</script>
</body>
</html>
     
Result:


Drawing text on canvas using strokeText() method:
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvasText2" width="300" height="100" style="border:3px solid #000;">
</canvas>
<script>
var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
ctx.font = "50px TimesRoman";
ctx.strokeText("Programplug",20,40);
</script>
</body>
</html>
   
Result:







Our Services

Developing Cheapest Websites
Offer Digital Marketing
Provide College Projects
Attractive Website Developing
Summer Training,Industrial Training
SCO,SMO

Contact Us

Dehradun Uttarakhand India
www.programplug.com
info@programplug.com
08534019974
Designed By : Mridul Gupta

Other Link

About Us

Contact Us

Disclaimer

Privacy Policy