com.google.gwt.widgetideas.graphics.client
Class GWTCanvas

java.lang.Object
  com.google.gwt.user.client.ui.UIObject
      com.google.gwt.user.client.ui.Widget
          com.google.gwt.widgetideas.graphics.client.GWTCanvas

All Implemented Interfaces:

com.google.gwt.user.client.EventListener

public class GWTCanvas
extends com.google.gwt.user.client.ui.Widget

2D Graphics API. API mimicks functionality found in the Javascript canvas API (see canvas tutorial).

Performance may scale differently for IE than for browsers with a native canvas implementation. Sub-pixel precision is supported where possible.

Nested Class Summary

Nested classes/interfaces inherited from class com.google.gwt.user.client.ui.UIObject

com.google.gwt.user.client.ui.UIObject.DebugIdImpl, com.google.gwt.user.client.ui.UIObject.DebugIdImplEnabled

Field Summary

static java.lang.String	BEVEL Use this constant as a parameter for the setLineJoin(String) method.
static java.lang.String	BUTT Use this constant as a parameter for the setLineCap(String) method.
static java.lang.String	DESTINATION_OVER Use this constant as a parameter for the setGlobalCompositeOperation(String) method.
static java.lang.String	MITER Use this constant as a parameter for the setLineJoin(String) method.
static java.lang.String	ROUND Use this constant either as a parameter for the setLineCap(String) or the setLineJoin(String) method.
static java.lang.String	SOURCE_OVER Use this constant as a parameter for the setGlobalCompositeOperation(String) method.
static java.lang.String	SQUARE Use this constant as a parameter for the setLineCap(String) method.
static Color	TRANSPARENT Use this constant as a parameter for the setBackgroundColor(Color) method.

Fields inherited from class com.google.gwt.user.client.ui.UIObject

DEBUG_ID_PREFIX

Constructor Summary

GWTCanvas()
Creates a GWTCanvas element.

GWTCanvas(int coordX, int coordY)
Creates a GWTCanvas element.

GWTCanvas(int coordX, int coordY, int pixelX, int pixelY)
Creates a GWTCanvas element.

Method Summary

void	arc(double x, double y, double radius, double startAngle, double endAngle, boolean antiClockwise) Draws an arc.
void	beginPath() Erases the current path and prepares it for a new path.
void	clear() Clears the entire canvas.
void	closePath() Closes the current path.
CanvasGradient	createLinearGradient(double x0, double y0, double x1, double y1) Creates a LinearGradient Object for use as a fill or stroke style.
CanvasGradient	createRadialGradient(double x0, double y0, double r0, double x1, double y1, double r1) Creates a RadialGradient Object for use as a fill or stroke style.
void	cubicCurveTo(double cp1x, double cp1y, double cp2x, double cp2y, double x, double y) Does nothing if the context's path is empty.
void	drawImage(com.google.gwt.dom.client.ImageElement img, double offsetX, double offsetY) Draws an input image to a specified position on the canvas.
void	drawImage(com.google.gwt.dom.client.ImageElement img, double offsetX, double offsetY, double width, double height) Draws an input image at a given position on the canvas.
void	fill() Fills the current path according to the current fillstyle.
void	fillRect(double startX, double startY, double width, double height) Fills a rectangle of the specified dimensions, at the specified start coords, according to the current fillstyle.
int	getCoordHeight() Returns the height in pixels of the canvas.
int	getCoordWidth() Returns the width in pixels of the canvas.
double	getGlobalAlpha() See setter method for a fully detailed description.
java.lang.String	getGlobalCompositeOperation() See setter method for a fully detailed description.
java.lang.String	getLineCap() See setter method for a fully detailed description.
java.lang.String	getLineJoin() See setter method for a fully detailed description.
double	getLineWidth() See setter method for a fully detailed description.
double	getMiterLimit() See setter method for a fully detailed description.
void	lineTo(double x, double y) Adds a line from the last point in the current path to the point defined by x and y.
void	moveTo(double x, double y) Makes the last point in the current path be (x,y).
void	quadraticCurveTo(double cpx, double cpy, double x, double y) Does nothing if the context has an empty path.
void	rect(double startX, double startY, double width, double height) Adds a rectangle to the current path, and closes the path.
void	resize(int width, int height) Convenience function for resizing the canvas with consistent coordinate and screen pixel spaces.
void	restoreContext() Restores the last saved context from the context stack.
void	rotate(double angle) Adds a rotation of the specified angle to the current transform.
void	saveContext() Saves the current context to the context stack.
void	scale(double x, double y) Adds a scale transformation to the current transformation matrix.
void	setBackgroundColor(Color color) Sets the background color of the canvas element.
void	setCoordHeight(int height) Sets the coordinate height of the Canvas.
void	setCoordSize(int width, int height) Sets the coordinate space of the Canvas.
void	setCoordWidth(int width) Sets the coordinate width of the Canvas.
void	setFillStyle(CanvasGradient grad) Set the current Fill Style to the specified color gradient.
void	setFillStyle(Color color) Set the current Fill Style to the specified color.
void	setGlobalAlpha(double alpha) Set the global transparency to the specified alpha.
void	setGlobalCompositeOperation(java.lang.String globalCompositeOperation) Determines how the canvas is displayed relative to any background content.
void	setLineCap(java.lang.String lineCap) A string value that determines the end style used when drawing a line.
void	setLineJoin(java.lang.String lineJoin) A string value that determines the join style between lines.
void	setLineWidth(double width) Sets the current context's linewidth.
void	setMiterLimit(double miterLimit) A double value with the new miter limit.
void	setPixelHeight(int height) Sets the CSS height of the canvas in pixels.
void	setPixelWidth(int width) Sets the CSS width in pixels for the canvas.
void	setStrokeStyle(CanvasGradient grad) Set the current Stroke Style to the specified color gradient.
void	setStrokeStyle(Color color) Set the current Stroke Style to the specified color.
void	stroke() Strokes the current path according to the current stroke style.
void	strokeRect(double startX, double startY, double width, double height) Strokes a rectangle defined by the supplied arguments.
void	transform(double m11, double m12, double m21, double m22, double dx, double dy) The transform(m11, m12, m21, m22, dx, dy) method must multiply the current transformation matrix with the input matrix.
void	translate(double x, double y) Applies a translation (linear shift) by x in the horizontal and by y in the vertical.

