Canvas 2D Context

Part 11. Auxiliary Methods and Properties

Shadows

To attach a drop-shadow to a graphic object drawn on the canvas plane, a set of shadow-related properties is used. These are shadowOffsetX defining the distance of the shadow offset in the horizontal direction, shadowOffsetY for setting the vertical distance, shadowColor which is a string value denoting a CSS3 color, and shadowBlur - a blur radius of the shadow. The shadow properties are part of the current graphics state.

context.fillStyle="aqua";
context.shadowOffsetX=2;
context.shadowOffsetY=2;
context.shadowBlur=12; // the shadow's edge is blurred
context.shadowColor="navy"; // color as a keyword
context.fillRect(10, 10, 100, 100);

Points

To determine the position of a point on the canvas plane, the isPointInPath(x, y) method can be used. In the code snippet below the method invocation will return true:

context.beginPath();
context.arc(200, 200, 100, 0.0, 6.28, false); // a circle with the center at (200, 200)
context.stroke();
console.log(context.isPointInPath(200, 200)); // returns true

Set Methods

In WebKit-based browsers some graphic operations can be performed not only by using the properties of the rendering context, but also by calling the setter methods having the same effects:

context attributes	equivalent set methods
fillColor	setFillColor(color)
strokeColor	setStrokeColor(color)
lineCap	setLineCap(cap)
lineJoin	setLineJoin(join)
lineWidth	setLineWidth(width)
miterLimit	setMiterLimit(limit)
globalAlpha	setAlpha(alpha)
globalCompositeOperation	setCompositeOperation(rule)
shadow...	setShadow(x, y, blur, color)

The canvas bitmap below is created by using set methods to specify stroking, filling and transparency characteristics:

context.setStrokeColor("azure");
context.setLineWidth(12);
context.setLineJoin("round");
context.setFillColor("navy");
context.setAlpha(0.8);
context.fillRect(10, 10, 100, 100);
context.strokeRect(10, 10, 100, 100);


Dash Patterns

Firefox developers can rely on subsidiary attributes allowing them to control the pattern of dashes and gaps while stroking a shape's contour. To create a dash pattern, the developer must build a dash array and set it as the value of the dash property of the rendering context. The dashOffset property is the dash phase specifying the offset into the pattern at which to start the dash:

context.save();
context.lineWidth=4;
context.strokeStyle="crimson";
var dashArray=new Array(7, 7); // dash array: 7 units on, 7 units off
context.mozDash=dashArray;
context.mozDashOffset=0; // dash phase
context.beginPath();
context.moveTo(20, 100);
context.lineTo(400, 100);
context.stroke();
context.restore();
. . .
// the same dash pattern for the red line; the offset is 4
context.strokeStyle="red";
context.mozDash=dashArray;
context.mozDashOffset=4;
. . .
// the same dash pattern for the maroon line; the offset is 12
context.strokeStyle="maroon";
context.mozDash=dashArray;
context.mozDashOffset=12;
. . .

Working with Images

WebKit-based browsers provide a number of additional methods to manipulate raw image data. When ordinary getImageData and putImageData methods are used, each pixel in the image data is mapped to one coordinate system unit on the canvas bitmap. To preserve the bitmap's native pixel resolution, the getImageDataHD(sx, sy, sw, sh) and putImageDataHD(imagedata, dx, dy [, dirtyX, dirtyY, dirtyWidth, dirtyHeight]) methods are employed. The methods can be applied to applications targeting Chrome and must be prefixed with -webkit.

To enable or disable the smoothing of images and patterns when they are rescaled, the imageSmoothingEnabled property is used. The property is equal to true by default. It is still not universally implemented and requires the -webkit prefix in Web applications for Chrome and the -moz prefix in the code targeting Firefox.

Text Style

Font characteristics can be specified by using the textStyle property of the rendering context. However, this property is only supported in Firefox:

context.mozTextStyle="italic bold 200px serif";
context.fillText("text", 10, 200);

Transforms

Canvas implementation in Firefox has two auxiliary properties for working with transformation matrices. The first property is currentTransform. It returns the current transformation matrix as an array of the matrix entries. It can also be used to perform a new transformation: for example, translation in the (100, 100) direction is provided by creating an array and using it as the value of the CTM:

// current transformation matrix is [1, 0, 0, 1, 0, 0] - identity matrix
var matrixEntries=new Array(1, 0, 0, 1, 100, 100); // translation
context.mozCurrentTransform=matrixEntries;
// current transformation matrix is [1, 0, 0, 1, 100, 100] now
context.strokeRect(10, 10, 100, 100); // operation in the transformed space


The same translation can be performed by means of the inverse matrix. To this effect, the currentTransformInverse attribute is used:

var matrixEntries=new Array(1, 0, 0, 1, -100, -100);
context.mozCurrentTransformInverse=matrixEntries;
context.strokeRect(10, 10, 100, 100);

Canvas Conversions

The canvas bitmap can be converted to a data: URL thus enabling the developer to save the bitmap to an image file. The default MIME of the image is image/png. Another supported type is image/jpeg. To perform conversion, the toDataURL() method is invoked on the canvas. Serializing the canvas bitmap to a JPEG file can be accompanied with the quality level indication:

window.open(context.canvas.toDataURL()); // the type is image/png
window.open(context.canvas.toDataURL("image/jpeg")); // MIME type specified explicitly
window.open(context.canvas.toDataURL("image/jpeg", 1.0)); // image/jpeg type + desired quality level


Summary: Canvas 2D Context Auxiliary Methods

shadows
context.shadowOffsetX

context.shadowOffsetY

context.shadowColor

context.shadowBlur

points
context.isPointInPath(x, y);

dash patterns
context.mozDash

context.mozDashOffset

working with images
context.webkitGetImageDataHD(sx, sy, sw, sh)

context.webkitPutImageDataHD(imagedata, dx, dy [, dirtyX, dirtyY, dirtyWidth, dirtyHeight])

context.webkitImageSmoothingEnabled

context.mozImageSmoothingEnabled

text style
context.mozTextStyle

transforms
context.mozCurrentTransform

context.mozCurrentTransformInverse

canvas conversion
context.canvas

canvas.toDataURL();

canvas.toDataURL(type);

canvas.toDataURL(type, quality);