Package org.pepstock.charba.client.dom.elements

Class Context2dItem

  • All Implemented Interfaces:
    IsJSType
    @JsType(isNative=true,
        name="CanvasRenderingContext2D",
        namespace="<global>")
public final class Context2dItem
extends BaseHtmlElement
    DOM object which provides the 2D rendering context for the drawing surface of a canvas element.
    It is used for drawing shapes, text, images, and other objects.
    Author:
    Andrea "Stock" Stocchero

    • Method Summary

      All Methods Instance Methods Concrete Methods 
      Modifier and Type Method Description
      void addRoundedRectPath​(double x, double y, double width, double height, BarBorderRadius radius)
      Draws an rectangle with rounded edges.
      void arc​(double x, double y, double radius, double startAngle, double endAngle)
      Adds a circular arc to the current sub-path.
      The arc method creates a circular arc centered at (x, y) with a radius of radius.
      The path starts at "startAngle", ends at "endAngle", and travels in the clockwise direction.
      void arc​(double x, double y, double radius, double startAngle, double endAngle, boolean anticlockwise)
      Adds a circular arc to the current sub-path.
      The arc method creates a circular arc centered at (x, y) with a radius of radius.
      The path starts at "startAngle", ends at "endAngle", and travels in the direction given by "anticlockwise" (defaulting to clockwise).
      void arcTo​(double x1, double y1, double x2, double y2, double radius)
      adds a circular arc to the current sub-path, using the given control points and radius.
      The arc is automatically connected to the path's latest point with a straight line, if necessary for the specified parameters.
      This method is commonly used for making rounded corners.
      void beginPath()
      Starts a new path by emptying the list of sub-paths.
      Call this method when you want to create a new path.
      void bezierCurveTo​(double cp1x, double cp1y, double cp2x, double cp2y, double x, double y)
      Adds a cubic Bézier curve to the current sub-path.
      It requires three points: the first two are control points and the third one is the end point.
      The starting point is the latest point in the current path.
      void clearRect​(double x, double y, double width, double height)
      Erases the pixels in a rectangular area by setting them to transparent black.
      void clip()
      Turns the current or given path in the current clipping region.
      It replaces any previous clipping region..
      void closePath()
      Causes the point of the pen to move back to the start of the current sub-path.
      It tries to draw a straight line from the current point to the start.
      If the shape has already been closed or has only one point, this function does nothing.
      ImageData createImageData​(double width, double height)
      Returns an empty ImageData object representing the underlying pixel data for a specified portion of the canvas.
      CanvasGradientItem createLinearGradient​(double x0, double y0, double x1, double y1)
      Creates a gradient along the line connecting two given coordinates.
      CanvasPatternItem createPattern​(Canvas canvas, Repetition repetition)
      Creates a pattern using the specified canvas and repetition.
      CanvasPatternItem createPattern​(Img image, Repetition repetition)
      Creates a pattern using the specified image and repetition.
      CanvasGradientItem createRadialGradient​(double x0, double y0, double r0, double x1, double y1, double r1)
      Creates a radial gradient using the size and coordinates of two circles.
      void drawImage​(Canvas canvas, double dx, double dy)
      Draws a canvas onto the canvas.
      void drawImage​(Canvas canvas, double dx, double dy, double dWidth)
      Draws a canvas onto the canvas.
      void drawImage​(Canvas canvas, double dx, double dy, double dWidth, double dHeight)
      Draws a canvas onto the canvas.
      void drawImage​(Img image, double dx, double dy)
      Draws an image onto the canvas.
      void drawImage​(Img image, double dx, double dy, double dWidth)
      Draws an image onto the canvas.
      void drawImage​(Img image, double dx, double dy, double dWidth, double dHeight)
      Draws an image onto the canvas.
      void fill()
      Fills the current or given path with the current fill style.
      void fill​(FillRule fillRule)
      Fills the current or given path with the current fill style.
      void fillRect​(double x, double y, double width, double height)
      Draws a rectangle that is filled according to the current fill style.
      This method draws directly to the canvas without modifying the current path, so any subsequent fill or stroke calls will have no effect on it.
      void fillText​(String text, double x, double y)
      Draws a text string at the specified coordinates, filling the string's characters with the current fill style.
      void fillText​(String text, double x, double y, double maxWidth)
      Draws a text string at the specified coordinates, filling the string's characters with the current fill style.
      An parameter allows specifying a maximum width for the rendered text, which the user agent will achieve by condensing the text or by using a lower font size.
      Canvas getCanvas()
      Returns the canvas of the canvas rendering context 2D object.
      IsColor getFillColor()
      Returns the filling styling is used for colors inside shapes.
      String getFillColorAsString()
      Returns the filling styling is used for colors inside shapes.
      CanvasGradientItem getFillGradient()
      Returns the filling styling is used for gradient style inside shapes.
      CanvasPatternItem getFillPattern()
      Returns the filling styling is used for pattern style inside shapes.
      String getFont()
      Returns the current text style to use when drawing text.
      This string uses the same syntax as the CSS font specifier.
      GlobalCompositeOperation getGlobalCompositeOperation()
      Returns the type of compositing operation to apply when drawing new shapes.
      ImageData getImageData​(double sx, double sy, double sw, double sh)
      Returns an ImageData object representing the underlying pixel data for a specified portion of the canvas.
      CapStyle getLineCap()
      Returns the shape used to draw the end points of lines.
      double getLineDashOffset()
      Returns the line dash offset, or "phase.".
      Specifies where to start a dash array on a line.
      JoinStyle getLineJoin()
      Returns the type of corners where two lines meet.
      double getLineWidth()
      Returns the thickness of lines.
      double getMiterLimit()
      Returns the miter limit ratio.
      double getShadowBlur()
      Returns the amount of blur applied to shadows.
      String getShadowColor()
      Returns the color of shadows.
      The shadow's rendered opacity will be affected by the opacity of the fillStyle color when filling, and of the strokeStyle color when stroking.
      double getShadowOffsetX()
      Returns the distance that shadows will be offset horizontally.
      double getShadowOffsetY()
      Returns the distance that shadows will be offset vertically.
      IsColor getStrokeColor()
      Returns the stroke color is used for the lines around shapes.
      String getStrokeColorAsString()
      Returns the stroke color is used for the lines around shapes.
      CanvasGradientItem getStrokeGradient()
      Returns the stroke gradient is used for the lines around shapes.
      CanvasPatternItem getStrokePattern()
      Returns the stroke pattern is used for the lines around shapes.
      TextAlign getTextAlign()
      Returns the current text alignment used when drawing text.
      TextBaseline getTextBaseline()
      Returns the current text baseline used when drawing text.
      void lineTo​(double x, double y)
      adds a straight line to the current sub-path by connecting the sub-path's last point to the specified (x, y) coordinates.
      TextMetricsItem measureText​(String text)
      Returns a text metric item that contains information about the measured text.
      void moveTo​(double x, double y)
      Begins a new sub-path at the point specified by the given (x, y) coordinates.
      void putImageData​(ImageData imagedata, double dx, double dy)
      Paints data from the given ImageData object onto the canvas.
      void putImageData​(ImageData imagedata, double dx, double dy, double dirtyX, double dirtyY, double dirtyWidth, double dirtyHeight)
      Paints data from the given ImageData object onto the canvas.
      void quadraticCurveTo​(double cpx, double cpy, double x, double y)
      Adds a quadratic Bézier curve to the current sub-path.
      It requires two points: the first one is a control point and the second one is the end point.
      The starting point is the latest point in the current path.
      void rect​(double x, double y, double width, double height)
      Adds a rectangle to the current path.
      void restore()
      Restores the most recently saved canvas state by popping the top entry in the drawing state stack.
      If there is no saved state, this method does nothing.
      void rotate​(double angle)
      Adds a rotation to the transformation matrix.
      void save()
      Saves the entire state of the canvas by pushing the current state onto a stack.
      void scale​(double x, double y)
      Adds a scaling transformation to the canvas units horizontally and/or vertically.
      void setFillColor​(String color)
      Sets the filling styling is used for colors inside shapes.
      void setFillColor​(IsColor color)
      Sets the filling styling is used for colors inside shapes.
      void setFillGradient​(CanvasGradientItem gradient)
      Sets the filling styling is used for gradient style inside shapes.
      void setFillPattern​(CanvasPatternItem pattern)
      Sets the filling styling is used for pattern style inside shapes.
      void setFont​(String font)
      Sets the current text style to use when drawing text.
      This string uses the same syntax as the CSS font specifier.
      void setGlobalCompositeOperation​(GlobalCompositeOperation globalCompositeOperation)
      Sets the type of compositing operation to apply when drawing new shapes.
      void setLineCap​(CapStyle lineCap)
      Sets the shape used to draw the end points of lines.
      void setLineDash​(int... lineDash)
      Sets the line dash pattern used when stroking lines.
      It uses an array of values that specify alternating lengths of lines and gaps which describe the pattern.
      void setLineDash​(List<Integer> lineDash)
      Sets the line dash pattern used when stroking lines.
      It uses a list of values that specify alternating lengths of lines and gaps which describe the pattern.
      void setLineDashOffset​(double lineDashOffset)
      Sets the line dash offset, or "phase.".
      Specifies where to start a dash array on a line.
      void setLineJoin​(JoinStyle lineJoin)
      Sets the type of corners where two lines meet.
      void setLineWidth​(double lineWidth)
      Sets the thickness of lines.
      void setMiterLimit​(double miterLimit)
      Sets the miter limit ratio.
      void setShadowBlur​(double shadowBlur)
      Sets the amount of blur applied to shadows.
      void setShadowColor​(String shadowColor)
      Sets the color of shadows.
      The shadow's rendered opacity will be affected by the opacity of the fillStyle color when filling, and of the strokeStyle color when stroking.
      void setShadowOffsetX​(double shadowOffsetX)
      Sets the distance that shadows will be offset horizontally.
      void setShadowOffsetY​(double shadowOffsetY)
      Sets the distance that shadows will be offset vertically.
      void setStrokeColor​(String color)
      Sets the stroke color is used for the lines around shapes.
      void setStrokeColor​(IsColor color)
      Sets the stroke color is used for the lines around shapes.
      void setStrokeGradient​(CanvasGradientItem gradient)
      Sets the stroke gradient is used for the lines around shapes.
      void setStrokePattern​(CanvasPatternItem pattern)
      Sets the stroke pattern is used for the lines around shapes.
      void setTextAlign​(TextAlign textAlign)
      Sets the current text alignment used when drawing text.
      void setTextBaseline​(TextBaseline textBaseline)
      Sets the current text baseline used when drawing text.
      void stroke()
      Strokes (outlines) the current or given path with the current stroke style.
      Strokes are aligned to the center of a path; in other words, half of the stroke is drawn on the inner side, and half on the outer side.
      void strokeRect​(double x, double y, double width, double height)
      Draws a rectangle that is stroked (outlined) according to the current strokeStyle and other context settings.
      void strokeText​(String text, double x, double y)
      Strokes - that is, draws the outlines of - the characters of a text string at the specified coordinates.
      void strokeText​(String text, double x, double y, double maxWidth)
      Strokes - that is, draws the outlines of - the characters of a text string at the specified coordinates.
      An optional parameter allows specifying a maximum width for the rendered text, which the user agent will achieve by condensing the text or by using a lower font size.
      void transform​(double m11, double m12, double m21, double m22, double dx, double dy)
      Multiplies the current transformation with the matrix described by the arguments of this method.
      This lets you scale, rotate, translate (move), and skew the context.
      void translate​(double x, double y)
      Adds a translation transformation to the current matrix by moving the canvas and its origin x units horizontally and y units vertically on the grid.

    • Method Detail

      • getCanvas

        @JsProperty
