HTML Canvas - Introduction

---

---

Canvas is an HTML element that can perform dynamic generation of 2D shapes and bitmap images using JavaScript. HTML Canvas is a great alternative for drawing pictorial data such as graphs, charts, and maps inside a web page. It is a low-level procedural model which updates in the form of a bitmap.

The Canvas element is only the basic rectangular-shaped container for graphics, which is usually done using JavaScript. The shapes or any other graphics implementation inside the Canvas element can be done using JavaScript. HTML Canvas element is an HTML tag like the div, a, or table, with the exception that its contents are rendered using JavaScript.

Why Canvas?

There are more than 1.2 billion websites available today which are unique from each other and have various features involved. The canvas element is specially designed to make visual content that can be uniquely applied to develop website UI and make them more attractive for users. It is very easy to learn and requires a knowledge base of HTML and JavaScript.

Canvas and <img> tag?

The canvas element looks like the HTML5 image <img> element at first, except for not having "src" and "alt" attributes. Unlike the image element, the canvas element requires the closing tag. The canvas element does have only two attributes which are width and height. To design graphics using Canvas, we must use JavaScript.

Dimensions of Canvas

By default, canvas does not have a border and no content. The width and height can be declared in the element or can be manually adjusted using the DOM properties of JavaScript. When no width and height attributes are given in the code, it is set to default where width is 300 pixels and height is 150 pixels.

The element can also be styled by CSS, using the Style tag, and can also give parameters such as border color and thickness. If the CSS Style or dimensions are given do not match with the initial Canvas, it will appear as a distorted rectangle. Even though, the Canvas element can be styled using CSS, the actual drawing on the Canvas remains ineffective and can be modified using Scripting languages

Canvas element and Canvas context

While using canvas, it is important to understand the basic difference between the canvas element and the canvas context, as often people get these both confused. The canvas element is the actual DOM node that is embedded in the HTML page. A canvas context is an object with properties and methods that you can use to render graphics inside the canvas element. The context can be 2D or 3D (by using WebGL). We can assign only one context to the canvas element using the getContext() function. Changing context multiple times in the same canvas may result in the same object context.

Structure of Canvas element

A simple <canvas> element is defined using the attributes id, width, height, and style to observe the canvas border. The main thing to be identified here is that without giving any style to the canvas, it cannot be observed on the webpage even though it is formed. A simple canvas tag is shown below.

<canvas id="canvas" width="555" height="555" style="border:2px solid black;">
   This browser neither have JavaScript enabled nor support HTML5 canvas tag.
</canvas>

The canvas element is identified using id or class to render graphics in the future using JavaScript. In the above example, a canvas is built with dimensions 555×555 with the border colored black. The sentence inserted between the canvas tag is displayed when there is an error that causes the canvas to not display. The text displayed on the page makes the user identify that there is an error in displaying the canvas. The canvas outline is shown below.

HTML5 Canvas vs Scalable Vector Graphics (SVG)

Scalable Vector Graphics (SVG) is an XML-based markup language developed by World Wide Web Consortium (W3C) in 1999 for visualizing 2D-based vector graphics. It is an earlier standard for drawing shapes and designing graphics in browsers.

SVG is a text-based, open Web standard for describing images that can be rendered cleanly at any size and are designed specifically to work well with other web standards including CSS, DOM, JavaScript, and SMIL.

SVG-format vector images can be easily localized by updating the text within them, without the need of any graphical editor to do so. The HTML Canvas element works like the SVG with some differences mentioned below.

The canvas element has two sizes. The first one is the size of the element itself which can be altered by changing the element's width and height attributes.

Another size is the element's drawing surface. CSS attributes can only change an element's size, but the drawing surface remains unaffected.

The Canvas element can be designed in two parts

• Initializing HTML5 Canvas element.

• Designing graphics on the drawing surface.

Canvas Coordinates

We must understand the canvas coordinates before drawing a Canvas element. A canvas consists of a drawable region initiated in HTML code having height and width as attributes. The Canvas element is a two-dimensional rectangular area. The top-left corner of the canvas element is considered as the origin (0,0) where the attributes are width and height. The bottom-right corner of the canvas element is (canvas width, canvas height) which is given by the user. The dimensions of the Canvas element are given by the user using CSS attributes. If not given width and height are set by default as (300,150).

Simple Example of Canvas element

Here is the basic code snippet to draw a canvas element. The width and height are 555px and 555px.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Canvas Element</title>
</head>
<body>
   <canvas id="canvas" width="555" height="555" style="border:2px solid orange;">
   </canvas>
</body>
</html>

The output for the above code snippet is

The above snippet helps us to understand how the canvas is implemented using the attributes provided.

Applications of the Canvas element

Canvas is equipped with many graphic features which have a wide array of applications over the web. Some of the main applications of Canvas are

• HTML5 Canvas can be used to draw text on web pages.

• The canvas element is used to develop productive graphics.

• We can design simple animations such as sparkling stars to complex animations using canvas elements.

• Canvas elements can be used for website interactivity as they can respond to JavaScript events and respond to user actions.

• Canvas is commonly used to build 2D games on websites.

History

The idea to invent a graphic interface for mobile applications and webpages was firstly coined in the early 2000s and many organizations have started research to address this issue. The history of the Canvas element is given below.

• Canvas is an HTML5 element initially introduced by Apple for the development of their products in 2004.

• Apple had mainly used canvas for Web kit components to improve the UI graphics and dashboard widgets on the Safari browsers.

• It was later standardized by the Web Hypertext Application Technology Working Group (WHATWG) who were behind the development of HTML and next-generation web technologies available today.

• Previously, the Canvas element was used to make online 2D games as it was more effective, and the available graphic features were more attractive for the users.

• Canvas is an HTML element that can perform dynamic generation of 2D shapes and bitmap images using JavaScript. Previously, due to websites encouraging ads, JavaScript had caused so many issues to the users which caused rendering issues. Later it is resolved by disabling JavaScript in browsers which led to the disability of Canvas. If a user wants to work on Canvas, JavaScript must be enabled manually.

• The available browsers today are JavaScript enabled HTML Canvas is a great alternative for drawing pictorial data such as graphs, charts, and maps inside a web page which makes it easier to use the Canvas element.

• HTML Canvas is a great alternative for drawing pictorial data such as graphs, charts, and maps inside a web page. It has been widely used today.