Saving Canvas Contents - HTML5 Programming Jonathan Reid

Once you have a drawing on a canvas, you might want to save it somehow. This would involve grabbing the image data and transmitting it to a server from which it can be reconstituted and displayed. The canvas API does provide a method for saving a rendered bitmap:

• Context.toDataUrl(opt_type, opt_quality): Translates the rendered bitmap to a data URI. Data URIs are a way of embedding data directly into web pages and are defined in RFC 2397, which you can read at http://tools.ietf.org/html/rfc2397.

Valid types include image/png (the default), image/jpeg, and (for Chrome and Chromium-based browsers, image/webp). If the type is image/jpeg or image/webp, an optional second parameter of between 0 and 1 can be provided to indicate the quality. This method returns the rendered bitmap encoded as a data URI, which you can then transmit back to the server, or even use elsewhere in the same page.

Note that if you have loaded an image into the canvas that is from a different origin than the hosting page, or if you have loaded an image from your hard drive into the canvas, this method will throw a security error. This is done to prevent information leakage via careless or malicious scripts.

Text

In addition to drawing and images, the canvas element can render text. The methods and properties for text rendering are as follows:

• Context.fillText(textString, x, y, opt_maxWidth): Fills the textString on the canvas starting at (x, y) with the current fill style. If the optional maxWidth parameter is specified, and the rendered text would exceed that width, the browser will attempt to render the text in such a way as to fit it within the specified width (e.g., use a condensed font face if available, use a smaller font size, etc.).

• Context.measureText(textString): Measures the width that would result if the specified textString were to be rendered using the current style. Returns a TextMetrics object, which has a width property that contains the value.

Figure 4-11. Poor kitty

• Context.strokeText(textString, x, y, opt_maxWidth): Strokes the textString on the canvas starting at (x, y) with the current stroke style. If the optional maxWidth parameter is specified, and the rendered text would exceed that width, the browser will attempt to render the text in such a way as to fit it within the specified width (e.g., use a condensed font face if available, use a smaller font size, etc.).

• Context.font: Sets the font that the text will be rendered in. Any valid CSS font string is permitted.

• Context.textAlign: Aligns the text as specified. Valid values are:

• left: Left-aligns the text.

• right: Right-aligns the text.

• center: Centers the text.

• start: Aligns the text at the starting side for the current locale (i.e., left for left-to-right languages and right for right-to-left languages). This is the default value.

• end: Aligns the text at the ending side for the current locale.

• Context.textBaseline: Sets the baseline for the text as specified. Valid values are:

• alphabetic: Uses the normal alphabetic baseline for the text. This is the default value.

• bottom: The baseline is the bottom of the em square.

• hanging: Uses the hanging baseline for the text.

• ideographic: Uses the bottom of the body of characters (assuming they protrude beneath the alphabetic baseline).

• middle: The text baseline is the middle of the em square.

• top: The text baseline is the top of the em square.

Listing 4-13 demonstrates how easy it is to draw text on a canvas.

Listing 4-13. Rendering Text on Canvas

<!DOCTYPE html>

<html>

<head>

<title>The HTML5 Programmer's Reference</title>

<style>

canvas {

border: 1px solid #000;

}

</style>

</head>

<body>

<canvas id="myCanvas" width="200" height="200">Did You Know: Every time you use a browser that doesn't support HTML5, somewhere a kitten cries. Be nice to kittens, upgrade your browser!

</canvas>

// Get the context we will be using for drawing.

var myCanvas = document.getElementById('myCanvas');

var myContext = myCanvas.getContext('2d');

// Draw some text!

myContext.font = '35px sans-serif';

myContext.strokeStyle = '#000';

myContext.strokeText('Hello World', 0, 40);

myContext.textAlign = 'center';

myContext.fillStyle = 'rgba(200, 50, 25, 0.8)';

myContext.fillText('HTML5', 100, 100);

</script>

</body>

</html>

This example both strokes and fills some text on the canvas. The font size is large enough to reveal the actual stroke around the edges of the letters, as shown in Figure 4-12.

Figure 4-12. Text rendered on a canvas

Shadows

The canvas element can also cast shadows based on the elements drawn upon it. This is most often used with text, but it also works with shapes and paths. If you're already familiar with CSS drop shadows, then the parameters for canvas shadows will be very familiar:

• Context.shadowBlur: The size of the blurring effect. The default value is 0.

• Context.shadowColor: The color of the shadow. Can be any valid CSS color string.

The default is 'rgba(0, 0, 0, 0)'.

• Context.shadowOffsetX: The x-offset of the shadow. The default value is 0.

• Context.shadowOffsetY: The y-offset of the shadow. The default value is 0.

Listing 4-14 demonstrates casting drop shadows on some text.

Listing 4-14. Drop Shadows