public Canvas getCanvas()
        Returns the canvas of the canvas rendering context 2D object.
        Returns:
        the canvas of the canvas rendering context 2D object

      • setFillColor

        @JsOverlay
public void setFillColor​(String color)
        Sets the filling styling is used for colors inside shapes.
        Parameters:
        color - color to use inside shapes

      • setFillColor

        @JsOverlay
public void setFillColor​(IsColor color)
        Sets the filling styling is used for colors inside shapes.
        Parameters:
        color - color to use inside shapes

      • setFillGradient

        @JsOverlay
public void setFillGradient​(CanvasGradientItem gradient)
        Sets the filling styling is used for gradient style inside shapes.
        Parameters:
        gradient - gradient style to use inside shapes

      • setFillPattern

        @JsOverlay
public final void setFillPattern​(CanvasPatternItem pattern)
        Sets the filling styling is used for pattern style inside shapes.
        Parameters:
        pattern - pattern style to use inside shapes

      • getFillColorAsString

        @JsOverlay
public String getFillColorAsString()
        Returns the filling styling is used for colors inside shapes.
        Returns:
        color to use inside shapes

      • getFillColor

        @JsOverlay
public IsColor getFillColor()
        Returns the filling styling is used for colors inside shapes.
        Returns:
        color to use inside shapes

      • getFillGradient

        @JsOverlay