Methods inherited from class com.google.gwt.user.client.ui.Widget

doAttachChildren, doDetachChildren, getParent, isAttached, onAttach, onBrowserEvent, onDetach, onLoad, onUnload, removeFromParent

Methods inherited from class com.google.gwt.user.client.ui.UIObject

addStyleDependentName, addStyleName, ensureDebugId, ensureDebugId, ensureDebugId, getAbsoluteLeft, getAbsoluteTop, getElement, getOffsetHeight, getOffsetWidth, getStyleElement, getStyleName, getStyleName, getStylePrimaryName, getStylePrimaryName, getTitle, isVisible, isVisible, onEnsureDebugId, removeStyleDependentName, removeStyleName, setElement, setElement, setHeight, setPixelSize, setSize, setStyleName, setStyleName, setStyleName, setStylePrimaryName, setStylePrimaryName, setTitle, setVisible, setVisible, setWidth, sinkEvents, toString, unsinkEvents

Methods inherited from class java.lang.Object

clone, equals, finalize, getClass, hashCode, notify, notifyAll, wait, wait, wait

Field Detail

BEVEL

public static final java.lang.String BEVEL

Use this constant as a parameter for the setLineJoin(String) method.

See Also:

Constant Field Values

BUTT

public static final java.lang.String BUTT

Use this constant as a parameter for the setLineCap(String) method.

See Also:

Constant Field Values

DESTINATION_OVER

public static final java.lang.String DESTINATION_OVER

Use this constant as a parameter for the setGlobalCompositeOperation(String) method.

See Also:

Constant Field Values

MITER

public static final java.lang.String MITER

Use this constant as a parameter for the setLineJoin(String) method.

See Also:

Constant Field Values

ROUND

public static final java.lang.String ROUND

Use this constant either as a parameter for the setLineCap(String) or the setLineJoin(String) method.

See Also:

Constant Field Values

SOURCE_OVER

public static final java.lang.String SOURCE_OVER

Use this constant as a parameter for the setGlobalCompositeOperation(String) method.

See Also:

Constant Field Values

SQUARE

public static final java.lang.String SQUARE

Use this constant as a parameter for the setLineCap(String) method.

