HTML 5 Canvas & SVG

ME 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.

What is HTML Canvas? What is SVG?

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 VS SVGCanvas SVGScript - Drawing via code Document  - Drawing via XMLRendered pixel by pixel Scalable Vector Graphics

No support for event handlers Support for event handlers

Better performance Poor performance when to many items

Canvas Supported Browsers

SVG Supported Browsers

Games Chart & Graphs Advertising

When to use an Canvas When to use an SVG

Logos Chart & Graphs Icons

Canvas & SVG Grid System(0,0)

X

Y

Canvas

Healow World Canvas Example<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

Canvas API Function

Canvas API Properties

API Logic Break DownPaths

Method Descriptionfill() Fills the current drawing (path)stroke() Actually draws the path you have definedbeginPath() Begins a path, or resets the current pathmoveTo() Moves the path to the specified point in the canvas, without creating a

lineclosePath() Creates a path from the current point back to the starting pointlineTo() Adds a new point and creates a line from that point to the last specified

point in the canvasclip() Clips a region of any shape and size from the original canvasquadraticCurveTo() 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 tangentsisPointInPath() Returns true if the specified point is in the current path, otherwise false

Example to lineTolineTo 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 pathcanvas.lineWidth = 5;canvas.strokeStyle = "red"canvas.moveTo(80, 100);canvas.lineTo(200, 100);canvas.stroke();

Example to rect

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

Example to arc

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();

1 HTML Canvas element 1 moving arc 1 moving paddle (mouse\keyboard) 25 bricks colorful bricks

Canvas Breakout Game

SVG = Scalable Vector Graphics

Healow World SVG Example

<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

Example to polyline

<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

Example to rect<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

Example to circle

<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