public CanvasGradientItem getFillGradient()
        Returns the filling styling is used for gradient style inside shapes.
        Returns:
        gradient style to use inside shapes

      • getFillPattern

        @JsOverlay
public final CanvasPatternItem getFillPattern()
        Returns the filling styling is used for pattern style inside shapes.
        Returns:
        pattern style to use inside shapes

      • getFont

        @JsProperty
public String getFont()
        Returns the current text style to use when drawing text.
        This string uses the same syntax as the CSS font specifier.
        Returns:
        the current text style to use when drawing text

      • setFont

        @JsProperty
public void setFont​(String font)
        Sets the current text style to use when drawing text.
        This string uses the same syntax as the CSS font specifier.
        Parameters:
        font - the current text style to use when drawing text

      • setLineCap

        @JsOverlay
public void setLineCap​(CapStyle lineCap)
        Sets the shape used to draw the end points of lines.
        Parameters:
        lineCap - the shape used to draw the end points of lines.

      • getLineCap

        @JsOverlay
public CapStyle getLineCap()
        Returns the shape used to draw the end points of lines.
        Returns:
        the shape used to draw the end points of lines

      • getLineDashOffset

        @JsProperty
public double getLineDashOffset()
        Returns the line dash offset, or "phase.".
        Specifies where to start a dash array on a line.
        Returns:
        the line dash offset, or "phase."

      • setLineDashOffset

        @JsProperty
public void setLineDashOffset​(double lineDashOffset)
        Sets the line dash offset, or "phase.".
        Specifies where to start a dash array on a line.
        Parameters:
        lineDashOffset - the line dash offset, or "phase."

      • setLineJoin

        @JsOverlay
public void setLineJoin​(JoinStyle lineJoin)
        Sets the type of corners where two lines meet.
        Parameters:
        lineJoin - the type of corners where two lines meet

      • getLineJoin

        @JsOverlay
public JoinStyle getLineJoin()
        Returns the type of corners where two lines meet.
        Returns:
        the type of corners where two lines meet

      • getLineWidth

        @JsProperty
public double getLineWidth()
        Returns the thickness of lines.
        Returns:
        the thickness of lines

      • setLineWidth

        @JsProperty
