Google Choice: Html5 Canvas Overview

Friday, March 17, 2017

Html5 Canvas Overview

To create graphical applications on the web, HTML-5 provides a rich set of features such as 2D Canvas, WebGL, SVG, 3D CSS transforms, and SMIL. To write WebGL applications, we use the existing canvas element of HTML-5. This chapter provides an overview of the HTML-5 2D canvas element.

HTML5 Canvas

HTML-5 <canvas> provides an easy and powerful option to draw graphics using JavaScript. It can be used to draw graphs, make photo compositions, or do simple (and not so simple) animations.
Here is a simple <canvas> element having only two specific attributes width and height plus all the core HTML-5 attributes like id, name, and class.

Syntax

The syntax of HTML canvas tag is given below. You have to mention the name of the canvas inside double quotations (“ ”).

<canvas id = "mycanvas" width = "100" height = "100"></canvas>

Canvas Attributes

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

Id − Id represents the identifier of the canvas element in the Document Object Model (DOM).
Width − Width represents the width of the canvas.
Height − Height represents the height of the canvas.

These attributes determine the size of the canvas. If a programmer is not specifying them under the canvas tag, then browsers such as Firefox, Chrome, and Web Kit, by default, provide a canvas element of size 300 × 150.

Example - Create a Canvas

The following code shows how to create a canvas. We have used CSS to give a colored border to the canvas.

<html>
   <head>
 
      <style>
         #mycanvas{border:1px solid red;}
      </style>
  
   </head>
 
   <body>
      <canvas id = "mycanvas" width = "100" height = "100"></canvas>
   </body>
 
</html>

It will produce the following result −

HTML Context (Rendering)

The <canvas> is initially blank. To display something on the canvas element, we have to use a scripting language. This scripting language should access the rendering context and draw on it.
The canvas element has a DOM method called getContext(), which is used to obtain the rendering context and its drawing functions. This method takes one parameter, the type of context 2d.
The following code is to be written to get the required context. You can write this script inside the body tag as shown below.

<!DOCTYPE HTML>

<html>
   <body>
      <canvas id = "mycanvas" width = "600" height = "200"></canvas>
      
      <script>
         var canvas = document.getElementById('mycanvas');
         var context = canvas.getContext('2d');
   
         context.font = '20pt Calibri';
         context.fillStyle = 'green';
         context.fillText('Welcome to Tutorialspoint', 70, 70);
      </script>
      
   </body>
</html>

It will produce the following result −
For more example on HTML-5 2D Canvas, check out the following link HTML-5 Canvas.

WebGL Context

HTML5 Canvas is also used to write WebGL applications. To create a WebGL rendering context on the canvas element, you should pass the string experimental-webgl, instead of 2d to the canvas.getContext() method. Some browsers support only 'webgl'.

<!DOCTYPE html>

<html>
   <canvas id = 'my_canvas'></canvas>
 
   <script>
      var canvas = document.getElementById('my_canvas');
      var gl = canvas.getContext('experimental-webgl');
      gl.clearColor(0.9,0.9,0.8,1);
      gl.clear(gl.COLOR_BUFFER_BIT);
   </script>
 
</html>

It will produce the following result −

পৃষ্ঠাসমূহ

Labels

.

Search Your Article

Total Pageviews