UNIT 8

DRAW

ING

WIT

H T

HE H

TML5

CANVAS E

LEMEN

TS AN

D F

ORM

S

OBJECTIVES

CO1 Describe various components of the Open Web Platform.

CO2 Create a website using HTML5.

2

LEARNING OUTCOMESLO43 Draw on a Web page using the

<canvas> element.LO44 Display images on a Web page

using the <canvas> element.LO45 Explain the similarities and

differences among the <canvas> element, SVG, and Flash.

LO46 Describe the new functionality supported in HTML5 forms.

LO47 Create a form that uses HTML5 features.

LO48 Create a form that performs input validation.

3

USING THE CANVAS ELEMENTThe HTML5 <canvas> element can be used to draw, add images, create slideshows, display animations, and even build games. It can also be used for other things, such as: Dynamic graphs such as stock tickers Photo galleries Fancy fonts Online visual tools such as mind maps

and image editors

For example:<canvas width="350" height="450" id="canvas1"></canvas>

4

USING THE CANVAS ELEMENT

For any browsers that don’t support HTML5, you should include the following text inside the <canvas> tag:

<canvas width="350" height="450" style="border:solid thin black"> This page requires an HTML5 compliant browser to render correctly.

Other browsers may not see anything.

</canvas>

5

USING THE CANVAS ELEMENT

6

DRAWING SQUARES ON A CANVAS

7

HIDE AND SHOW A SQUARE ON A CANVAS

8

DRAWING RECTANGLES WITH GRADIENTS ON A CANVAS

9

DRAWING LINES AND POLYGONS

10

DRAWING AN OCTAGON ON A CANVAS

11

DRAWING A LINE WITH THE 3 JOIN TYPES

12

DRAWING CIRCLES ON A CANVAS

13

WRITING FONTS AND TEXT ON A CANVAS

14

SCALING AND CLIPPING IMAGES

15

ADDING PATTERNS OF AN IMAGE ON A CANVAS

16

DIFFERENT FEATURES OF CANVAS, SVG, AND FLASH(From TABLE 10.1)

17

Canvas SVG Flash

Vector graphics

Canvas is bitmap, but can draw vectors.

SVG is vector based, but you can load bitmaps.

Flash is vector based.

Inline HTML Canvas is a native HTML element.

SVG is XML and must be embedded.

Flash is SWF and must be embedded with a plug-in.

Scripts required

Canvas won’t display anything with JavaScript turned off.

SVG can be written completely offline and loaded.

Flash requires a plug-in, but can be written completely offline.

Program support

Few if any commercial programs exist for building canvas graphics.

Many vector graphics programs can write SVG.

Commercial applications are available to write Flash.

DIFFERENT FEATURES OF CANVAS, SVG, AND FLASH(From TABLE 10.1 – continued)

18

Canvas SVG Flash

Speed of rendering

Canvas renders images very quickly.

SVG renders images slower than canvas.

Flash renders images slower than canvas.

Event handling

Users can only click on the entire canvas.

Users can click on individual elements in SVG.

Users can click on any element in Flash.

User adoption

Canvas is HTML5 and so requires modern browsers.

SVG requires modern browsers.

Flash has been around a long time and has wide-spread support.

Search engine optimization (SEO)

Canvas is text based and so is SEO friendly.

SVG is text based so is SEO friendly.

Flash is an embedded SWF file and is harder for search engines to read.

NEW FEATURES IN HTML5 FORMS Most of the features of HTML5 forms are

things that can already be done with scripts, but now they are built into the HTML5, which reduces the page load time and makes building forms easier.

Placeholder text and autofocus make the forms easier for end users.

Autocomplete combined with datalists helps the data the forms deliver to be more consistent and accurate.

19

PLACEHOLDER TEXT AND AUTOFOCUS

20

AUTOCOMPLETE AND DATALISTS

21

HTML5 INPUT TYPES

22

HTML5 INPUT TYPES

23

HTML5 FORM VALIDATION

One of the most useful features of HTML5 forms is the validation. For example:

Set up rules for required fields

Check for valid formats

• Number range, max, min, decimal places, +/- signs in number fields

• Email addresses

• Phone numbers

• Credit card numbers

• SSN

• Birthday 24

HTML5 FORM VALIDATION

25

HTML5 FORM VALIDATION

26

HTML5 FORM VALIDATION

27