public void setLineWidth​(double lineWidth)
        Sets the thickness of lines.
        Parameters:
        lineWidth - the thickness of lines

      • setLineDash

        @JsOverlay
public void setLineDash​(int... lineDash)
        Sets the line dash pattern used when stroking lines.
        It uses an array of values that specify alternating lengths of lines and gaps which describe the pattern.
        Parameters:
        lineDash - an array of integers that specify distances to alternately draw a line and a gap (in coordinate space units).
        If the number of elements in the array is odd, the elements of the array get copied and concatenated.
        If the array is empty, the line dash list is cleared and line strokes return to being solid.

      • setLineDash

        @JsOverlay
public void setLineDash​(List<Integer> lineDash)
        Sets the line dash pattern used when stroking lines.
        It uses a list of values that specify alternating lengths of lines and gaps which describe the pattern.
        Parameters:
        lineDash - a list of integers that specify distances to alternately draw a line and a gap (in coordinate space units).
        If the number of elements in the list is odd, the elements of the list get copied and concatenated.
        If the list is empty, the line dash list is cleared and line strokes return to being solid.

      • getMiterLimit

        @JsProperty
public double getMiterLimit()
        Returns the miter limit ratio.
        Returns:
        the miter limit ratio

      • setMiterLimit

        @JsProperty
public void setMiterLimit​(double miterLimit)
        Sets the miter limit ratio.
        Parameters:
        miterLimit - the miter limit ratio

      • getShadowBlur

        @JsProperty
public double getShadowBlur()
        Returns the amount of blur applied to shadows.
        Returns:
        the amount of blur applied to shadows.
        The default is 0 (no blur).

      • setShadowBlur

        @JsProperty
public void setShadowBlur​(double shadowBlur)
        Sets the amount of blur applied to shadows.
        Parameters:
        shadowBlur - the amount of blur applied to shadows.
        The default is 0 (no blur).

      • getShadowColor

        @JsProperty
public String getShadowColor()
        Returns the color of shadows.
        The shadow's rendered opacity will be affected by the opacity of the fillStyle color when filling, and of the strokeStyle color when stroking.
        Returns:
        the color of shadows

      • setShadowColor

        @JsProperty
public void setShadowColor​(String shadowColor)
        Sets the color of shadows.
        The shadow's rendered opacity will be affected by the opacity of the fillStyle color when filling, and of the strokeStyle color when stroking.
        Parameters:
        shadowColor - the color of shadows

      • getShadowOffsetX

        @JsProperty
public double getShadowOffsetX()
        Returns the distance that shadows will be offset horizontally.
        Returns:
        the distance that shadows will be offset horizontally

      • setShadowOffsetX

        @JsProperty
public void setShadowOffsetX​(double shadowOffsetX)
        Sets the distance that shadows will be offset horizontally.
        Parameters:
        shadowOffsetX - the distance that shadows will be offset horizontally

      • getShadowOffsetY

        @JsProperty
public double getShadowOffsetY()
        Returns the distance that shadows will be offset vertically.
        Returns:
        the distance that shadows will be offset vertically

      • setShadowOffsetY

        @JsProperty
public void setShadowOffsetY​(double shadowOffsetY)
        Sets the distance that shadows will be offset vertically.
        Parameters:
        shadowOffsetY - the distance that shadows will be offset vertically.

      • setStrokeColor

        @JsOverlay
public void setStrokeColor​(String color)
        Sets the stroke color is used for the lines around shapes.
        Parameters:
        color - the stroke color is used for the lines around shapes

      • setStrokeColor

        @JsOverlay
public void setStrokeColor​(IsColor color)
        Sets the stroke color is used for the lines around shapes.
        Parameters:
        color - the stroke color is used for the lines around shapes

      • setStrokeGradient

        @JsOverlay
public void setStrokeGradient​(CanvasGradientItem gradient)
        Sets the stroke gradient is used for the lines around shapes.
        Parameters:
        gradient - the stroke gradient is used for the lines around shapes

      • setStrokePattern

        @JsOverlay
public final void setStrokePattern​(CanvasPatternItem pattern)
        Sets the stroke pattern is used for the lines around shapes.
        Parameters:
        pattern - the stroke pattern is used for the lines around shapes

      • getStrokeColorAsString

        @JsOverlay
public String getStrokeColorAsString()
        Returns the stroke color is used for the lines around shapes.
        Returns:
        color to use for the lines around shapes

      • getStrokeColor

        @JsOverlay
public IsColor getStrokeColor()
        Returns the stroke color is used for the lines around shapes.
        Returns:
        color to use for the lines around shapes

      • getStrokeGradient

        @JsOverlay
public CanvasGradientItem getStrokeGradient()
        Returns the stroke gradient is used for the lines around shapes.
        Returns:
        gradient style to use for the lines around shapes

      • getStrokePattern

        @JsOverlay
public final CanvasPatternItem getStrokePattern()
        Returns the stroke pattern is used for the lines around shapes.
        Returns:
        pattern style to use for the lines around shapes

      • setTextAlign

        @JsOverlay
