Canvas 2D Context

Part 1. Overview

Developing Web applications based on two-dimensional graphics is quite a challenging task. Those who create desktop applications have a vast number of libraries at their disposal: Java developers make use of AWT packages as well as Image I/O pluggable architecture, C/C++ application authors can get access to various low-level features of the underlying graphics subsystem, developers adept in dynamic languages rely on the solid base of plugins and extensions, such as ImageMagick for PHP or Perl GD interface to gd graphics library. As for the client-side instruments allowing the developer to build 2D graphics in the browser window, they can be divided into three groups. The first approach deals with external plugins: all desired functionality can be placed in an applet or SWF file. For example, ActionScript's flash.geom package has a set of classes defining geometric primitives, classes from the flash.display package gives the developer the necessary means to handle bitmaps, create gradients or set stroking and filling attributes, the flash.text.engine package provides classes for sophisticated low-level control of text appearance. The second group of techniques for working with 2D graphics on the client side implies the use of a declarative markup language offering graphic solutions to the Web developer. All major desktop browsers implement SVG - Scalable Vector Graphics language based on XML and describing vector graphic shapes, images and text. SVG can be significantly enhanced by means of scripting: in addition to common DOM APIs, SVG elements make up their own sets of methods and properties. Besides script-driven effects, SVG allows of external styling: CSS or XSL stylesheets can be applied to define the appearance and behavior of SVG elements. And the third group of graphics-relates techniques is the use of the <canvas> element and accompanying interfaces. Working with canvas is the pivot point of immediate mode rendering in Web applications.

Once started as one of the experiments with new HTML5 elements and APIs, now canvas has a stable implementation in major browsers, both desktop and mobile. Even developers who are beginners in computer graphics can easily integrate canvas in their applications. Online image editors, elaborate drawing programs, line art applications are the main targets of using canvas capabilities. This is an example of HTML markup inserting the canvas element and setting its attributes.

<canvas width=500 height=500></canvas>

Like any other HTML element canvas can be styled through CSS:

<style type="text/css">
canvas {
 border: #4882b4 12px ridge;
 box-shadow: 2px 2px 14px 2px #b4cdcd;
}
</style>

To start working with rich graphical content, JavaScript code must first create an instance of a rendering context:

<script type="text/javascript">
var canvas=document.getElementsByTagName("canvas").item(0); // HTMLCanvasElement
var context=canvas.getContext("2d"); // CanvasRenderingContext2D object
</script>

The 2D context represents a device-independent coordinate space for plotting the locations of geometric primitives, images and text. The origin of the canvas coordinate space is the upper left corner where the x- and y-axes meet. Any point within the space can be described as a pair of numeric values. The values along the x-axis are getting bigger from left to right. Values on the y-axis are increasing downwards.

Any CanvasRenderingContext2D instance exposes a set of properties and methods which can be used to render a graphical object on the canvas. Members of the CanvasRenderingContext2D API can be broken down into the following groups:

• the rendering of the basic geometric primitives - lines, rectangular shapes, arcs, quadratic and cubic curves; arbitrary shapes creation;
• applying font attributes and displaying text characters on the canvas by means of glyphs from fonts;
• image data manipulations including pixel data changes;
• transformation effects changing the current transformation matrix;
• techniques of constructive area geometry.

Auxiliary methods that affect rendering allow the developer to change the stroke width, create a gradient or a texture pattern and use it to fill the interior of a shape, obtain the text metrics, specify global alpha values, apply shadow effects and even define the way of joining the strokes of a shape's outline. This is a minimum set of instruments that is sine qua non for applications employing two-dimensional graphics.