UNIT 8 DRAWING WITH THE HTML5 CANVAS ELEMENTS AND FORMS

OBJECTIVES  CO1 Describe various components of the Open Web Platform.  CO2 Create a website using HTML5. 2

LEARNING OUTCOMES LO43 Draw on a Web page using the element. LO44 Display images on a Web page using the element. LO45 Explain the similarities and differences among the 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 ELEMENT The HTML5 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: 4

USING THE CANVAS ELEMENT For any browsers that don’t support HTML5, you should include the following text inside the tag: This page requires an HTML5 compliant browser to render correctly. Other browsers may not see anything. 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 CanvasSVGFlash Vector graphicsCanvas is bitmap, but can draw vectors. SVG is vector based, but you can load bitmaps. Flash is vector based. Inline HTMLCanvas is a native HTML element. SVG is XML and must be embedded. Flash is SWF and must be embedded with a plug-in. Scripts requiredCanvas 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 CanvasSVGFlash Speed of rendering Canvas renders images very quickly. SVG renders images slower than canvas. Flash renders images slower than canvas. Event handlingUsers can only click on the entire canvas. Users can click on individual elements in SVG. Users can click on any element in Flash. User adoptionCanvas 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 addresses Phone numbers Credit card numbers SSN Birthday 24

HTML5 FORM VALIDATION 25

HTML5 FORM VALIDATION 26

HTML5 FORM VALIDATION 27