public void setTextAlign​(TextAlign textAlign)
        Sets the current text alignment used when drawing text.
        Parameters:
        textAlign - the current text alignment used when drawing text

      • getTextAlign

        @JsOverlay
public TextAlign getTextAlign()
        Returns the current text alignment used when drawing text.
        Returns:
        the current text alignment used when drawing text

      • setTextBaseline

        @JsOverlay
public void setTextBaseline​(TextBaseline textBaseline)
        Sets the current text baseline used when drawing text.
        Parameters:
        textBaseline - the current text baseline used when drawing text

      • getTextBaseline

        @JsOverlay
public TextBaseline getTextBaseline()
        Returns the current text baseline used when drawing text.
        Returns:
        the current text baseline used when drawing text

      • setGlobalCompositeOperation

        @JsOverlay
public void setGlobalCompositeOperation​(GlobalCompositeOperation globalCompositeOperation)
        Sets the type of compositing operation to apply when drawing new shapes.
        Parameters:
        globalCompositeOperation - which of the compositing or blending mode operations to use

      • getGlobalCompositeOperation

        @JsOverlay
public GlobalCompositeOperation getGlobalCompositeOperation()
        Returns the type of compositing operation to apply when drawing new shapes.
        Returns:
        which of the compositing or blending mode operations to use

      • arc

        @JsMethod
public void arc​(double x,
                double y,
                double radius,
                double startAngle,
                double endAngle,
                boolean anticlockwise)
        Adds a circular arc to the current sub-path.
        The arc method creates a circular arc centered at (x, y) with a radius of radius.
        The path starts at "startAngle", ends at "endAngle", and travels in the direction given by "anticlockwise" (defaulting to clockwise).
        Parameters:
        x - the horizontal coordinate of the arc's center
        y - the vertical coordinate of the arc's center
        radius - the arc's radius. Must be positive
        startAngle - the angle at which the arc starts in radians, measured from the positive x-axis
        endAngle - the angle at which the arc ends in radians, measured from the positive x-axis
        anticlockwise - if true, draws the arc counter-clockwise between the start and end angles.
        The default is false(clockwise).

      • arc

        @JsMethod
public void arc​(double x,
                double y,
                double radius,
                double startAngle,
                double endAngle)
        Adds a circular arc to the current sub-path.
        The arc method creates a circular arc centered at (x, y) with a radius of radius.
        The path starts at "startAngle", ends at "endAngle", and travels in the clockwise direction.
        Parameters:
        x - the horizontal coordinate of the arc's center
        y - the vertical coordinate of the arc's center
        radius - the arc's radius. Must be positive
        startAngle - the angle at which the arc starts in radians, measured from the positive x-axis
        endAngle - the angle at which the arc ends in radians, measured from the positive x-axis

      • arcTo

        @JsMethod
public void arcTo​(double x1,
                  double y1,
                  double x2,
                  double y2,
                  double radius)
        adds a circular arc to the current sub-path, using the given control points and radius.
        The arc is automatically connected to the path's latest point with a straight line, if necessary for the specified parameters.
        This method is commonly used for making rounded corners.
        Parameters:
        x1 - the x-axis coordinate of the first control point
        y1 - the y-axis coordinate of the first control point
        x2 - the x-axis coordinate of the second control point
        y2 - the y-axis coordinate of the second control point
        radius - the arc's radius. Must be non-negative.

      • beginPath

        @JsMethod
public void beginPath()
        Starts a new path by emptying the list of sub-paths.
        Call this method when you want to create a new path.

      • bezierCurveTo

        @JsMethod
public void bezierCurveTo​(double cp1x,
                          double cp1y,
                          double cp2x,
                          double cp2y,
                          double x,
                          double y)
        Adds a cubic Bézier curve to the current sub-path.
        It requires three points: the first two are control points and the third one is the end point.
        The starting point is the latest point in the current path.
        Parameters:
        cp1x - the x-axis coordinate of the first control point
        cp1y - the y-axis coordinate of the first control point
        cp2x - the x-axis coordinate of the second control point
        cp2y - the y-axis coordinate of the second control point
        x - the x-axis coordinate of the end point
        y - the y-axis coordinate of the end point

      • clearRect

        @JsMethod
public void clearRect​(double x,
                      double y,
                      double width,
                      double height)
        Erases the pixels in a rectangular area by setting them to transparent black.
        Parameters:
        x - the x-axis coordinate of the rectangle's starting point
        y - the y-axis coordinate of the rectangle's starting point
        width - the rectangle's width. Positive values are to the right, and negative to the left
        height - the rectangle's height. Positive values are down, and negative are up

      • clip

        @JsMethod
public void clip()
        Turns the current or given path in the current clipping region.
        It replaces any previous clipping region..

      • closePath

        @JsMethod
public void closePath()
        Causes the point of the pen to move back to the start of the current sub-path.
        It tries to draw a straight line from the current point to the start.
        If the shape has already been closed or has only one point, this function does nothing.

      • createLinearGradient

        @JsMethod
