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

java.lang.Object
  extended by com.google.gwt.user.client.ui.UIObject
      extended by com.google.gwt.user.client.ui.Widget
          extended by 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:

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