To create graphical applications (like a 3D configurators) on the webm HTML5 offers a variety of features such as 2D Canvas, WebGL, SVG or SMIL. To write WebGL applications, we use the existing canvas element of HTML5. This article gives an overview of the 2D canvas element in HTML5.
HTML5 Canvas provides a simple and powerful option for drawing graphics with JavaScript. It can be used to draw graphics or create color compositions or simply animations.
Here is a simple canvas element that has only two specific attributes width and height plus all core HTML5 attributes such as identification, name and category.
Syntax.
The syntax of the HTML canvas tag is given below. You must mention the name of the canvas in double quotations (” “).
Canvas Attributes.
The canvas tag has three attributes, namely id, width and height.
These attributes determine the size of the canvas. If a programmer does not specify them under the canvas tag, browsers such as Firefox, Chrome, and WebKit provide a 300 x 150 canvas element by default.
Example – Creating a canvas.
The following code shows how to create a canvas. We used CSS to give the canvas a colored frame.
HTML Context (Rendering).
The canvas is empty at first. To display something on the canvas element, we need to use a scripting language. The scripting language should access and build on the rendering context.
The canvas element has a DOM methode called getContect(), which is used to get the rendering context and its drawing functions. This methode takes a parameter, the type of context 2D.
The following code is to be written to get the desired context. You can write this script in the body tag, as shown below.
WebGL Context.
HTML5 Canvas is also used to write WebGL applications. To create a WebGL rendering context on the canvas element, pass the experimental WebGL string to the canvas.getContext() method instead of 2D. Some browsers only support WebGL.
Thanks for reading.