The latest versions of browsers such as Firefox, Opera, Safari, Google Chrome, Konqueror and Internet Explorer support canvas markup.
Markup should contain alternative content for users of older browser versions or canvas-incompatible browsers; as illustrated with the following syntax:
In those cases where the drawing is going to fail, the animated note of file canvsup_600x490.jpg (shown to the right) would display. If the browser is not image-compatible either, a plain text string with that note would appear.
An image element expects an external source to be uploaded and displayed, while a canvas element uses page-internal instructions (or supplementing js files) to create an image within the capabilities of the client browser.
Canvas-based two-dimensional drawing, for example, is implemented by fetching the canvas element via methods of the JavaScript document object:
var canvas = document.getElementById("my-canvas");
var artist = canvas.getContext("2d");
Drawing instructions are then implemented with methods of the artist object (or whatever variable name you are coming up with for the context object). Tutorials and examples that explain and show how to use these methods are available online; for example see www.w3schools, basics/opera, developer/mozilla, wikipedia, updates to standard.
References
[1] Thomas A. Powell: HTML & CSS: The Complete Reference. Fifth Edition. McGraw Hill, New York, 2010.; pages 82 to 101.
[2] Image example: www.axeleratio.com/sideways/jpg/canvsup_600x490.jpg.
Well Written Beautiful Post!
ReplyDeletehere is my post related to html canvas.
you may like.
HTML to Canvas