See Also:

Constant Field Values

TRANSPARENT

public static final Color TRANSPARENT

Use this constant as a parameter for the setBackgroundColor(Color) method.

Constructor Detail

GWTCanvas

public GWTCanvas()

Creates a GWTCanvas element. Element type depends on deferred binding. Default is CANVAS HTML5 DOM element. In the case of IE it should be VML.

Screen size of canvas in pixels defaults to 300x150 pixels.

GWTCanvas

public GWTCanvas(int coordX,
                 int coordY)

Creates a GWTCanvas element. Element type depends on deferred binding. Default is CANVAS HTML5 DOM element. In the case of IE it should be VML.

Screen size of canvas in pixels defaults to the coordinate space dimensions for this constructor.

Parameters:

coordX - the size of the coordinate space in the x direction

coordY - the size of the coordinate space in the y direction

GWTCanvas

public GWTCanvas(int coordX,
                 int coordY,
                 int pixelX,
                 int pixelY)

Creates a GWTCanvas element. Element type depends on deferred binding. Default is CANVAS HTML5 DOM element. In the case of IE it should be VML.

Different coordinate spaces and pixel spaces will cause aliased scaling. Use scale(double,double) and consistent coordinate and pixel spaces for better results.

Parameters:

coordX - the size of the coordinate space in the x direction

coordY - the size of the coordinate space in the y direction

pixelX - the CSS width in pixels of the canvas element

pixelY - the CSS height in pixels of the canvas element

Method Detail

arc

public void arc(double x,
                double y,
                double radius,
                double startAngle,
                double endAngle,
                boolean antiClockwise)

Draws an arc. If the context has a non-empty path, then the method must add a straight line from the last point in the path to the start point of the arc.

Parameters:

x - center X coordinate

y - center Y coordinate

radius - radius of drawn arc

startAngle - angle measured from positive X axis to start of arc CW

endAngle - angle measured from positive X axis to end of arc CW

antiClockwise - direction that the arc line is drawn

beginPath

public void beginPath()

Erases the current path and prepares it for a new path.

clear

public void clear()

Clears the entire canvas.

closePath

public void closePath()

Closes the current path. "Closing" simply means that a line is drawn from the last element in the path back to the first.

createLinearGradient

public CanvasGradient createLinearGradient(double x0,
                                           double y0,
                                           double x1,
                                           double y1)

Creates a LinearGradient Object for use as a fill or stroke style.

Parameters:

x0 - x coord of start point of gradient

y0 - y coord of start point of gradient

x1 - x coord of end point of gradient

y1 - y coord of end point of gradient

Returns:

returns the CanvasGradient

createRadialGradient

public CanvasGradient createRadialGradient(double x0,
                                           double y0,
                                           double r0,
                                           double x1,
                                           double y1,
                                           double r1)

Creates a RadialGradient Object for use as a fill or stroke style.

Parameters:

x0 - x coord of origin of start circle

y0 - y coord of origin of start circle

r0 - radius of start circle

x1 - x coord of origin of end circle

y1 - y coord of origin of end circle

r1 - radius of the end circle

Returns:

returns the CanvasGradient

cubicCurveTo

public void cubicCurveTo(double cp1x,
                         double cp1y,
                         double cp2x,
                         double cp2y,
                         double x,
                         double y)

Does nothing if the context's path is empty. Otherwise, it connects the last point in the path to the given point (x, y) using a cubic Bˇzier curve with control points (cp1x, cp1y) and (cp2x, cp2y). Then, it must add the point (x, y) to the path. This function corresponds to the bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) method in canvas element Javascript API.

Parameters:

cp1x - x coord of first Control Point

cp1y - y coord of first Control Point

cp2x - x coord of second Control Point

cp2y - y coord of second Control Point

x - x coord of point

y - x coord of point

drawImage

public void drawImage(com.google.gwt.dom.client.ImageElement img,
                      double offsetX,
                      double offsetY)

Draws an input image to a specified position on the canvas. Size defaults to the default dimensions of the image.

Parameters:

img - the image to be drawn

offsetX - x coord of the top left corner in the destination space

offsetY - y coord of the top left corner in the destination space

drawImage

public void drawImage(com.google.gwt.dom.client.ImageElement img,
                      double offsetX,
                      double offsetY,
                      double width,
                      double height)

