How to use Canvas in HTML5?


In this article, I am explaining how to use canvas tag in HTML5.Canvas is new element in HTML5.Canvas tag is used to draw graphics,rectangles,circles,cross lines,multicolor texts,Gradients,Via scripting (usually JavaScript)..Before HTML we can not draw the circles,cross lines and graphics.

In this article i am explaing How to use canvas tag in HTML5.Canvas is new element in HTML5.Canvas tag is used to draw graphics,rectangles,circles,cross lines,multicolor texts,Gradients,Via scripting (usually JavaScript).Before HTML we can not draw the circles,cross lines and graphics.

Code for rectangle in HTML5:


<canvas id="rect" width="200" height="100" style="border:1px solid #c3c3c3;">
</canvas>

Code for rectangle in JavaScript:

var e=document.getElementById("rect");
var xx=e.getContext("2d");
xx.fillStyle="#FF0000";
xx.fillRect(0,0,150,75);


Code for cross line in HTML5:

<canvas id="line" width="200" height="100" style="border:1px solid #d3d3d3;">
</canvas>


Code for cross line in JavaScript:

var e=document.getElementById("line");
var xx=e.getContext("2d");
xx.moveTo(0,0);
xx.lineTo(200,100);
xx.stroke();

Code for Circle in HTML5:

<canvas id="circ" width="200" height="100" style="border:1px solid #d3d3d3;">
</canvas>

Code for Circle in JavaScript:

var e=document.getElementById("circ");
var xx=e.getContext("2d");
xx.beginPath();
xx.arc(95,50,40,0,2*Math.PI);
xx.stroke();

Code for Text in HTML5:

<canvas id="text" width="200" height="100" style="border:1px solid #d3d3d3;">
</canvas>

Code for text in JavaScript:

var e=document.getElementById("text");
var xx=e.getContext("2d");
xx.font="30px Arial";
xx.strokeText("Hello World",10,50);


Comments

No responses found. Be the first to comment...


  • Do not include your name, "with regards" etc in the comment. Write detailed comment, relevant to the topic.
  • No HTML formatting and links to other web sites are allowed.
  • This is a strictly moderated site. Absolutely no spam allowed.
  • Name:
    Email: