About HTML5 CANVAS ?

HTML5 defines the element as “a resolution-dependent bitmap canvas which can be used for rendering graphs, game graphics, or other visual images on the fly.”

A canvas is a rectangle in your page where you can use JavaScript to draw anything you want.

A element has no content and no border of its own.

The markup looks like this:

<canvas width="300" height="225"></canvas>

You can have more than one element on the same page.

Each canvas will show up in the DOM, and each canvas maintains its own state.

If you give each canvas an id attribute, you can access them just like any other element.

Example Code:

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="background-color:#666;">
</canvas>

</body>
</html>

Output:

WHY DO YOU NEED CANVAS?

Canvas can be used to represent something visually in your browser.

For example:

Simple diagrams
Fancy user interfaces
Animations
Charts and graphs
Embedded drawing applications
Working around CSS limitations

Drawing tools

Rectangles
Arcs
Paths and line drawing
Bezier and quadratic curves

Effects

Fills and strokes
Shadows
Linear and radial gradients
Alpha transparency
Compositing

Transformations

Scaling
Rotation
Translation
Transformation matrix

Importance of SVG and Canvas in HTML5?

In HTML , SVG and Canvas are two important graphics features.It is a Vector graphics technology.

What is Vector Graphics?

Vector graphics is the use of geometrical primitives such as points, lines, curves, and shapes or polygons—all of which are based on mathematical expressions—to represent images in computer graphics.

Vector graphics range in complexity from simple to moderate to extremely complex. The following are some basic examples.

Simple - Callout in a document or illustration.
Moderate - Illustrations such as charts, diagrams and maps.
Complex - Documents such as those used for engineering.

Canvas

Canvas is a bitmap with an immediate modegraphics application programming interface (API) for drawing on it. Canvas is a “fire and forget” model that renders its graphics directly to its bitmap and then subsequently has no sense of the shapes that were drawn; only the resulting bitmap stays around.

More Information about canvas - http://tech.queryhome.com/51054/about-html5-canvas

SVG

SVG is used to describe Scalable Vector Graphics

SVG is known as a retained mode graphics model persisting in an in-memory model. Analogous to HTML, SVG builds an object model of elements, attributes, and styles. When the element appears in an HTML5 document, it behaves like an inline block and is part of the HTML document tree.

More Information about SVG - http://tech.queryhome.com/50869/about-svg-part-1

A Comparison of Canvas and SVG

Canvas

Pixel-based (canvas is essentially an image element with a drawing API)
Single HTML element similar to in behavior
Visual presentation created and modified programmatically through script
Event model/user interaction is coarse -- at the canvas element only; interactions must be manually programmed from mouse coordinates
API does not support accessibility; markup-based techniques must be used in addition to canvas

SVG

Object Model-based (SVG elements are similar to HTML elements)
Multiple graphical elements which become part of the Document Object Model (DOM)
Visual presentation created with markup and modified by CSS or programmatically through script
Event model/user interaction is object-based at the level of primitive graphic elements -- lines, rectangles, paths
SVG markup and object model directly supports accessibility

Video Tutorial for svg and canvas

https://www.youtube.com/watch?v=_OiVBQY9hG0

Both Canvas and SVG are important components of the HTML5 graphically rich Web.Right now there are a lot of supporting libraries available on web for both svg and canvas. If I name a few Kinetics.js, Fabric.js, Raphael.js, Paper.js and many-many more. These libraries are there to make us work with these two technologies in an easy way.

Images for svg and canvas features

Small Discussion about HTML5 and Flash

What is HTML5

HTML5 stands for Hyper Text Markup Language and we use this technology in order to develop websites.

What is Flash

Adobe Flash is a rich internet application (RIA) tool as well as a multimedia platform. It is used to add animation and interactivity to games, advertisements and different types of web pages.

Comparing HTML5 vs FLASH

The main difference between HTML5 and Flash is that HTML5 has mobile capabilities because it uses pure code to generate the interactive content. This means it can look and behave differently when seen on different browsers, which is ideal for web designers who want to create different versions of a website for various platforms. However, Flash has been around for almost as long as the actual Internet has and still holds some advantages over HTML5.

HTML5 page can look and behave differently when accessed from different browsers, making it a bless for web designers that want to create different versions of their website for different platforms, and a real pain for those who just need to make a website look and feel the same on all devices.

Flash has been around pretty much since the beginning of the Internet. Well, maybe not its exact beginning, but ever since you started seeing something moving on a website, chances are you were looking at a piece of Flash content. Flash uses containers to store the interactive content, which are then rendered in browsers using a plugin – Flash Player.

Video Tutorial for Flash Vs HTML5

https://www.youtube.com/watch?v=aVjIsL8qwNw

HTML5 is free while Flash is not. Flash content, on the other side, has its dedicated development environment, which you have to buy.

Advantages for Flash Over HTML5
Flash is more ubiquitous (98% of desktop users)
Adobe Flash is a mature technology
The developer tools are strong and well supported
Designers are comfortable in working in flash
Flash allow you to record video and voice from the PC Web browser.
Flash as a strongly typed object oriented language (ActionScript 3), similar to Java.

Advantages for HTML5 Over Flash

Doesn't require any "player" to be installed
Runs on mobile devices
Provides better performance than Flash on some platforms (for example Mac OS X and Linux)
HTML5 content runs about 58% faster than Flash applications.