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);