Scribd
Upload
166 views

HTML 5 Canvas & SVG

The document provides information about HTML canvas and SVG elements. It includes definitions of canvas and SVG, their differences, and examples of common drawing methods for paths, boxes, circles, and text for each. It also lists some common uses of canvas and SVG like games, charts, icons, and advertising.

Uploaded by

mani weber
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
166 views

HTML 5 Canvas & SVG

The document provides information about HTML canvas and SVG elements. It includes definitions of canvas and SVG, their differences, and examples of common drawing methods for paths, boxes, circles, and text for each. It also lists some common uses of canvas and SVG like games, charts, icons, and advertising.

Uploaded by

mani weber
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 22

 Ofir Fridman

 FE Developer
 Love code, technology, sport
 The HTML <canvas> element is  SVG stands for Scalable Vector
used to draw graphics Graphics
 The <canvas> element is only a  The HTML <svg> element is a
container for graphics. You must container for SVG graphics.
use a script to actually draw the
graphics.  SVG has several methods for
drawing paths, boxes, circles, text,
 Canvas has several methods for and graphic images.
drawing paths, boxes, circles, text,
and adding 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

You might also like