Enter your email id to get regular update free
Login
Your Email
Pasword

What is HTML5 Canvas?

The HTML canvas is used to draw graphics on a web page.

The HTML canvas is used to draw graphics, on the fly, via JavaScript.It  is only a container for graphics use JavaScript to actually draw the graphics.
Canvas has different methods for drawing paths, boxes, circles, text, and adding images etc.
A canvas is a rectangular area on an HTML page. By default, a canvas has no border and no content.
<canvas id="myCanvas" width="400" height="200">

For Drawing a circle:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();

Draw a Text in a Canvas:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Your Text", 10, 50);

Draw a Stroke Text:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Your Text", 10, 50);

Draw an Image:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img, 10, 10);

HTML5
Canvas
HTML Graphics
Ayesha
Tech writer at newsandstory
Total 215 views