HTML Canvas Browser Support
Graphics The numbers in the table specify the first browser version that fully
supports the <canvas> element.
Element
The HTML <canvas> element is used to draw graphics on a web <canvas> 4.0 9.0 2.0
page.
The graphic to the left is created with <canvas>. It shows four
elements: a red rectangle, a gradient rectangle, a multicolor
rectangle, and a multicolor text.
Canvas Examples
A canvas is a rectangular area on an HTML page. By default, a canvas
has no border and no content.
What is HTML Canvas? The markup looks like this:
The HTML <canvas> element is used to draw graphics, on the fly, via
JavaScript. <canvas id="myCanvas" width="200" height="100"></canvas>
The <canvas> element is only a container for graphics. You must use Note: Always specify an id attribute (to be referred to in a script),
JavaScript to actually draw the graphics. and a width and height attribute to define the size of the canvas.
To add a border, use the style attribute.
Canvas has several methods for drawing paths, boxes, circles, text,
and adding images. Here is an example of a basic, empty canvas:
Example <script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0, 0);
<canvas id="myCanvas" width="200" height="100" style="border:1 ctx.lineTo(200, 100);
px solid #000000;"> ctx.stroke();
</canvas> </script>
Try it Yourself » Try it Yourself »
ADVERTISEMENT
Draw a Circle
Example
Add a JavaScript
After creating the rectangular canvas area, you must add a JavaScript <script>
to do the drawing. var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
Here are some examples: ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();
Draw a Line </script>
Try it Yourself »
Example
Draw a Text Try it Yourself »
Example
Draw Linear Gradient
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d"); Example
ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);
</script> <script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
Try it Yourself »
// Create gradient
var grd = ctx.createLinearGradient(0, 0, 200, 0);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
Stroke Text
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);
Example </script>
<script> Try it Yourself »
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World", 10, 50);
</script> Draw Circular Gradient
Example Try it Yourself »
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d"); HTML Canvas Tutorial
// Create gradient
var grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100); To learn more about <canvas>, please read our HTML Canvas
grd.addColorStop(0, "red"); Tutorial.
grd.addColorStop(1, "white");
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);
</script>
Try it Yourself »
Draw Image HTML SVG Graphics
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d"); SVG defines vector-based graphics in XML format.
var img = document.getElementById("scream");
ctx.drawImage(img, 10, 10);
</script>
What is SVG?
SVG stands for Scalable Vector Graphics
SVG is used to define graphics for the Web
SVG Circle
SVG is a W3C recommendation
Example
The HTML <svg> Element <!DOCTYPE html>
<html>
<body>
The HTML <svg> element is a container for SVG graphics.
SVG has several methods for drawing paths, boxes, circles, text, and <svg width="100" height="100">
graphic images. <circle cx="50" cy="50" r="40" stroke="green" stroke-
width="4" fill="yellow" />
</svg>
</body>
Browser Support </html>
The numbers in the table specify the first browser version that fully
supports the <svg> element.
Element
<svg> 4.0 9.0 3.0
