How to use <canvas> tag in HTML5

[Aia Zav]

I am trying to use the newly introduced <canvas> tag in HTML5. I have tried different methods but none succeeded. I am trying to draw with HTML 5 Canvas. In order for a rectangular area created on the site, built into the JavaScript code to dynamically render bitmap images. But not getting the proper results. Maybe because I am not knowing how to Draw with HTML 5 Canvas. So I am here to get some help from you members. Also I want to know how to use audio and video tags in HTML5. I know I am having number of queries, but since they are related to each other, I thought to post all in same thread instead of making another one. Hope that you people would not be having problem with it and will provide some detailed information about the topics.

[AlienKing]

HTML was originally conceived as a pure markup language so that data can be represented graphically. The implementation of this representation was left to the browser. The recently implemented directly in the rendering code breaks with the old principle. Especially for graphically rich web designer the day is a good thing because they now have in their own hands should look like certain page elements. The idea for the Canvas element is from Apple, which in its WebKit project had installed the days. All manufacturers copied the idea - eventually followed suit Microsoft, which had long struggled to using the Internet Explorer for some reason. Many users are already using third party tools to the browser to the possibilities of <canvas> extended.

[B_Hodge]

Despite the new standard graphics does the identical representation of the not all Web browsers now properly. After taking full canvas test before, all the species tested, JavaScript can deal with graphical objects on the. The result: Many standard operations - such as drawing a line - are almost the same in all browsers implemented. Some other graphics routines such as the rendering of text or curves realize the programs but very different - very complex processes can even lead to self-crash and is open that Web sites ending in indecipherable hieroglyphics.

[Lord of the RIG]

If you even want to test if your browser supports HTML5 Canvastry to search on web. There are some links by a jQuery plug-ins have been animated. The plugin turns out the links from the source code and place it in the form of an animated link cloud that responds to the movements of the cursor. If the animation work for you, then they are already using a HTML5 compatible browser. Internet Explorer 8 or lower can only use a special plug-ins from Google (explorer canvas). The following versions of popular Web browsers support from House of Canvas:

• Apple Safari 5
• Google Chrome 8
• Microsoft Internet Explorer 9
• Mozilla Firefox 3.6
• Opera 10.60

[afidelino]

The Tag <video> appear harmless at first glance. Similar to the <img> element that provides for the embedding of images, the <video> command for everyone is simple to use: Upload video file, specify address of the videos in the day and finished. If only it were that simple ... The only approach is easy in fact, (as described above by other members) the supported video formats are very different. If all browsers support the major standard formats - like the pictures where everyone at least JPG, PNG and GIF can - that would not matter. Everyone has their own browser but has strengths and weaknesses and standardized video formats for all platforms and certainly not even. Currently, the are of the open source community developed Ogg format, MPEG and H.264 by On2 VP8, which has recently become Google is the most widely spread video formats on the Web. But there is more - Apple -users work with QuickTime, and then the Safari browser only dissolve everything and what QuickTime is processed by it.

[Mecurtis]

OGG, H.264, and VP8 deliver comparable results in the presentation of videos. The only thing the Web developers have to consider is the question of patents. H.264 is a widely used format, but will cost license fees paid by the MPEG LA group. In return, H.264 also saves money because there are many hardware encoder, the compressed MPEG files can be processed with little effort. Thus, for particularly in mobile devices save power. The On2 VP8 patents for the format have now been on royalty-free license (not having a one-time use without any restrictions), which popularity of compressed video so do not lessen the. OGG files are subject to VP8, unlike H.264 and not sued for patent rights and are still being used quite openly. That may change abruptly as soon as the patent holder of this seriousness.

[DllD]

For the audio-day the same applies as for the video. <video> produces both sound and images, <audio> only processes the sound. Most of the audio tracks are only a subset of the video format. Thus, the popular MP3 format is nothing but a subclass of the MPEG video format. It is expected that, therefore, apply to the final audio element, the same rules as for the video element. If the Firefox browser, the Ogg video format support, for example, it does accordingly with the Ogg Vorbis audio format. The only known exception to this rule is the MPEG4-MP3-family. Many browsers support MP3 audio, regardless of MPEG4 video.

[justinepeter]

To use Canvas, you’ll need two things-
1. A Canvas tag in the HTML to place the drawing canvas
2. JavaScript to do the drawing
The Canvas tag is basically an img tag without any data. You specify a width and a height for the drawing area.
Example of a Canvas tag:
<canvas id="myDrawing" width="200" height="200">
<p>Your browser doesn't support canvas.</p>
</canvas>

With a Canvas element in the HTML, we’ll add the JavaScript. We need to reference the Canvas element, create a drawing context:

var drawingCanvas = document.getElementById('myDrawing');
// Check the element is in the DOM and the browser supports canvas
if(drawingCanvas.getContext) {
// Initaliase a 2-dimensional drawing context
var context = drawingCanvas.getContext('2d');
//Canvas commands go here
}

Checking for the getContext() method on a canvas DOM object is the standard way of determining canvas compatibility.