public CanvasGradientItem createLinearGradient​(double x0,
                                               double y0,
                                               double x1,
                                               double y1)
        Creates a gradient along the line connecting two given coordinates.
        Parameters:
        x0 - the x-axis coordinate of the start point
        y0 - the y-axis coordinate of the start point
        x1 - the x-axis coordinate of the end point
        y1 - the y-axis coordinate of the end point
        Returns:
        a canvas gradient item

      • createPattern

        @JsOverlay
public final CanvasPatternItem createPattern​(Canvas canvas,
                                             Repetition repetition)
        Creates a pattern using the specified canvas and repetition.
        Parameters:
        canvas - an canvas object
        repetition - a repetition object indicating how to repeat the pattern's image
        Returns:
        a canvas pattern item

      • createPattern

        @JsOverlay
public final CanvasPatternItem createPattern​(Img image,
                                             Repetition repetition)
        Creates a pattern using the specified image and repetition.
        Parameters:
        image - an image object
        repetition - a repetition object indicating how to repeat the pattern's image
        Returns:
        a canvas pattern item

      • createRadialGradient

        @JsMethod
public CanvasGradientItem createRadialGradient​(double x0,
                                               double y0,
                                               double r0,
                                               double x1,
                                               double y1,
                                               double r1)
        Creates a radial gradient using the size and coordinates of two circles.
        Parameters:
        x0 - the x-axis coordinate of the start circle
        y0 - the y-axis coordinate of the start circle
        r0 - the radius of the start circle. Must be non-negative and finite
        x1 - the x-axis coordinate of the end circle
        y1 - the y-axis coordinate of the end circle
        r1 - the radius of the end circle. Must be non-negative and finite
        Returns:
        a canvas gradient item

      • drawImage

        @JsOverlay
public final void drawImage​(Canvas canvas,
                            double dx,
                            double dy,
                            double dWidth,
                            double dHeight)
        Draws a canvas onto the canvas.
        Parameters:
        canvas - canvas instance to draw in the context
        dx - the x-axis coordinate in the destination canvas at which to place the top-left corner of the source canvas
        dy - the y-axis coordinate in the destination canvas at which to place the top-left corner of the source canvas
        dWidth - the width to draw the canvas in the destination canvas.
        This allows scaling of the drawn canvas.
        If not specified, the canvas is not scaled in width when drawn
        dHeight - the height to draw the canvas in the destination canvas.
        This allows scaling of the drawn canvas.
        If not specified, the canvas is not scaled in height when drawn

      • drawImage

        @JsOverlay
public final void drawImage​(Canvas canvas,
                            double dx,
                            double dy,
                            double dWidth)
        Draws a canvas onto the canvas.
        Parameters:
        canvas - canvas instance to draw in the context
        dx - the x-axis coordinate in the destination canvas at which to place the top-left corner of the source canvas
        dy - the y-axis coordinate in the destination canvas at which to place the top-left corner of the source canvas
        dWidth - the width to draw the canvas in the destination canvas.
        This allows scaling of the drawn canvas.
        If not specified, the canvas is not scaled in width when drawn

      • drawImage

        @JsOverlay
public final void drawImage​(Canvas canvas,
                            double dx,
                            double dy)
        Draws a canvas onto the canvas.
        Parameters:
        canvas - canvas instance to draw in the context
        dx - the x-axis coordinate in the destination canvas at which to place the top-left corner of the source canvas
        dy - the y-axis coordinate in the destination canvas at which to place the top-left corner of the source canvas

      • drawImage

        @JsOverlay
public final void drawImage​(Img image,
                            double dx,
                            double dy,
                            double dWidth,
                            double dHeight)
        Draws an image onto the canvas.
        Parameters:
        image - image instance to draw in the context
        dx - the x-axis coordinate in the destination canvas at which to place the top-left corner of the source image
        dy - the y-axis coordinate in the destination canvas at which to place the top-left corner of the source image
        dWidth - the width to draw the image in the destination canvas.
        This allows scaling of the drawn image.
        If not specified, the image is not scaled in width when drawn
        dHeight - the height to draw the image in the destination canvas.
        This allows scaling of the drawn image.
        If not specified, the image is not scaled in height when drawn

      • drawImage

        @JsOverlay
public final void drawImage​(Img image,
                            double dx,
                            double dy,
                            double dWidth)
        Draws an image onto the canvas.
        Parameters:
        image - image instance to draw in the context
        dx - the x-axis coordinate in the destination canvas at which to place the top-left corner of the source image
        dy - the y-axis coordinate in the destination canvas at which to place the top-left corner of the source image
        dWidth - the width to draw the image in the destination canvas.
        This allows scaling of the drawn image.
        If not specified, the image is not scaled in width when drawn

      • drawImage

        @JsOverlay
public final void drawImage​(Img image,
                            double dx,
                            double dy)
        Draws an image onto the canvas.
        Parameters:
        image - image instance to draw in the context
        dx - the x-axis coordinate in the destination canvas at which to place the top-left corner of the source image
        dy - the y-axis coordinate in the destination canvas at which to place the top-left corner of the source image

      • fill

        @JsMethod
public void fill()
        Fills the current or given path with the current fill style.

      • fill

        @JsOverlay
