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