The document compares and contrasts the Canvas and SVG elements in HTML. Canvas uses JavaScript to draw graphics via code and is rendered pixel by pixel, while SVG uses XML to draw graphics as scalable vector shapes. Canvas is better for games, charts, and advertising due to its faster rendering, while SVG is better for icons, logos, and charts due to its scalability and support for event handlers. Several common drawing methods like rectangles, circles, paths, and text are demonstrated for both Canvas and SVG.
3. The HTML <canvas> element is
used to draw graphics
The <canvas> element is only a
container for graphics. You must
use a script to actually draw the
graphics.
Canvas has several methods for
drawing paths, boxes, circles, text,
and adding images.
SVG stands for Scalable Vector
Graphics
The HTML <svg> element is a
container for SVG graphics.
SVG has several methods for
drawing paths, boxes, circles, text,
and graphic images.
4. Canvas SVG
Script - Drawing via code Document - Drawing via XML
Rendered pixel by pixel Scalable Vector Graphics
No support for event handlers Support for event handlers
Better performance Poor performance when to many
items
10. <canvas id="canvas">
This Browser Not Support
</canvas>
var canvasElement = document.getElementById("canvas");
var canvas = canvasElement.getContext("2d");
canvas.font = "50px arial";
canvas.fillText("Hello World", 10, 50);// (text, x, y)
canvas{
border:1px solid;
width: 50%;
height: 50%
}
HTML
JS
CSS
13. Paths
Method Description
fill() Fills the current drawing (path)
stroke() Actually draws the path you have defined
beginPath() Begins a path, or resets the current path
moveTo() Moves the path to the specified point in the canvas, without creating a
line
closePath() Creates a path from the current point back to the starting point
lineTo() Adds a new point and creates a line from that point to the last specified
point in the canvas
clip() Clips a region of any shape and size from the original canvas
quadraticCurveT
o()
Creates a quadratic Bézier curve
bezierCurveTo() Creates a cubic Bézier curve
arc() Creates an arc/curve (used to create circles, or parts of circles)
arcTo() Creates an arc/curve between two tangents
isPointInPath() Returns true if the specified point is in the current path, otherwise false
14. lineTo signature context.lineTo(x,y);
var canvasElement = document.getElementById("canvas");
var canvas = canvasElement.getContext("2d");
canvas.beginPath();
canvas.moveTo(10, 10);
canvas.lineTo(80, 10);
canvas.stroke();
canvas.beginPath();
canvas.moveTo(80, 10);
canvas.lineTo(80, 100);
canvas.stroke();
canvas.beginPath(); //begins a path, or resets the current path
canvas.lineWidth = 5;
canvas.strokeStyle = "red"
canvas.moveTo(80, 100);
canvas.lineTo(200, 100);
canvas.stroke();
15. rect signature context.rect(x,y,width,height);
var canvasElement = document.getElementById("canvas");
var canvas = canvasElement.getContext("2d");
canvas.rect(20,20,100,100);
canvas.fillStyle="#0000FF";
canvas.fill();// Fills the current drawing (path)
canvas.lineWidth = 5;
canvas.strokeStyle = "#00FF00";
canvas.stroke(); //Actually draws the path you have defined
16. arc signature context.arc(centerX,centerY,radius,startAngle,endAngle,counterclockwise);
Start angle
End angle
Center x,y
var canvasElement = document.getElementById("canvas");
var canvas = canvasElement.getContext("2d");
var centerX = canvasElement.width / 2;
var centerY = canvasElement.height / 2;
var radius = 50;
var startAngle = 0;
var endAngle = 2 * Math.PI;
canvas.beginPath();
canvas.arc(centerX, centerY, radius, startAngle, endAngle);
canvas.stroke();
17. 1 HTML Canvas element
1 moving arc
1 moving paddle (mousekeyboard)
25 bricks colorful bricks
21. <svg width="400" height="110">
<rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
Sorry, your browser does not support SVG.
</svg>
HTML
Result
22. <svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="red" stroke-width="2" fill="blue" />
Sorry, your browser does not support SVG.
</svg>
HTML
Result