Canvas API

The Canvas module provides an image manipulation API to JavaScript.

Contents

  1. Overview
  2. Canvas class

Overview

The Canvas module is a graphics API that is inspired by the HTML5 canvas, with additional methods to decode from and encode to binary formats (such as PNG and JPEG), represented by Blobs.

A Gears Canvas is not yet a complete implementation of the HTML5 canvas specification, and there are two significant differences:

Permission

This API requires user permission. If you would like to customize the default dialog, you can explicitly call google.gears.factory.getPermission() - see how.

Canvas class

readwrite attribute int height
readwrite attribute int width
void crop(x, y, w, h)
void decode(blob)
Blob encode([mimeType, options])
void flipHorizontal()
void flipVertical()
void resize(w, h, [filter])
void rotate180()
void rotateCCW()
void rotateCW()

Attributes

Attribute Type Description
height readwrite attribute int The height of the Canvas. The default value is 150.
width readwrite attribute int The width of the Canvas. The default value is 300.

Methods

void crop(x, y, w, h)
Summary: Crops the Canvas. The crop happens "in-place", as opposed to returning a new Canvas.
Parameters: x - The left co-ordinate of the crop rectangle.
y - The top co-ordinate of the crop rectangle.
w - The width of the crop rectangle.
h - The height of the crop rectangle.
void decode(blob)
Summary: Loads an image into this Canvas, replacing the Canvas' current dimensions and contents.
Parameters: blob - The Blob to decode. The image should be in PNG or JPEG format.
Return value: A new Blob containing the specified subset.
Blob encode([mimeType, options])
Summary: Saves the Canvas' contents to a binary format, such as PNG or JPEG.
Parameters: mimeType - Optional. The image format to encode to. Valid values include "image/png" and "image/jpeg". The default encoding is PNG.
options - Optional. A JavaScript object (i.e. key-value map) that specifies encoding options. For lossy formats, such as JPEG, one can specify a "quality" key, whose value should be a number between 0.0 and 1.0 inclusive.
Return value: A new Blob encoding the Canvas' image data.
void flipHorizontal()
Summary: Flips the Canvas horizontally. The transform happens "in-place", as opposed to returning a new Canvas.
void flipVertical()
Summary: Flips the Canvas vertically. The transform happens "in-place", as opposed to returning a new Canvas.
void resize(w, h, [filter])
Summary: Resizes the Canvas. The transform happens "in-place", as opposed to returning a new Canvas.
Parameters: w - The new width.
h - The new height.
filter - Optional. A string specifying the image filter. There are four options: "fastest" or "nearest" for nearest-neighbor filtering, "bilinear" for bi-linear filtering, and "nicest" for highest quality filtering. The default filter, if unspecified, is "nicest".
void rotate180()
Summary: Rotates the Canvas by 180 degrees. The transform happens "in-place", as opposed to returning a new Canvas.
void rotateCCW()
Summary: Rotates the Canvas counter-clockwise by 90 degrees. The transform happens "in-place", as opposed to returning a new Canvas.
void rotateCW()
Summary: Rotates the Canvas clockwise by 90 degrees. The transform happens "in-place", as opposed to returning a new Canvas.