Introduction html 5 Canvas & SVG

2.  Ofir Fridman
 FE Developer
 Love code, technology, sport

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

7.  Games
 Chart & Graphs
 Advertising
 Logos
 Chart & Graphs
 Icons

8. (0,0)
X
Y

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

19. <svg height="200" width="200">
<text x="50" y="50" fill="red">Healow World</text>
Sorry, your browser does not support SVG.
</svg>
HTML
Result

20. <svg height="200" width="500">
<polyline points="20,20,100,20,100,120,200,120"
style="fill:none;stroke:red;stroke-width:3" />
</svg>
HTML
Result

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