Lab 6: Drawing with Canvas - Due: March 9

For reference, review a Drawing Tutorial here: Drawing Tutorial


Create a drawing (or drawings) using canvas, which includes all of the features shown in the example landscape pictured below. You may be creative and add new elements and effects, but your drawing should include all of the drawing properties and methods summarized in the following tables.

Colors, Styles, and Shadows

The fill, stroke and shadow style properties are typically applied to a graphics context variable, and remain in effect until a different value is set for that property.

Property Description
fillStyle Sets or returns the color, gradient, or pattern used to fill the drawing
strokeStyle Sets or returns the color, gradient, or pattern used for strokes
shadowColor Sets or returns the color to use for shadows
shadowBlur Sets or returns the blur level for shadows
shadowOffsetX Sets or returns the horizontal distance of the shadow from the shape
shadowOffsetY Sets or returns the vertical distance of the shadow from the shape

Method Description
rgba(r, g, b, alpha) creates a color with opacity/transparency given by alpha

Line Styles

Property Description
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
lineWidth Sets or returns the current line width
miterLimit Sets or returns the maximum miter length


Method Description
fillRect() Draws a "filled" rectangle
strokeRect() Draws a rectangle (no fill)
clearRect() Clears the specified pixels within a given rectangle

Paths, used to draw custom shapes

Method Description
fill() Fills the current drawing object (path)
stroke() Draws an outline on the path you have defined
beginPath() Begins a path, or resets the current path
moveTo() Moves the path location to the specified point in the canvas, without creating a line
lineTo() Adds a new point and creates a line from that point to the last specified point in the canvas
closePath() Creates a path from the current point back to the starting point
arc() Creates an arc/curve (used to create circles, or parts of circles)


Property Description
font Sets or returns the current font properties for text content
textBaseline Sets or returns the current text baseline used when drawing text

Method Description
fillText() Draws filled text on the canvas
strokeText() Draws text on the canvas (outline of characters with no fill)

landscape drawing example

-- RobertKasper - 2015-03-04

Topic attachments
I Attachment Action Size Date Who Comment
Jpgjpg landscape-example.jpg manage 8.7 K 2015-03-04 - 18:25 RobertKasper  
Topic revision: r2 - 2015-03-04 - RobertKasper
This site is powered by the TWiki collaboration platformCopyright &© by the contributing authors. All material on this collaboration platform is the property of the contributing authors.
Ideas, requests, problems regarding TWiki? Send feedback