Categories: Uncategorized

HTML 5 Canvas – a short overview.

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.

Erhöhen Sie Ihr Verkaufsvolumen.

Mit unseren 3D-Konfiguratoren erreichen Sie mehr kommerziellen Erfolg auf Website..

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 (” “).

Copy to Clipboard

Canvas Attributes.

The canvas tag has three attributes, namely id, width and height.

  • Id stands for the name of the canvas element in the Document Object Model (DOM).
  • Width stands for the width of the canvas.
  • Height stands for the height of the canvas.

Erhöhen Sie Ihr Verkaufsvolumen.

Mit unseren 3D-Konfiguratoren erreichen Sie mehr kommerziellen Erfolg auf Website..

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.

Copy to Clipboard

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.

Copy to Clipboard

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.

Copy to Clipboard

Thanks for reading.

3DMaster