How to Make Canvas HTML5

Share:

hello everyone, today we'll discussing about canvas HTML5. The html5 <canvas> is used to draw graphics on web page. This element only make canvas item on web page, to drawing we used javascript.




Canvas Example

By default, canvas html5 is rectangular area with no border and no content.
The markup like this :

<canvas id="Canvas" width="200" height="100"></canvas>


This the markup should be

Drawing Line HTML5

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
</script>

</body>
</html>


This the markup should be

No comments

Mohon untuk berkomentar yang baik dan bijak