Tutorial 16 - Graphics and Imaging

Graphics brings life to applications. JavaScript allows creation and modification of images using HTML5 canvasobjects. This basic tutorial introduces some fundamental concepts of graphics and imaging. A more complete tutorial can be found at Mozilla's Canvas Tutorial.

The Canvas Shapes&Pat hs

Styles & Patterns Transforms&Composit es

Using Imag es Text, Shad ows, Fonts

The Canvas
HTML 5 introduces the canvas element which allows JavaScript 2D objects to be used in documents. Artists tend to think in terms of a canvas surface as the foundation for their images and graphics. The canvas origin (0,0) is set at theupper left corner. Output to the canvas takes place through a graphics context encapsulated by the Graphics class.
<canvas id="canvas" width='100' height='100'> <p>Sorry: Browser does not support Graphics Canvas</p></canvas>

Note: Not all browsers implement the canvas element. Include either a text or image element inside any canvas element to warn users! Also use getContext(apiName) to escape functions that require canvas! Look ahead in the tutorial for Shapes and Styles.

Show Graphic

Shapes and Paths

There is only one primitive shape: the rectangle. It has three constructors: clearRect(x,y,width,height),fillRect(x,y,width,height) and strokeRect(x,y,width,height). Paths are used for more complex shapes. Paths are drawn with beginPath(), moveTo(x,y) [pen up], lineTo(x,y) [pen down], closePath(), stroke() [for outlines] and fill() [for filled shapes].

Show Graphic

Arcs are drawn with arc(x,y,radius,sAng,eAng,rotFlag). sAng and eAng are in radians (note: a simple conversion isvar radians=(Math.PI/180)*degrees). rotFlag is boolean.

Show Graphic

Show Graphic

Bezier curves are used to draw complex shapes. They have either one: quadraticCurveTo(cp1x,cp1y,x,y) or two:bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)control points.

Show Graphic

Styles and Patterns

Fill patterns control how a drawn object is filled in with ink. Color is the common fill pattern used. Inkwells are filled with fillStyle=colorVal and strokeStyle=colorVal. colorVal has several formats: hex (eg #rrggbb), named (eg red), rgb (eg rgb(r, g, b)) and alphaTransparency (eg rgba(r, g, b, a). Line strokes can be styled in several ways. The properties are lineWidth [int], lineCap [butt|round|square] and lineJoin [round|bevel|mitre]. mitreLimit can be set and if exceeded bevel style is forced.

Gradient objects are created with createLinearGradient(x1, y1, x2, y2) or createRadialGradient(x1, y1, r1, x2, y2, r2). colors are added with addColorStop(posn, colorVal). posn can be from 0 to 1.

Show Graphic

Pattern objects are created with createPattern(img, repVal). repVal is one of repeat, repeat-x, repeat-y, no-repeat. Refer to next section for img.

Transformations & Composites

Transformation methods include translate, rotate, scale and the generic transform. Objects are normally placed on top of the canvas, covering previous objects. globalCompositeOperation allows placing under another object or other more complex method of masking. Clipping provides complex masking screens.

Using Images
Images can be loaded from a file and drawn to the canvas for editing. Preloading is recommended. They can then be scaled and/or sliced (ie cropped).

Show Graphic

Text, Shadows, Fonts

Text can be added to a canvas using the properties: font, textAlign & textBase; and the methods: fillText(txt,x,y[,width]) & strokeText(txt,x,y[,width]). Shadows are drawn using the properties: shadowOffsetX, shadowOffsetY, shadowBlur and shadowColor. The use of text objects in canvas is documented atdeveloper.mozilla.org and Whatwg.