public void fill​(FillRule fillRule)
        Fills the current or given path with the current fill style.
        Parameters:
        fillRule - the algorithm by which to determine if a point is inside or outside the filling region.

      • fillRect

        @JsMethod
public void fillRect​(double x,
                     double y,
                     double width,
                     double height)
        Draws a rectangle that is filled according to the current fill style.
        This method draws directly to the canvas without modifying the current path, so any subsequent fill or stroke calls will have no effect on it.
        Parameters:
        x - the x-axis coordinate of the rectangle's starting point
        y - the y-axis coordinate of the rectangle's starting point
        width - the rectangle's width. Positive values are to the right, and negative to the left
        height - the rectangle's height. Positive values are down, and negative are up

      • fillText

        @JsMethod
public void fillText​(String text,
                     double x,
                     double y,
                     double maxWidth)
        Draws a text string at the specified coordinates, filling the string's characters with the current fill style.
        An parameter allows specifying a maximum width for the rendered text, which the user agent will achieve by condensing the text or by using a lower font size.
        Parameters:
        text - the string to render in the context.
        The text is rendered using the settings specified by font, text align, text baseline, and direction.
        x - the x-axis coordinate of the point at which to begin drawing the text, in pixels
        y - the y-axis coordinate of the point at which to begin drawing the text, in pixels
        maxWidth - the maximum number of pixels wide the text may be once rendered.
        If not specified, there is no limit to the width of the text

      • fillText

        @JsMethod
public void fillText​(String text,
                     double x,
                     double y)
        Draws a text string at the specified coordinates, filling the string's characters with the current fill style.
        Parameters:
        text - the string to render in the context.
        The text is rendered using the settings specified by font, text align, text baseline, and direction.
        x - the x-axis coordinate of the point at which to begin drawing the text, in pixels
        y - the y-axis coordinate of the point at which to begin drawing the text, in pixels

      • lineTo

        @JsMethod
public void lineTo​(double x,
                   double y)
        adds a straight line to the current sub-path by connecting the sub-path's last point to the specified (x, y) coordinates.
        Parameters:
        x - the x-axis coordinate of the line's end point
        y - the y-axis coordinate of the line's end point

      • measureText

        @JsMethod
public TextMetricsItem measureText​(String text)
        Returns a text metric item that contains information about the measured text.
        Parameters:
        text - the text to measure
        Returns:
        a text metric item

      • moveTo

        @JsMethod
public void moveTo​(double x,
                   double y)
        Begins a new sub-path at the point specified by the given (x, y) coordinates.
        Parameters:
        x - the x-axis (horizontal) coordinate of the point
        y - the y-axis (vertical) coordinate of the point

      • quadraticCurveTo

        @JsMethod
public void quadraticCurveTo​(double cpx,
                             double cpy,
                             double x,
                             double y)
        Adds a quadratic Bézier curve to the current sub-path.
        It requires two points: the first one is a control point and the second one is the end point.
        The starting point is the latest point in the current path.
        Parameters:
        cpx - the x-axis coordinate of the control point
        cpy - the y-axis coordinate of the control point
        x - the x-axis coordinate of the end point
        y - the y-axis coordinate of the end point

      • rect

        @JsMethod
public void rect​(double x,
                 double y,
                 double width,
                 double height)
        Adds a rectangle to the current path.
        Parameters:
        x - the x-axis coordinate of the rectangle's starting point
        y - the y-axis coordinate of the rectangle's starting point
        width - the rectangle's width. Positive values are to the right, and negative to the left
        height - the rectangle's height. Positive values are down, and negative are up

      • restore

        @JsMethod
public void restore()
        Restores the most recently saved canvas state by popping the top entry in the drawing state stack.
        If there is no saved state, this method does nothing.

      • rotate

        @JsMethod
public void rotate​(double angle)
        Adds a rotation to the transformation matrix.
        Parameters:
        angle - the rotation angle, clockwise in radians.
        You can use degree * Math.PI / 180 to calculate a radian from a degree.

      • save

        @JsMethod
public void save()
        Saves the entire state of the canvas by pushing the current state onto a stack.

      • scale

        @JsMethod
public void scale​(double x,
                  double y)
        Adds a scaling transformation to the canvas units horizontally and/or vertically.
        Parameters:
        x - scaling factor in the horizontal direction.
        A negative value flips pixels across the vertical axis.
        A value of 1 results in no horizontal scaling
        y - scaling factor in the vertical direction.
        A negative value flips pixels across the horizontal axis.
        A value of 1 results in no vertical scaling

      • stroke

        @JsMethod
public void stroke()
        Strokes (outlines) the current or given path with the current stroke style.
        Strokes are aligned to the center of a path; in other words, half of the stroke is drawn on the inner side, and half on the outer side.

      • strokeRect

        @JsMethod
public void strokeRect​(double x,
                       double y,
                       double width,
                       double height)
        Draws a rectangle that is stroked (outlined) according to the current strokeStyle and other context settings.
        Parameters:
        x - the x-axis coordinate of the rectangle's starting point
        y - the y-axis coordinate of the rectangle's starting point
        width - the rectangle's width. Positive values are to the right, and negative to the left
        height - the rectangle's height. Positive values are down, and negative are up

      • strokeText

        @JsMethod
