The goog.graphics.CanvasGraphics Class

goog.graphics.CanvasGraphics
> goog.graphics.AbstractGraphics
> goog.ui.Component
> goog.events.EventTarget
> goog.Disposable

goog.graphics.CanvasGraphics(width, height, opt_coordWidth, opt_coordHeight, opt_domHelper)

A Graphics implementation for drawing using canvas.

width {string|number}
The (non-zero) width in pixels. Strings expressing percentages of parent with (e.g. '80%') are also accepted.
height {string|number}
The (non-zero) height in pixels. Strings expressing percentages of parent with (e.g. '80%') are also accepted.
opt_coordWidth {?number=}
The coordinate width - if omitted or null, defaults to same as width.
opt_coordHeight {?number=}
The coordinate height - if omitted or null, defaults to same as height.
opt_domHelper {goog.dom.DomHelper=}
The DOM helper object for the document we want to render in.

.addChild(child, opt_render)

Inherited from goog.ui.Component .

Adds the specified component as the last child of this component. See {@link goog.ui.Component#addChildAt} for detailed semantics.

child {goog.ui.Component}
The new child component.
opt_render {boolean=}
If true, the child component will be rendered into the parent.
@see
goog.ui.Component#addChildAt

.addChildAt(child, index, opt_render)

Inherited from goog.ui.Component .

Adds the specified component as a child of this component at the given 0-based index. Both {@code addChild} and {@code addChildAt} assume the following contract between parent and child components:

In particular, {@code parent.addChild(child)} will throw an error if the child component is already in the document, but the parent isn't. Clients of this API may call {@code addChild} and {@code addChildAt} with {@code opt_render} set to true. If {@code opt_render} is true, calling these methods will automatically render the child component's element into the parent component's element. However, {@code parent.addChild(child, true)} will throw an error if: If {@code opt_render} is true and the parent component is not already in the document, {@code enterDocument} will not be called on this component at this point. Finally, this method also throws an error if the new child already has a different parent, or the given index is out of bounds.
child {goog.ui.Component}
The new child component.
index {number}
0-based index at which the new child component is to be added; must be between 0 and the current child count (inclusive).
opt_render {boolean=}
If true, the child component will be rendered into the parent.
returns {void}
Nada.
@see
goog.ui.Component#addChild

.addEventListener(type, handler, opt_capture, opt_handlerScope)

Inherited from goog.events.EventTarget .

Adds an event listener to the event target. The same handler can only be added once per the type. Even if you add the same handler multiple times using the same type then it will only be called once when the event is dispatched. Supported for legacy but use goog.events.listen(src, type, handler) instead.

type {string}
The type of the event to listen for.
handler {Function|Object}
The function to handle the event. The handler can also be an object that implements the handleEvent method which takes the event object as argument.
opt_capture {boolean=}
In DOM-compliant browsers, this determines whether the listener is fired during the capture or bubble phase of the event.
opt_handlerScope {Object=}
Object in whose scope to call the listener.

.addOnDisposeCallback(callback, opt_scope)

Inherited from goog.Disposable .

Invokes a callback function when this object is disposed. Callbacks are invoked in the order in which they were added.

callback {!Function}
The callback function.
opt_scope {Object=}
An optional scope to call the callback in.

.canDecorate(element)

Inherited from goog.ui.Component .

Determines if a given element can be decorated by this type of component. This method should be overridden by inheriting objects.

element {Element}
Element to decorate.
returns {boolean}
True if the element can be decorated, false otherwise.

.clear()

Remove all drawing elements from the graphics.

.createDom()

Creates the DOM representation of the graphics area.

.createGroup(opt_group)

Create an empty group of drawing elements.

opt_group {goog.graphics.GroupElement=}
The group wrapper element to append to. If not specified, appends to the main canvas.
returns {goog.graphics.CanvasGroupElement}
The newly created group.

.creationStack {string}

Inherited from goog.Disposable .

If monitoring the goog.Disposable instances is enabled, stores the creation stack trace of the Disposable instance.

.decorate(element)

Inherited from goog.ui.Component .

Decorates the element for the UI component.

element {Element}
Element to decorate.

.dispatchEvent(e)

Inherited from goog.events.EventTarget .

Dispatches an event (or event like object) and calls all listeners listening for events of this type. The type of the event is decided by the type property on the event object. If any of the listeners returns false OR calls preventDefault then this function will return false. If one of the capture listeners calls stopPropagation, then the bubble listeners won't fire.

e {string|Object|goog.events.Event}
Event object.
returns {boolean}
If anyone called preventDefault on the event object (or if any of the handlers returns false this will also return false.

.dispose()

Inherited from goog.Disposable .

Disposes of the object. If the object hasn't already been disposed of, calls {@link #disposeInternal}. Classes that extend {@code goog.Disposable} should override {@link #disposeInternal} in order to delete references to COM objects, DOM nodes, and other disposable objects. Reentrant.

returns {void}
Nothing.

.drawCircle(cx, cy, r, stroke, fill, opt_group)

Inherited from goog.graphics.AbstractGraphics .

Draw a circle

cx {number}
Center X coordinate.
cy {number}
Center Y coordinate.
r {number}
Radius length.
stroke {goog.graphics.Stroke?}
Stroke object describing the stroke.
fill {goog.graphics.Fill?}
Fill object describing the fill.
opt_group {goog.graphics.GroupElement=}
The group wrapper element to append to. If not specified, appends to the main canvas.
returns {goog.graphics.EllipseElement}
The newly created element.

.drawElement(element)

Draw an element, including any stroke or fill.

element {goog.graphics.Element}
The element to draw.

.drawEllipse(cx, cy, rx, ry, stroke, fill, opt_group)

Draw an ellipse.

cx {number}
Center X coordinate.
cy {number}
Center Y coordinate.
rx {number}
Radius length for the x-axis.
ry {number}
Radius length for the y-axis.
stroke {goog.graphics.Stroke}
Stroke object describing the stroke.
fill {goog.graphics.Fill}
Fill object describing the fill.
opt_group {goog.graphics.GroupElement=}
The group wrapper element to append to. If not specified, appends to the main canvas.
returns {goog.graphics.EllipseElement}
The newly created element.

.drawImage(x, y, width, height, src, opt_group)

Draw an image.

x {number}
X coordinate (left).
y {number}
Y coordinate (top).
width {number}
Width of image.
height {number}
Height of image.
src {string}
Source of the image.
opt_group {goog.graphics.GroupElement=}
The group wrapper element to append to. If not specified, appends to the main canvas.
returns {goog.graphics.ImageElement}
The newly created element.

.drawPath(path, stroke, fill, opt_group)

Draw a path.

path {!goog.graphics.Path}
The path object to draw.
stroke {goog.graphics.Stroke}
Stroke object describing the stroke.
fill {goog.graphics.Fill}
Fill object describing the fill.
opt_group {goog.graphics.GroupElement=}
The group wrapper element to append to. If not specified, appends to the main canvas.
returns {goog.graphics.PathElement}
The newly created element.

.drawRect(x, y, width, height, stroke, fill, opt_group)

Draw a rectangle.

x {number}
X coordinate (left).
y {number}
Y coordinate (top).
width {number}
Width of rectangle.
height {number}
Height of rectangle.
stroke {goog.graphics.Stroke}
Stroke object describing the stroke.
fill {goog.graphics.Fill}
Fill object describing the fill.
opt_group {goog.graphics.GroupElement=}
The group wrapper element to append to. If not specified, appends to the main canvas.
returns {goog.graphics.RectElement}
The newly created element.

.drawText(text, x, y, width, height, align, vAlign, font, stroke, fill, opt_group)

Inherited from goog.graphics.AbstractGraphics .

Draw a text string within a rectangle (drawing is horizontal)

text {string}
The text to draw.
x {number}
X coordinate (left).
y {number}
Y coordinate (top).
width {number}
Width of rectangle.
height {number}
Height of rectangle.
align {string}
Horizontal alignment: left (default), center, right.
vAlign {string}
Vertical alignment: top (default), center, bottom.
font {goog.graphics.Font}
Font describing the font properties.
stroke {goog.graphics.Stroke?}
Stroke object describing the stroke.
fill {goog.graphics.Fill?}
Fill object describing the fill.
opt_group {goog.graphics.GroupElement=}
The group wrapper element to append to. If not specified, appends to the main canvas.
returns {goog.graphics.TextElement}
The newly created element.

.drawTextOnLine(text, x1, y1, x2, y2, align, font, stroke, fill, opt_group)

Draw a text string vertically centered on a given line.

text {string}
The text to draw.
x1 {number}
X coordinate of start of line.
y1 {number}
Y coordinate of start of line.
x2 {number}
X coordinate of end of line.
y2 {number}
Y coordinate of end of line.
align {?string}
Horizontal alignment: left (default), center, right.
font {goog.graphics.Font}
Font describing the font properties.
stroke {goog.graphics.Stroke}
Stroke object describing the stroke.
fill {goog.graphics.Fill}
Fill object describing the fill.
opt_group {goog.graphics.GroupElement=}
The group wrapper element to append to. If not specified, appends to the main canvas.
returns {goog.graphics.TextElement}
The newly created element.

.enterDocument()

.exitDocument()

Inherited from goog.ui.Component .

Called by dispose to clean up the elements and listeners created by a component, or by a parent component/application who has removed the component from the document but wants to reuse it later. If the component contains child components, this call is propagated to its children. It should be possible for the component to be rendered again once this method has been called.

.forEachChild(f, opt_obj)

Inherited from goog.ui.Component .

Calls the given function on each of this component's children in order. If {@code opt_obj} is provided, it will be used as the 'this' object in the function when called. The function should take two arguments: the child component and its 0-based index. The return value is ignored.

f {Function}
The function to call for every child component; should take 2 arguments (the child and its index).
opt_obj {Object=}
Used as the 'this' object in f when called.

.getCanvasElement()

Inherited from goog.graphics.AbstractGraphics .

returns {goog.graphics.GroupElement}
The root level canvas element.

.getChild(id)

Inherited from goog.ui.Component .

Returns the child with the given ID, or null if no such child exists.

id {string}
Child component ID.
returns {goog.ui.Component?}
The child with the given ID; null if none.

.getChildAt(index)

Inherited from goog.ui.Component .

Returns the child at the given index, or null if the index is out of bounds.

index {number}
0-based index.
returns {goog.ui.Component?}
The child at the given index; null if none.

.getChildCount()

Inherited from goog.ui.Component .

Returns the number of children of this component.

returns {number}
The number of children.

.getChildIds()

Inherited from goog.ui.Component .

Returns an array containing the IDs of the children of this component, or an empty array if the component has no children.

returns {Array.<string>}
Child component IDs.

.getContentElement()

Inherited from goog.ui.Component .

Returns the DOM element into which child components are to be rendered, or null if the component itself hasn't been rendered yet. This default implementation returns the component's root element. Subclasses with complex DOM structures must override this method.

returns {Element}
Element to contain child elements (null if none).

.getContext()

Returns the drawing context.

returns {Object}
The canvas element rendering context.

.getCoordOrigin()

Inherited from goog.graphics.AbstractGraphics .

returns {goog.math.Coordinate}
The coordinate system position.

.getCoordSize()

Inherited from goog.graphics.AbstractGraphics .

returns {goog.math.Size}
The coordinate size.

.getDomHelper()

Inherited from goog.ui.Component .

Returns the dom helper that is being used on this component.

returns {!goog.dom.DomHelper}
The dom helper used on this component.

.getElement()

Inherited from goog.ui.Component .

Gets the component's element.

returns {Element}
The element for the component.

.getElementByClass(className)

Inherited from goog.ui.Component .

Returns the first element in this component's DOM with the provided className.

className {string}
The name of the class to look for.
returns {Element}
The first item with the class name provided.

.getElementByFragment(idFragment)

Inherited from goog.ui.Component .

Helper function for returning an element in the document with a unique id generated using makeId().

idFragment {string}
The partial id.
returns {Element}
The element with the unique id, or null if it cannot be found.

.getElementsByClass(className)

Inherited from goog.ui.Component .

Returns an array of all the elements in this component's DOM with the provided className.

className {string}
The name of the class to look for.
returns {!goog.array.ArrayLike}
The items found with the class name provided.

.getFragmentFromId(id)

Inherited from goog.ui.Component .

Helper function for returning the fragment portion of an id generated using makeId().

id {string}
Id generated with makeId().
returns {string}
Fragment.

.getId()

Inherited from goog.ui.Component .

Gets the unique ID for the instance of this component. If the instance doesn't already have an ID, generates one on the fly.

returns {string}
Unique component ID.

.getModel()

Inherited from goog.ui.Component .

Returns the model associated with the UI component.

returns {*}
The model.

.getParent()

Inherited from goog.ui.Component .

Returns the component's parent, if any.

returns {goog.ui.Component?}
The parent component.

.getParentEventTarget()

Inherited from goog.events.EventTarget .

Returns the parent of this event target to use for bubbling.

returns {goog.events.EventTarget}
The parent EventTarget or null if there is no parent.

.getPixelScaleX()

Inherited from goog.graphics.AbstractGraphics .

returns {number}
Returns the number of pixels per unit in the x direction.

.getPixelScaleY()

Inherited from goog.graphics.AbstractGraphics .

returns {number}
Returns the number of pixels per unit in the y direction.

.getPixelSize()

returns {goog.math.Size?}
Returns the number of pixels spanned by the surface, or null if the size could not be computed due to the size being specified in percentage points and the component not being in the document.

.getTextWidth(text, font)

Measure and return the width (in pixels) of a given text string. Text measurement is needed to make sure a text can fit in the allocated area. The way text length is measured is by writing it into a div that is after the visible area, measure the div width, and immediatly erase the written value.

text {string}
The text string to measure.
font {goog.graphics.Font}
The font object describing the font style.
returns {number}
The width in pixels of the text strings.

.hasChildren()

Inherited from goog.ui.Component .

Returns true if the component has children.

returns {boolean}
True if the component has children.

.indexOfChild(child)

Inherited from goog.ui.Component .

Returns the 0-based index of the given child component, or -1 if no such child is found.

child {goog.ui.Component?}
The child component.
returns {number}
0-based index of the child component; -1 if not found.

.isDisposed()

Inherited from goog.Disposable .

returns {boolean}
Whether the object has been disposed of.

.isDomClonable()

Inherited from goog.graphics.AbstractGraphics .

returns {boolean}
Whether the underlying element can be cloned resulting in an accurate reproduction of the graphics contents.

.isDrawable(group)

group {goog.graphics.GroupElement}
The group to possibly draw to.
returns {boolean}
Whether drawing can occur now.

.isInDocument()

Inherited from goog.ui.Component .

Determines whether the component has been added to the document.

returns {boolean}
TRUE if rendered. Otherwise, FALSE.

.isRedrawRequired(group)

Returns true if drawing to the given group means a redraw is required.

group {goog.graphics.GroupElement}
The group to draw to.
returns {boolean}
Whether drawing to this group should force a redraw.

.isRightToLeft()

Inherited from goog.ui.Component .

Returns true if the component is rendered right-to-left, false otherwise. The first time this function is invoked, the right-to-left rendering property is set if it has not been already.

returns {boolean}
Whether the control is rendered right-to-left.

.makeId(idFragment)

Inherited from goog.ui.Component .

Helper function for subclasses that gets a unique id for a given fragment, this can be used by components to generate unique string ids for DOM elements.

idFragment {string}
A partial id.
returns {string}
Unique element id.

.makeIds(object)

Inherited from goog.ui.Component .

Makes a collection of ids. This is a convenience method for makeId. The object's values are the id fragments and the new values are the generated ids. The key will remain the same.

object {Object}
The object that will be used to create the ids.
returns {Object}
An object of id keys to generated ids.

.popElementTransform()

Pop an element transform off of the transform stack.

.pushElementTransform(element)

Push an element transform on to the transform stack.

element {goog.graphics.Element}
The transformed element.

.redraw()

Redraw the entire canvas.

.registerDisposable(disposable)

Inherited from goog.Disposable .

Associates a disposable object with this object so that they will be disposed together.

disposable {goog.disposable.IDisposable}
that will be disposed when this object is disposed.

.removeChild(child, opt_unrender)

Inherited from goog.ui.Component .

Removes the given child from this component, and returns it. Throws an error if the argument is invalid or if the specified child isn't found in the parent component. The argument can either be a string (interpreted as the ID of the child component to remove) or the child component itself. If {@code opt_unrender} is true, calls {@link goog.ui.component#exitDocument} on the removed child, and subsequently detaches the child's DOM from the document. Otherwise it is the caller's responsibility to clean up the child component's DOM.

child {string|goog.ui.Component|null}
The ID of the child to remove, or the child component itself.
opt_unrender {boolean=}
If true, calls {@code exitDocument} on the removed child component, and detaches its DOM from the document.
returns {goog.ui.Component}
The removed component, if any.
@see
goog.ui.Component#removeChildAt

.removeChildAt(index, opt_unrender)

Inherited from goog.ui.Component .

Removes the child at the given index from this component, and returns it. Throws an error if the argument is out of bounds, or if the specified child isn't found in the parent. See {@link goog.ui.Component#removeChild} for detailed semantics.

index {number}
0-based index of the child to remove.
opt_unrender {boolean=}
If true, calls {@code exitDocument} on the removed child component, and detaches its DOM from the document.
returns {goog.ui.Component}
The removed component, if any.
@see
goog.ui.Component#removeChild

.removeChildren(opt_unrender)

Inherited from goog.ui.Component .

Removes every child component attached to this one and returns them.

opt_unrender {boolean=}
If true, calls {@link #exitDocument} on the removed child components, and detaches their DOM from the document.
returns {!Array.<goog.ui.Component>|undefined}
The removed components if any.
@see
goog.ui.Component#removeChild

.removeElement(element)

Inherited from goog.graphics.AbstractGraphics .

Remove a single drawing element from the surface. The default implementation assumes a DOM based drawing surface.

element {goog.graphics.Element}
The element to remove.

.removeEventListener(type, handler, opt_capture, opt_handlerScope)

Inherited from goog.events.EventTarget .

Removes an event listener from the event target. The handler must be the same object as the one added. If the handler has not been added then nothing is done.

type {string}
The type of the event to listen for.
handler {Function|Object}
The function to handle the event. The handler can also be an object that implements the handleEvent method which takes the event object as argument.
opt_capture {boolean=}
In DOM-compliant browsers, this determines whether the listener is fired during the capture or bubble phase of the event.
opt_handlerScope {Object=}
Object in whose scope to call the listener.

.render(opt_parentElement)

Inherited from goog.ui.Component .

Renders the component. If a parent element is supplied, the component's element will be appended to it. If there is no optional parent element and the element doesn't have a parentNode then it will be appended to the document body. If this component has a parent component, and the parent component is not in the document already, then this will not call {@code enterDocument} on this component. Throws an Error if the component is already rendered.

opt_parentElement {Element=}
Optional parent element to render the component into.

.renderBefore(sibling)

Inherited from goog.ui.Component .

Renders the component before another element. The other element should be in the document already. Throws an Error if the component is already rendered.

sibling {Node}
Node to render the component before.

.reset()

Reset the canvas.

.resume()

Stop preventing redraws. If any redraws had been prevented, a redraw will be done now.

.setCoordOrigin(left, top)

Changes the coordinate system position.

left {number}
The coordinate system left bound.
top {number}
The coordinate system top bound.

.setCoordSize(coordWidth, coordHeight)

Changes the coordinate size.

coordWidth {number}
The coordinate width.
coordHeight {number}
The coordinate height.

.setElementFill(element, fill)

Sets the fill for the given element.

element {goog.graphics.StrokeAndFillElement}
The element wrapper.
fill {goog.graphics.Fill}
The fill object.

.setElementStroke(element, stroke)

Sets the stroke for the given element.

element {goog.graphics.StrokeAndFillElement}
The element wrapper.
stroke {goog.graphics.Stroke}
The stroke object.

.setElementTransform(element, x, y, angle, centerX, centerY)

Set the transformation of an element.

element {goog.graphics.Element}
The element wrapper.
x {number}
The x coordinate of the translation transform.
y {number}
The y coordinate of the translation transform.
angle {number}
The angle of the rotation transform.
centerX {number}
The horizontal center of the rotation transform.
centerY {number}
The vertical center of the rotation transform.

.setId(id)

Inherited from goog.ui.Component .

Assigns an ID to this component instance. It is the caller's responsibility to guarantee that the ID is unique. If the component is a child of a parent component, then the parent component's child index is updated to reflect the new ID; this may throw an error if the parent already has a child with an ID that conflicts with the new ID.

id {string}
Unique component ID.

.setModel(obj)

Inherited from goog.ui.Component .

Sets the model associated with the UI component.

obj {*}
The model.

.setParent(parent)

Inherited from goog.ui.Component .

Sets the parent of this component to use for event bubbling. Throws an error if the component already has a parent or if an attempt is made to add a component to itself as a child. Callers must use {@code removeChild} or {@code removeChildAt} to remove components from their containers before calling this method.

parent {goog.ui.Component}
The parent component.
@see
goog.ui.Component#removeChild
@see
goog.ui.Component#removeChildAt

.setParentEventTarget(parent)

Inherited from goog.ui.Component .

Overrides {@link goog.events.EventTarget#setParentEventTarget} to throw an error if the parent component is set, and the argument is not the parent.

parent {goog.events.EventTarget?}
Parent EventTarget (null if none).

.setRightToLeft(rightToLeft)

Inherited from goog.ui.Component .

Set is right-to-left. This function should be used if the component needs to know the rendering direction during dom creation (i.e. before {@link #enterDocument} is called and is right-to-left is set).

rightToLeft {boolean}
Whether the component is rendered right-to-left.

.setSize(pixelWidth, pixelHeight)

Change the size of the canvas.

pixelWidth {number}
The width in pixels.
pixelHeight {number}
The height in pixels.

.suspend()

Start preventing redraws - useful for chaining large numbers of changes together. Not guaranteed to do anything - i.e. only use this for optimization of a single code path.

.updateSize()

Update the size of the canvas.

.wasDecorated()

Inherited from goog.ui.Component .

returns {boolean}
Whether the component was decorated.