HTML-1

Canvas vs. SVG

Canvas
- Elements are drawn programmatically
- Drawing is done with pixels
- Animations are not built in
- High performance for pixels-based drawing operations
- Resolution dependent
- No support for event handlers
- You can save the resulting image as .png or .jpg
- Well suited for graphic-intensive games

SVG
- Elements are part of the page's DOM (Document object model)
- Drawing is done with vectors
- Effects, such as animations are built in
- Based on standard XML syntax, which provides better accessibility
- Resolution independent
- Support for event handlers
- Not suited for game applications
- Best suited for applications with large rendering areas (for example, Google Maps)

You can actually use both SVG and canvas on the same page, if needed.
However, you cannot just draw SVG onto a canvas, or vice-versa.

Which of the following statements are true?

Select all that apply

SVG has better accessibility.

In Canvas, drawing is done with pixels.

Canvas contains built-in animations.

SVG needs scripts to draw elements.

Working with Canvas

The Canvas element can be transformed. As an example, a text is written on the canvas at the coordinates (10, 30).

ctx.font="bold 22px Tahoma";
ctx.textAlign="start";
ctx.fillText("start", 10, 30);Try It Yourself

Result:
The translate(x,y) method is used to move the Canvas.
x indicates how far to move the grid horizontally, and y indicates how far to move the grid vertically.

ctx.translate(100, 150);
ctx.fillText("after translate", 10, 30);Try It Yourself

In this example, the canvas is moved 100px to the right, and 150px down.
Result:
Canvas has several methods for drawing paths, boxes, circles, text, and adding images.

Which method is used to move the canvas element?

location()

translate()

transformation()

move()

The rotate() Method

The rotate() method is used to rotate the HTML5 Canvas. The value must be in radians, not degrees.

Here is an example that draws the same rectangle before and after rotation is set:

ctx.fillStyle = "#FF0000";
ctx.fillRect(10,10, 100, 100);

ctx.rotate( (Math.PI / 180) * 25); //rotate 25 degrees.

ctx.fillStyle = "#0000FF";
ctx.fillRect(10,10, 100, 100);Try It Yourself

The rotation will only affect drawings made after the rotation is done.

The rotation parameter is in:

Radians & degrees

Radians

Degrees

The scale() Method

The scale() method scales the current drawing. It takes two parameters:
- The number of times by which the image should be scaled in the X-direction.
- The number of times by which the image should be scaled in the Y-direction.

var canvas = document.getElementById('canvas1');
ctx =canvas.getContext('2d');
ctx.font="bold 22px Tahoma";
ctx.textAlign="start";
ctx.fillText("start", 10, 30);
ctx.translate(100, 150);
ctx.fillText("after translate", 0, 0);
ctx.rotate(1);
ctx.fillText("after rotate", 0, 0);
ctx.scale(1.5, 4);
ctx.fillText("after scale", 0,20);Try It Yourself

This will scale the canvas 1.5 times in the X-direction, and 4 times in Y-direction:
If you scale a drawing, all future drawings will also be scaled.

What method is used to increase or decrease the size of the current drawing?

______________________

HTML5 Forms

HTML5 brings many features and improvements to web form creation. There are new attributes and input types that were introduced to help create better experiences for web users.

Form creation is done in HTML5 the same way as it was in HTML4:

<form>
<label>Your name:</label>
<input id="user" name="username" type="text" />
</form>Try It Yourself

Use the novalidate attribute to avoid form validation on submissions.

Fill in the blanks:

<form>
   <_____type="text" name="name" />

</_____>

New Attributes

HTML5 has introduced a new attribute called placeholder. On <input> and <textarea> elements, this attribute provides a hint to the user of what information can be entered into the field.

<form>
<label for="email">Your e-mail address: </label>
<input type="text" name="email" placeholder="email@example.com" />
</form>Try It Yourself

Result:
The autofocus attribute makes the desired input focus when the form loads:

<form>
<label for="email">Your e-mail address: </label>
<input type="text" name="email" autofocus/>
</form>Try It Yourself

Result:
The required attribute tells the browser that the input is required.

Drag and drop from the options below to auto focus on the input and create a placeholder:

<form>
<input type="text" name="name"

______="Enter your name"

______/>

</form>

autoblur

hint

focus

autofocus

placeholder

Forms with Required Fields

The "required" attribute is used to make the input elements required.

<form autocomplete="off">
<label for="e-mail">Your e-mail address: </label>
<input name="Email" type="text" required />
<input type="submit" value="Submit"/>
</form>Try It Yourself

The form will not be submitted without filling in the required fields.

Result:
The autocomplete attribute specifies whether a form or input field should have autocomplete turned on or off.
When autocomplete is on, the browser automatically complete values based on values that the user has entered before.

HTML5 added several new input types:
- color
- date
- datetime
- datetime-local
- email
- month
- number
- range
- search
- tel
- time
- url
- week

New input attributes in HTML5:
- autofocus
- form
- formaction
- formenctype
- formmethod
- formnovalidate
- formtarget
- height and width
- list
- min and max
- multiple
- pattern (regexp)
- placeholder
- required
- step
Input types that are not supported by old web browsers, will behave as input type text.

Designate the username field as required, and focus on the name field when the page loads:

<form autocomplete="off">
<input name="name"
     type="text" _____/>

<br />
<input name="username"
     type="text"______/>

</form>

Creating a Search Box

The new search input type can be used to create a search box:

<input id="mysearch" name="searchitem" type="search" />Try It Yourself

Result:
You must remember to set a name for your input; otherwise, nothing will be submitted.

Fill in the blank to create a Search Box:

<input type="_____"/>

Search Options

The <datalist> tag can be used to define a list of pre-defined options for the search field:

<input id="car" type="text" list="colors" />
<datalist id="colors">
<option value="Red">
<option value="Green">
<option value="Yellow">
</datalist>Try It Yourself

Result:
<option> defines the options in a drop-down list for the user to select.
The ID of the datalist element must match with the list attribute of the input box.

Fill in the blanks to associate the input with the datalist:

<form>
<input type="text" name="color"

______="colors" />

<datalist id="_____">

<option value="Red">
   <option value="Blue">
   <option value="Green">

</____>

</form>

Creating More Fields

Some other new input types include email, url, and tel:

<input id="email" name="email" type="email" placeholder="example@example.com" />
<br />
<input id="url" name="url" type="url" placeholder="example.com" />
<br />
<input id="tel" name="tel" type="tel" placeholder="555.555.1211" />Try It Yourself

These are especially useful when opening a page on a modern mobile device, which recognizes the input types and opens a corresponding keyboard matching the field's type:
These new types make it easier to structure and validate HTML forms.

Which of the following is not a supported type for the input tag?

submit

planet

tel

url

Which choice is the correct HTML5 element for playing video files?

<movie>

<media>

<video>

The <canvas> element in HTML5 is used to:

create draggable elements

manipulate data in a database

draw graphics

display Excel records

Which tag contains the navigation?

<____>

sessionStorage stores data for the duration of how many session(s)?

three

two

multiple

one

What shape results from the following code?
<svg width="100" height="100">
<line x1="50" y1="0" x2="50" y2="100"
style="stroke:black" />
<line x1="0" y1="50" x2="100" y2="50"
style="stroke:black" />
</svg>

Minus sign

Tick sign

Vertical line

Plus sign