HTML5: Working with the canvas element
The HTML5 specification has added many new conditions including attributes, semantic markup, and refined elements, sectional elements, and structural elements. This segment will review the canvas <canvas> element while using JavaScript to draw several canvas shapes.
The Canvas <canvas> element allows for a dynamic rendering of bitmap images and 2D shapes onto web pages such as color fill backgrounds, gradient and pattern displays, rendering of text, pixel manipulations, animations, and other visual objects on the fly; therefore, the canvas element becomes a simple pixel-based drawing API tool.
Current browsers which support the HTML5 specification for the canvas element are: IE 9.0+, Safari 3.0+, Firefox 3.0+, Chrome 3.0+, Opera 10.0+, iOS 1.0+, and Android 1.0+.
This is the canvas element in its simplest form:
<canvas id="canvas" width=300" height="150"></canvas>
The canvas element has two default coordinate space attributes, a width of 300px and a height of 150px, the width and height can be modified within the element, and by itself the element renders an invisible block of space. We are giving the canvas element an id=”canvas” attribute so that added context can be accessed via JavaScript. (Read more…)