Draws an input image at a given position on the canvas. Resizes image according to specified width and height.

We recommend that the pixel and coordinate spaces be the same to provide consistent positioning and scaling results

Parameters:

img - The image to be drawn

offsetX - x coord of the top left corner in the destination space

offsetY - y coord of the top left corner in the destination space

width - the size of the image in the destination space

height - the size of the image in the destination space

fill

public void fill()

Fills the current path according to the current fillstyle.

fillRect

public void fillRect(double startX,
                     double startY,
                     double width,
                     double height)

Fills a rectangle of the specified dimensions, at the specified start coords, according to the current fillstyle.

Parameters:

startX - x coord of the top left corner in the destination space

startY - y coord of the top left corner in the destination space

width - destination width of image

height - destination height of image

getCoordHeight

public int getCoordHeight()

Returns the height in pixels of the canvas.

Returns:

returns the height in pixels of the canvas

getCoordWidth

public int getCoordWidth()

Returns the width in pixels of the canvas.

Returns:

returns the width in pixels of the canvas

getGlobalAlpha

public double getGlobalAlpha()

See setter method for a fully detailed description.

Returns:

See Also:

setGlobalAlpha(double)

getGlobalCompositeOperation

public java.lang.String getGlobalCompositeOperation()

See setter method for a fully detailed description.

Returns:

See Also:

setGlobalCompositeOperation(String)

getLineCap

public java.lang.String getLineCap()

See setter method for a fully detailed description.

Returns:

See Also:

setLineCap(String)

getLineJoin

public java.lang.String getLineJoin()

See setter method for a fully detailed description.

Returns:

See Also:

setLineJoin(String)

getLineWidth

public double getLineWidth()

See setter method for a fully detailed description.

Returns:

See Also:

setLineWidth(double)

getMiterLimit

public double getMiterLimit()

See setter method for a fully detailed description.

Returns:

See Also:

setMiterLimit(double)

lineTo

public void lineTo(double x,
                   double y)

Adds a line from the last point in the current path to the point defined by x and y.

Parameters:

x - x coord of point

y - y coord of point

moveTo

public void moveTo(double x,
                   double y)

Makes the last point in the current path be (x,y).

Parameters:

x - x coord of point

y - y coord of point

quadraticCurveTo

public void quadraticCurveTo(double cpx,
                             double cpy,
                             double x,
                             double y)

Does nothing if the context has an empty path. Otherwise it connects the last point in the path to the given point (x, y) using a quadratic Bˇzier curve with control point (cpx, cpy), and then adds the given point (x, y) to the path.

Parameters:

cpx - x coord of the control point

cpy - y coord of the control point

x - x coord of the point

y - y coord of the point

rect

public void rect(double startX,
                 double startY,
                 double width,
                 double height)

Adds a rectangle to the current path, and closes the path.

Parameters:

startX - x coord of the top left corner of the rectangle

startY - y coord of the top left corner of the rectangle

width - the width of the rectangle

height - the height of the rectangle

resize

public void resize(int width,
                   int height)

Convenience function for resizing the canvas with consistent coordinate and screen pixel spaces. Equivalent to doing:

 canvas.setCoordSize(width, height);
 canvas.setPixelHeight(height);
 canvas.setPixelWidth(width);
 

Parameters:

width -

height -

restoreContext

public void restoreContext()

Restores the last saved context from the context stack.

rotate

public void rotate(double angle)

Adds a rotation of the specified angle to the current transform.

Parameters:

angle - the angle to rotate by, in radians

saveContext

public void saveContext()

Saves the current context to the context stack.

scale

public void scale(double x,
                  double y)

Adds a scale transformation to the current transformation matrix.

Parameters:

x - ratio that we must scale in the X direction

y - ratio that we must scale in the Y direction

setBackgroundColor

public void setBackgroundColor(Color color)

Sets the background color of the canvas element.

Parameters:

color - the background color.

setCoordHeight

public void setCoordHeight(int height)

Sets the coordinate height of the Canvas.

This will erase the canvas contents!

Parameters:

height - the size of the y component of the coordinate space

setCoordSize

public void setCoordSize(int width,
                         int height)

Sets the coordinate space of the Canvas.

This will erase the canvas contents!

Parameters:

width - the size of the x component of the coordinate space

