Enter your email id to get regular update free
Login
Your Email
Pasword
Home
Write
Trending
History
Liked
Earning

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 702 views