New Input Types in Html5

Html5 comes with new input types for forms that allows you do a better input control and validation.

Email

This input type ensures that the value entered is a valid email address.

Email:

<input type="email">

URL

This input type ensures that the value entered is a valid url.

URL:

<input type="url">

Number

The value must be a floating point number. When you enter a value which is not a number, it will be cleared after the focus moves away.

Number:

<input type="number"> 

Html Conditional Comments for Internet Explorer

Conditional comments are used to detect special versions of browsers. Browser detection is used for browser compatibility and correct rendering. Here are some helpful tables for using "Html Comments";

Comment syntax table:

Comment type	Syntax or possible value
standard HTML comment	<!-- Comment content  -->
downlevel-hidden	<!--[if expression]> HTML <![endif]-->
downlevel-revealed	<![if expression]> HTML <![endif]>

Supported features table:

Item	Example	Comment
IE	[if IE]	The string "IE" is a feature corresponding to the version of Internet Explorer used to view the Web page.
value	[if IE 7]	An integer or floating point numeral corresponding to the version of the browser. Returns a Boolean value of true if the version number matches the browser version.
WindowsEdition	[if WindowsEdition]	Internet Explorer 8 on Windows 7. The string "WindowsEdition" is a feature corresponding to the edition of Windows used to view the Web page.
value	[if WindowsEdition 1]	An integer corresponding to the edition of Windows used to view the Web page. Returns a Boolean value of true if the value matches the edition being used.
true	[if true]	Always evaluates to true.
false	[if false]	Always evaluates to false.

How to: Draw an Image in HTML5 Canvas

I will show you an example how to set up a canvas and draw in it using "HTML5 canvas and image object".

First, you must insert a canvas in the html body:

<canvas id="mycanvas" width="200" height="200"></canvas>

Then you can draw the image using 2D canvas context and image object. Like this:

var canvas = document.getElementById('mycanvas');
var drawingContext = canvas.getContext('2d');
var img = new Image();
img.src = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidEBkMVnAtEEzw8S26ScVRKgr4KzU4dsFBwtj-hPKTXgmM2zNYxYErmDligVS6XcWjEem_v_9k1s00Vo8ObVKQtDZV90LYX_J895q6lTJRQwHDsDuOFiPcU9VHBuCMvXgTeEHN_6WKQws/s1600/car-logo.png";
drawingContext.drawImage(img, 50, 50);

In the code above we get the canvas element by using the id. Then we created the 2D context instance by calling getContext function of the context element.

Html5 Tip: How Can I Reset a Canvas

Changing the width or height of a canvas element will remove its contents and reset all the properties (like fillstyle) of its drawing context to their default values. You don’t even need to change the width; you can simply set it to its current value, like this:

var canvas = document.getElementById("mycanvas");
canvas.width = canvas.width;

HTML5 Canvas Tag

The canvas element can be used for rendering graphs, game graphics, or other visual images on the fly. Canvas is currently a "2D" base for drawing on using JavaScript. "3D API" is not supported yet. To use canvas element; you must define the canvas tag and then "draw shapes using Javascript functions".

The definition of the canvas element is like this:

<canvas id="mycanvas" height="200" width="200"></canvas>

this is a blank white space that you can draw. Once you define the tag, you can draw on it using the 2D drawing context. You can get the drawing context using .getContext('2d') function. Using 2D drawing context you can draw rectangle, path, text, gradients and images.

You can "draw a rectangle" like this:

function draw_rectange() {
  var canvas = document.getElementById("mycanvas");
  var drawingContext = canvas.getContext("2d");
  drawingContext.fillStyle = "#FF0000";
  drawingContext.fillRect(40, 30, 120, 80);
}