Summary -

In this topic, we described about the below sections -

Why canvas is used?

HTML is the common and most using technology in webpages development. The requirement of designing visuals in webpages required and HTML required to gets updated with latest technology in a combination of JavaScript to draw visuals.

JavaScript designers can generate free form visuals on a drawing surface, known as the Canvas. Designers like to use it for making rich web applications. HTML5 <canvas> element is used to draw visuals on the fly using JavaScript.

What is canvas?

Generally, a canvas is "a resolution-dependent bitmap which can be used for game graphics, or other visual images on the fly" and rendering graphs. The <canvas> element is only a container for visuals.

Simply saying, we can provide bitmap images and 2D shapes with the help of HTML5 canvas element and JavaScript. JavaScript is required to draw the graphics. Canvas has various methods for drawing directions, circles, text, boxes, and adding pictures for visuals.

Using canvas, we can learn how to draw essential and complex shapes, adding gradients, shadows, patterns, adjust colors and styles and can explore into more innovative techniques like rotating, scaling, and compositing objects. It is a low-level technical model informs a bitmap that does not have a built-in scene.

Advantages -

  • Interactivity - Canvas is fully interactive and can react to a user’s actions by listening to the keyboard, mouse, or touch events. So, a developer does not get restricted to only static graphics and images.
  • Animation – Each and every object created on the canvas can be animated. This allows developer to create all levels of animations.
  • Flexibility - Can draw primitive shapes, images, innovative structures like polygons, forming activities and even games — with or without animation and adding video and/or audio to a canvas application is also possible.
  • Browser/Platform Support - It is supported by all major browsers and can be retrieved on a wide range of devices including desktops, tablets, and smart phones.
  • Popularity - Canvas got popular very quickly and steadily because of their widely useful features.
  • Develop once, run everywhere - HTML5 Canvas offers good portability. Once created, a canvas application can run almost anywhere.

Disadvantages -

  • Establishing high-level complex visuals is not possible by using the Canvas as it drops its quality when it's scaled.
  • The drawings using the Canvas surface is just a group of pixels and it can’t be read or construed by helping technologies or search engine bots.
  • The only way the <canvas> element can work with the JavaScript is a main obstacle and can’t be used with any other technologies.

<canvas> element

The <canvas> tag introduced in HTML5. HTML5 canvas element used to draw a graphics on the web page. <Canvas> was initially introduced by apple to power graphics in the safari web browser and the Mac OS dashboard widgets.

Canvas helps the browser to draw images and shapes without any plugin. Canvas has various methods for drawing circles, boxes, text, paths and adding images.

Canvas element has 150px of height and 300px of width by default without any content and boarder. However, traditional width and height can be defined using the CSS width and CSS height property and we can apply boarders using CSS border property.

The HTML <canvas> tag is used to draw animations, graphics, etc. using scripting. Below coding describes an easy <canvas> element with height 100px and width 100px along with the core HTML5 attributes like id, and class etc.

<canvas class="new-canvas" id="myCanvas" width="100" height="100">
     </canvas>

Properties -

Following table describes the possible drawings that HTML5 canvas can draw -

Properties Description
Drawing Rectangles This process is to draw rectangle using <canvas> element by specifying height and width.
Drawing Paths This process is to make shapes using paths of <canvas> element.
Drawing Lines This process is to draw lines using lineTo( ),moveTo( ),and stroke( ) in <canvas> element.
Drawing Bezier This process is to draw Bezier curve using <canvas> element.
Drawing Quadratic This process is to draw quadratic curve using <canvas> element.
Using Images This process is to use images in drawings with <canvas> element.
Create Gradients This process is to produce gradients using HTML5 <canvas> element.
Styles and Colors This process is to apply styles and colors using HTML5 <canvas> element.
Text and Fonts This process is to draw incredible text using various fonts and their size.
Pattern and Shadow This process is to draw drop-shadows and various patterns.
Canvas States This process is to save and restore canvas states while doing complex drawings on a canvas.
Canvas Translation This process is to move the canvas and its origin to a distinct point in the grid.
Canvas Rotation This procedure is applied to rotate the canvas around the existing origin.
Canvas Scaling This procedure is applied to increase or decrease the units in a canvas grid.
Canvas Transform This procedure allows changes directly to the transformation matrix.
Canvas Composition This process is to mask off specific areas or clear sections from the canvas.
Canvas Animation This procedure is applied to establish basic animation using HTML5 canvas and JavaScript.

Examples -

Canvas is a rectangular area on the html page. By default, canvas has no content and no border.

The mark-up looks like -

<canvas id="myCanvas" width="300"  height="200"></canvas>

Note! Width and height attributes can define the size of the content and id attribute to get referred in the script.

Example -

Following example shows how to create canvas with height 200px and width 300px – 

<!DOCTYPE html>      
<html>           
 <body>               
     <canvas id="myCanvas" width="300" height="200" 
                style="border:1px solid #000000;"> 
       Your browser does not support the HTML5 canvas tag.
     </canvas> 
 </body>      
</html>

Output -

Your browser does not support the HTML5 canvas tag.

Browser Support

Most of the advanced browsers like Safari, Opera, Chrome, Firefox, IE9 and 10 support Canvas elements. Below are the browser versions that supports canvas element -

Element chrome Internet explorer Firefox Safari Opera
<canvas> 4.0 and above 9.0 and above 2.0 and above 3.1 and above 9.0 and above

Browsers can directly use Canvas without having copyrighted browser plug Adobe's flash player.