HTML Canvas
Graphics
The HTML <canvas> element is used to draw graphics on a web
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.
What is HTML Canvas?
The HTML <canvas> element
is used to draw graphics, on the fly, via JavaScript.
The <canvas> element
is only a container for graphics. You must use JavaScript to actually draw the
graphics.
Canvas has several methods
for drawing paths, boxes, circles, text, and adding images.
Browser Support
The numbers in the table
specify the first browser version that fully supports the <canvas> element.
|
Element |
|||||
|
<canvas> |
4.0 |
9.0 |
2.0 |
3.1 |
9.0 |
Canvas Examples
A canvas is a rectangular
area on an HTML page. By default, a canvas has no border and no content.
The markup looks like this:
<canvas id="myCanvas" width="200" height="100"></canvas>
Note: Always
specify an id attribute (to be referred to in a script), and a width and height attribute
to define the size of the canvas. To add a border, use the style attribute.
Here is an example of a
basic, empty canvas:
Example
<canvas id="myCanvas" width="200" height="100" style="border:1px
solid #000000;">
</canvas>
Add a JavaScript
After creating the
rectangular canvas area, you must add a JavaScript to do the drawing.
Here are some examples:
Draw a Line
Example
<script>
var c =
document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();
</script>
Draw a Circle
Example
<script>
var c =
document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();
</script>
Draw a Text
Example
<script>
var c =
document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);
</script>
Stroke Text
Example
<script>
var c =
document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World", 10, 50);
</script>
Draw Linear Gradient
Example
<script>
var c =
document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Create gradient
var grd =
ctx.createLinearGradient(0, 0, 200, 0);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);
</script>
Draw Circular Gradient
Example
<script>
var c =
document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Create gradient
var grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);
</script>
Draw Image
<script>
var c =
document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img =
document.getElementById("scream");
ctx.drawImage(img, 10, 10);
</script>
HTML Canvas Tutorial
To learn more about <canvas>, please
read our HTML Canvas Tutorial.
HTML SVG
Graphics
SVG defines vector-based
graphics in XML format.
What is SVG?
- SVG
stands for Scalable Vector Graphics
- SVG
is used to define graphics for the Web
- SVG
is a W3C recommendation
The HTML <svg> Element
The HTML <svg> element is a container for SVG graphics.
SVG has several methods for
drawing paths, boxes, circles, text, and graphic images.
Browser Support
The numbers in the table
specify the first browser version that fully supports the <svg> element.
|
Element |
|||||
|
<svg> |
4.0 |
9.0 |
3.0 |
3.2 |
10.1 |
SVG Circle
Example
<!DOCTYPE html>
<html>
<body>
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
</body>
</html>
SVG Rectangle
Example
<svg width="400" height="100">
<rect width="400" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
</svg>
SVG Rounded Rectangle
Example
<svg width="400" height="180">
<rect x="50" y="20" rx="20" ry="20" width="150" height="150"
style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>
SVG Star
Example
<svg width="300" height="200">
<polygon points="100,10 40,198
190,78 10,78 160,198"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>
SVG Logo
SVG
Example
<svg height="130" width="500">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
</linearGradient>
</defs>
<ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" />
<text fill="#ffffff" font-size="45" font-family="Verdana" x="50" y="86">SVG</text>
Sorry, your browser does not support inline SVG.
</svg>
Differences Between SVG and Canvas
SVG is a language for
describing 2D graphics in XML.
Canvas draws 2D graphics,
on the fly (with a JavaScript).
SVG is XML based, which
means that every element is available within the SVG DOM. You can attach
JavaScript event handlers for an element.
In SVG, each drawn shape is
remembered as an object. If attributes of an SVG object are changed, the
browser can automatically re-render the shape.
Canvas is rendered pixel by
pixel. In canvas, once the graphic is drawn, it is forgotten by the browser. If
its position should be changed, the entire scene needs to be redrawn, including
any objects that might have been covered by the graphic.
Comparison of Canvas and SVG
The table below shows some
important differences between Canvas and SVG:
|
Canvas |
SVG |
|
|