public void strokeText​(String text,
                       double x,
                       double y,
                       double maxWidth)
        Strokes - that is, draws the outlines of - the characters of a text string at the specified coordinates.
        An optional parameter allows specifying a maximum width for the rendered text, which the user agent will achieve by condensing the text or by using a lower font size.
        Parameters:
        text - the text specifying the text string to render in the context.
        The text is rendered using the settings specified by font, textAlign, textBaseline, and direction.
        x - the x-axis coordinate of the point at which to begin drawing the text
        y - the y-axis coordinate of the point at which to begin drawing the text
        maxWidth - The maximum width the text may be once rendered.
        If not specified, there is no limit to the width of the text.

      • strokeText

        @JsMethod
public void strokeText​(String text,
                       double x,
                       double y)
        Strokes - that is, draws the outlines of - the characters of a text string at the specified coordinates.
        Parameters:
        text - the text specifying the text string to render in the context.
        The text is rendered using the settings specified by font, textAlign, textBaseline, and direction.
        x - the x-axis coordinate of the point at which to begin drawing the text
        y - the y-axis coordinate of the point at which to begin drawing the text

      • transform

        @JsMethod
public void transform​(double m11,
                      double m12,
                      double m21,
                      double m22,
                      double dx,
                      double dy)
        Multiplies the current transformation with the matrix described by the arguments of this method.
        This lets you scale, rotate, translate (move), and skew the context.
        Parameters:
        m11 - horizontal scaling. A value of 1 results in no scaling
        m12 - vertical skewing
        m21 - horizontal skewing
        m22 - vertical scaling. A value of 1 results in no scaling
        dx - horizontal translation (moving)
        dy - vertical translation (moving)

      • translate

        @JsMethod
public void translate​(double x,
                      double y)
        Adds a translation transformation to the current matrix by moving the canvas and its origin x units horizontally and y units vertically on the grid.
        Parameters:
        x - distance to move in the horizontal direction.
        Positive values are to the right, and negative to the left
        y - distance to move in the vertical direction.
        Positive values are down, and negative are up

      • getImageData

        @JsMethod
public ImageData getImageData​(double sx,
                              double sy,
                              double sw,
                              double sh)
        Returns an ImageData object representing the underlying pixel data for a specified portion of the canvas.
        Parameters:
        sx - The x-axis coordinate of the top-left corner of the rectangle from which the ImageData will be extracted.
        sy - The y-axis coordinate of the top-left corner of the rectangle from which the ImageData will be extracted.
        sw - The width of the rectangle from which the ImageData will be extracted. Positive values are to the right, and negative to the left.
        sh - The height of the rectangle from which the ImageData will be extracted. Positive values are down, and negative are up.
        Returns:
        an ImageData object representing the underlying pixel data for a specified portion of the canvas.

      • putImageData

        @JsMethod
public void putImageData​(ImageData imagedata,
                         double dx,
                         double dy)
        Paints data from the given ImageData object onto the canvas.
        Parameters:
        imagedata - An ImageData object containing the array of pixel values.
        dx - Horizontal position (x coordinate) at which to place the image data in the destination canvas.
        dy - Vertical position (y coordinate) at which to place the image data in the destination canvas.

      • putImageData

        @JsMethod
public void putImageData​(ImageData imagedata,
                         double dx,
                         double dy,
                         double dirtyX,
                         double dirtyY,
                         double dirtyWidth,
                         double dirtyHeight)
        Paints data from the given ImageData object onto the canvas.
        Parameters:
        imagedata - An ImageData object containing the array of pixel values.
        dx - Horizontal position (x coordinate) at which to place the image data in the destination canvas.
        dy - Vertical position (y coordinate) at which to place the image data in the destination canvas.
        dirtyX - Horizontal position (x coordinate) of the top-left corner from which the image data will be extracted. Defaults to 0.
        dirtyY - Vertical position (y coordinate) of the top-left corner from which the image data will be extracted. Defaults to 0.
        dirtyWidth - Width of the rectangle to be painted. Defaults to the width of the image data.
        dirtyHeight - Height of the rectangle to be painted. Defaults to the height of the image data.

      • createImageData

        @JsMethod
public ImageData createImageData​(double width,
                                 double height)
        Returns an empty ImageData object representing the underlying pixel data for a specified portion of the canvas.
        Parameters:
        width - The width to give the new ImageData object. A negative value flips the rectangle around the vertical axis.
        height - The height to give the new ImageData object. A negative value flips the rectangle around the horizontal axis.
        Returns:
        an ImageData object representing the underlying pixel data for a specified portion of the canvas.

      • addRoundedRectPath

        @JsOverlay
public void addRoundedRectPath​(double x,
                               double y,
                               double width,
                               double height,
                               BarBorderRadius radius)
        Draws an rectangle with rounded edges.
        Parameters:
        x - the x-axis coordinate of the rectangle's starting point
        y - the y-axis coordinate of the rectangle's starting point
        width - the rectangle's width. Positive values are to the right, and negative to the left
        height - the rectangle's height. Positive values are down, and negative are up
        radius - the radius of the rounded edges