html 5 canvas & svg
TRANSCRIPT
![Page 1: HTML 5 Canvas & SVG](https://reader034.vdocument.in/reader034/viewer/2022042501/58a39d861a28abb1348b641b/html5/thumbnails/1.jpg)
HTML 5 Canvas & SVG
![Page 2: HTML 5 Canvas & SVG](https://reader034.vdocument.in/reader034/viewer/2022042501/58a39d861a28abb1348b641b/html5/thumbnails/2.jpg)
ME Ofir Fridman FE Developer Love code, technology, sport
![Page 3: HTML 5 Canvas & SVG](https://reader034.vdocument.in/reader034/viewer/2022042501/58a39d861a28abb1348b641b/html5/thumbnails/3.jpg)
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.
![Page 4: HTML 5 Canvas & SVG](https://reader034.vdocument.in/reader034/viewer/2022042501/58a39d861a28abb1348b641b/html5/thumbnails/4.jpg)
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
![Page 7: HTML 5 Canvas & SVG](https://reader034.vdocument.in/reader034/viewer/2022042501/58a39d861a28abb1348b641b/html5/thumbnails/7.jpg)
Games Chart & Graphs Advertising
When to use an Canvas When to use an SVG
Logos Chart & Graphs Icons
![Page 8: HTML 5 Canvas & SVG](https://reader034.vdocument.in/reader034/viewer/2022042501/58a39d861a28abb1348b641b/html5/thumbnails/8.jpg)
Canvas & SVG Grid System(0,0)
X
Y
![Page 9: HTML 5 Canvas & SVG](https://reader034.vdocument.in/reader034/viewer/2022042501/58a39d861a28abb1348b641b/html5/thumbnails/9.jpg)
Canvas
![Page 10: HTML 5 Canvas & SVG](https://reader034.vdocument.in/reader034/viewer/2022042501/58a39d861a28abb1348b641b/html5/thumbnails/10.jpg)
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
![Page 11: HTML 5 Canvas & SVG](https://reader034.vdocument.in/reader034/viewer/2022042501/58a39d861a28abb1348b641b/html5/thumbnails/11.jpg)
Canvas API Function
![Page 12: HTML 5 Canvas & SVG](https://reader034.vdocument.in/reader034/viewer/2022042501/58a39d861a28abb1348b641b/html5/thumbnails/12.jpg)
Canvas API Properties
![Page 13: HTML 5 Canvas & SVG](https://reader034.vdocument.in/reader034/viewer/2022042501/58a39d861a28abb1348b641b/html5/thumbnails/13.jpg)
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
![Page 14: HTML 5 Canvas & SVG](https://reader034.vdocument.in/reader034/viewer/2022042501/58a39d861a28abb1348b641b/html5/thumbnails/14.jpg)
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();
![Page 15: HTML 5 Canvas & SVG](https://reader034.vdocument.in/reader034/viewer/2022042501/58a39d861a28abb1348b641b/html5/thumbnails/15.jpg)
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
![Page 16: HTML 5 Canvas & SVG](https://reader034.vdocument.in/reader034/viewer/2022042501/58a39d861a28abb1348b641b/html5/thumbnails/16.jpg)
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();
![Page 17: HTML 5 Canvas & SVG](https://reader034.vdocument.in/reader034/viewer/2022042501/58a39d861a28abb1348b641b/html5/thumbnails/17.jpg)
1 HTML Canvas element 1 moving arc 1 moving paddle (mouse\keyboard) 25 bricks colorful bricks
Canvas Breakout Game
![Page 18: HTML 5 Canvas & SVG](https://reader034.vdocument.in/reader034/viewer/2022042501/58a39d861a28abb1348b641b/html5/thumbnails/18.jpg)
SVG = Scalable Vector Graphics
![Page 19: HTML 5 Canvas & SVG](https://reader034.vdocument.in/reader034/viewer/2022042501/58a39d861a28abb1348b641b/html5/thumbnails/19.jpg)
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
![Page 20: HTML 5 Canvas & SVG](https://reader034.vdocument.in/reader034/viewer/2022042501/58a39d861a28abb1348b641b/html5/thumbnails/20.jpg)
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
![Page 21: HTML 5 Canvas & SVG](https://reader034.vdocument.in/reader034/viewer/2022042501/58a39d861a28abb1348b641b/html5/thumbnails/21.jpg)
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
![Page 22: HTML 5 Canvas & SVG](https://reader034.vdocument.in/reader034/viewer/2022042501/58a39d861a28abb1348b641b/html5/thumbnails/22.jpg)
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