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);
}

How to detect HTML5 support

There are four basic techniques for detecting whether a browser supports a particular feature.

1. Check if a certain property exists on a global object (such as window or navigator).
2. Create an element, then check if a certain property exists on that element.
3. Create an element, check if a certain method exists on that element, then call the method and check the value it returns.
4. Create an element, set a property to a certain value, then check if the property has retained its value.

Or you can use Modernizr which is an open-source Javascript library that makes it easy for web designers and helps you to detect the capabilities of the visitor’s browser.