 Ofir Fridman

 FE Developer
 Love code, technology, sport
 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.
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
 Logos  Games
 Chart & Graphs  Chart & Graphs
 Icons  Advertising
(0,0)
X

Y
HTML
<canvas id="canvas">
This Browser Not Support
</canvas>

JS
var canvasElement = document.getElementById("canvas");
var canvas = canvasElement.getContext("2d");
canvas.font = "50px arial";
canvas.fillText("Hello World", 10, 50);// (text, x, y)

CSS
canvas{
border:1px solid;
width: 50%;
height: 50%
}
 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 Creates a quadratic Bézier curve
o()
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
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();
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
 arc signature context.arc(centerX,centerY,radius,startAngle,endAngle,counterclockwise);

var canvasElement = document.getElementById("canvas");

var canvas = canvasElement.getContext("2d");
End angle
var centerX = canvasElement.width / 2;
var centerY = canvasElement.height / 2;
var radius = 50;
var startAngle = 0; Center x,y Start angle
var endAngle = 2 * Math.PI;

canvas.beginPath();
canvas.arc(centerX, centerY, radius, startAngle, endAngle);
canvas.stroke();
 1 HTML Canvas element
 1 moving arc
 1 moving paddle (mouse\keyboard)
 25 bricks colorful bricks
HTML
<svg height="200" width="200">
<text x="50" y="50" fill="red">Healow World</text>
Sorry, your browser does not support SVG.
</svg>

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

Result
HTML
<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>

Result
HTML
<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>

Result