height - the size of the y component of the coordinate space

setCoordWidth

public void setCoordWidth(int width)

Sets the coordinate width of the Canvas.

This will erase the canvas contents!

Parameters:

width - the size of the x component of the coordinate space

setFillStyle

public void setFillStyle(CanvasGradient grad)

Set the current Fill Style to the specified color gradient.

Parameters:

grad - CanvasGradient

setFillStyle

public void setFillStyle(Color color)

Set the current Fill Style to the specified color.

Parameters:

color - Color

setGlobalAlpha

public void setGlobalAlpha(double alpha)

Set the global transparency to the specified alpha.

Parameters:

alpha - alpha value

setGlobalCompositeOperation

public void setGlobalCompositeOperation(java.lang.String globalCompositeOperation)

Determines how the canvas is displayed relative to any background content. The string identifies the desired compositing mode. If you do not set this value explicitly, the canvas uses the GWTCanvas.SOURCE_OVER compositing mode.

The valid compositing operators are:

• GWTCanvas.SOURCE_OVER
• GWTCanvas.DESTINATION_OVER

Parameters:

globalCompositeOperation -

setLineCap

public void setLineCap(java.lang.String lineCap)

A string value that determines the end style used when drawing a line. Specify the string GWTCanvas.BUTT for a flat edge that is perpendicular to the line itself, GWTCanvas.ROUND for round endpoints, or GWTCanvas.SQUARE for square endpoints. If you do not set this value explicitly, the canvas uses the GWTCanvas.BUTT line cap style.

Parameters:

lineCap -

setLineJoin

public void setLineJoin(java.lang.String lineJoin)

A string value that determines the join style between lines. Specify the string GWTCanvas.ROUND for round joins, GWTCanvas.BEVEL for beveled joins, or GWTCanvas.MITER for miter joins. If you do not set this value explicitly, the canvas uses the GWTCanvas.MITER line join style.

Parameters:

lineJoin -

setLineWidth

public void setLineWidth(double width)

Sets the current context's linewidth. Line width is the thickness of a stroked line.

Parameters:

width - the width of the canvas

setMiterLimit

public void setMiterLimit(double miterLimit)

A double value with the new miter limit. You use this property to specify how the canvas draws the juncture between connected line segments. If the line join is set to GWTCanvas.MITER, the canvas uses the miter limit to determine whether the lines should be joined with a bevel instead of a miter. The canvas divides the length of the miter by the line width. If the result is greater than the miter limit, the style is converted to a bevel.

Parameters:

miterLimit -

setPixelHeight

public void setPixelHeight(int height)

Sets the CSS height of the canvas in pixels.

Parameters:

height - the height of the canvas in pixels

setPixelWidth

public void setPixelWidth(int width)

Sets the CSS width in pixels for the canvas.

Parameters:

width - width of the canvas in pixels

setStrokeStyle

public void setStrokeStyle(CanvasGradient grad)

Set the current Stroke Style to the specified color gradient.

Parameters:

grad - CanvasGradient

setStrokeStyle

public void setStrokeStyle(Color color)

Set the current Stroke Style to the specified color.

Parameters:

color - Color

stroke

public void stroke()

Strokes the current path according to the current stroke style.

strokeRect

public void strokeRect(double startX,
                       double startY,
                       double width,
                       double height)

Strokes a rectangle defined by the supplied arguments.

Parameters:

startX - x coord of the top left corner

startY - y coord of the top left corner

width - width of the rectangle

height - height of the rectangle

transform

public void transform(double m11,
                      double m12,
                      double m21,
                      double m22,
                      double dx,
                      double dy)

The transform(m11, m12, m21, m22, dx, dy) method must multiply the current transformation matrix with the input matrix. Input described by:

 m11   m21   dx
 m12   m22   dy
 0      0     1 

Parameters:

m11 - top left cell of 2x2 rotation matrix

m12 - top right cell of 2x2 rotation matrix

m21 - bottom left cell of 2x2 rotation matrix

m22 - bottom right cell of 2x2 rotation matrix

dx - Translation in X direction

dy - Translation in Y direction

translate

public void translate(double x,
                      double y)

Applies a translation (linear shift) by x in the horizontal and by y in the vertical.

Parameters:

x - amount to shift in the x direction

y - amount to shift in the y direction