HTML: Canvas and SVG
What are the upper left coordinates of the canvas?
(0,0)
<defs>
A container for referenced elements
What can HTML Canvas do?
Draw Text and Graphics, and Can be Animated and Interactive
fillText()
Draws "filled" text on the canvas
fillRect()
Draws a "filled" rectangle
strokeRect()
Draws a rectangle (no fill)
drawImage()
Draws an image, canvas, or video onto the canvas
strokeText()
Draws text on the canvas (no fill)
fill()
Fills the current drawing (path)
<desc>
A text-only description for container elements or graphic elements in SVG (user agents may display the text as a tooltip)
stroke()
Actually draws the path you have defined
lineTo()
Adds a new point and creates a line to that point from the last specified point in the canvas
<animateTransform>
Animates a transformation attribute on a target element, thereby allowing animations to control translation, scaling, rotation and/or skewing
beginPath()
Begins a path, or resets the current path
What does SVG stand for?
Scalable Vector Graphics
shadowBlur
Sets or returns the blur level for shadows
shadowColor
Sets or returns the color to use for shadows
strokeStyle
Sets or returns the color, gradient, or pattern used for strokes
fillStyle
Sets or returns the color, gradient, or pattern used to fill the drawing
lineWidth
Sets or returns the current line width
textBaseline
Sets or returns the current text baseline used when drawing text
shadowOffsetX
Sets or returns the horizontal distance of the shadow from the shape
miterLimit
Sets or returns the maximum miter length
lineCap
Sets or returns the style of the end caps for a line
lineJoin
Sets or returns the type of corner created, when two lines meet
shadowOffsetY
Sets or returns the vertical distance of the shadow from the shape
addColorStop()
Specifies the colors and stop positions in a gradient object
fillText
draws "filled" text on the canvas
strokeText
draws text on the canvas
<canvas>
element is used to draw graphics on a web page
What can be animated in SVG files?
every element and every attribute
What are the most important properties and methods used to draw text in canvas?
font, fillText, and strokeText
What is canvas best suited for?
game applications
How does SVG define graphics?
in the XML format
Canvas has several methods for drawing what?
paths, boxes, circles, text, and adding images
What are the advantages of using SVG
they can be edited with any text editor they are scalable and zoomable they do not loose any quality if they are zoomed or resized they can be searched, indexed, scripted, and compressed
True or False: Canvas is resolution dependent
true
getContext("2d")
used to show what type of object, text, or image you are trying to put onto the website
How can you save your canvas image?
using .png or .jpg
How can SVG images be made?
using any text editor
How can you add a border to a canvas?
using the style attribute
pixels
value used for the width and height attributes
SVG is used to define what for the Web?
vector-based graphics
How can you draw HTML Canvas?
via JavaScript
<circle>
Defines a circle
<line>
Defines a line
<linearGradient>
Defines a linear gradient. Linear gradients fill the object by using a vector, and can be defined as horizontal, vertical or angular gradients.
<path>
Defines a path
<rect>
Defines a rectangle
<text>
Defines a text
<image>
Defines an image
<polyline>
Defines any shape that consists of only straight lines
<animate>
Defines how an attribute of an element changes over time
font-face
Describes the characteristics of a font
<animateMotion>
Causes a referenced element to move along a motion path
clearRect()
Clears the specified pixels within a given rectangle
createLinearGradient()
Creates a linear gradient (to use on canvas content)
<a>
Creates a link around SVG elements
closePath()
Creates a path from the current point back to the starting point
createRadialGradient()
Creates a radial/circular gradient (to use on canvas content)
rect()
Creates a rectangle
<svg>
Creates an SVG document fragment
arc()
Creates an arc/curve (used to create circles, or parts of circles)
arcTo()
Creates an arc/curve between two tangents
<tspan>
Identical to the <text> element but can be nested inside text tags and inside itself
<marker>
Markers can be placed on the vertices of lines, polylines, polygons and paths. These elements can use the marker attributes "marker-start", "marker-mid" and "marker-end"' which inherit by default or can be set to 'none' or the URI of a defined marker. You must first define the marker before you can reference it via its URI. Any kind of shape can be put inside marker. They are drawn on top of the element they are attached to
moveTo()
Moves the path to the specified point in the canvas, without creating a line
<tref>
References any <text> element in the SVG document and reuse it
createPattern()
Repeats a specified element in the specified direction
transform()
Replaces the current transformation matrix for the drawing
setTransform()
Resets the current transform to the identity matrix. Then runs transform()
getImageData()
Returns an ImageData object that copies the pixel data for the specified rectangle on a canvas
measureText()
Returns an object that contains the width of the specified text
<g>
Used to group together elements