Class: Canvas

Grape2D. Canvas

new Canvas()

This is a simple abstraction of the canvas object, may be used to do some optimizations.
Source:

Members

<private> canvas :Element

Canvas DOM element.
Type:
  • Element
Source:

<private> context :CanvasRenderingContext2D

Context of the canvas.
Type:
  • CanvasRenderingContext2D
Source:

<private> halfHeight :number

Half height of the canvas.
Type:
  • number
Source:

<private> halfWidth :number

Half width of the canvas.
Type:
  • number
Source:

Methods

appendOn(on) → {Grape2D.Canvas}

Appends canvas to a DOM element.
Parameters:
Name Type Description
on Element Element to append to.
Source:
Returns:
This canvas.
Type
Grape2D.Canvas

arc(x, y, radius, startAngle, endAngle, CCW) → {Grape2D.Canvas}

Creates an arc.
Parameters:
Name Type Argument Description
x number Center x.
y number Center y.
radius number Arc radius.
startAngle number <optional>
Start angle.
endAngle number <optional>
End angle.
CCW boolean <optional>
True for counter clock wise.
Source:
Returns:
This canvas.
Type
Grape2D.Canvas

arcTo(x1, y1, x2, y2, radius) → {Grape2D.Canvas}

Creates an arc to a position.
Parameters:
Name Type Description
x1 number Start x.
y1 number Start y.
x2 number End x.
y2 number End y.
radius number Radius of the arc.
Source:
Returns:
This canvas.
Type
Grape2D.Canvas

beginPath() → {Grape2D.Canvas}

Starts a path.
Source:
Returns:
This canvas.
Type
Grape2D.Canvas

bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) → {Grape2D.Canvas}

Creates a bezier curve.
Parameters:
Name Type Description
cp1x number CP1X.
cp1y number CP1Y.
cp2x number CP2X.
cp2y number CP2Y.
x number X.
y number Y.
Source:
Returns:
This canvas.
Type
Grape2D.Canvas

clear()

Clears the canvas.
Source:

clearRect(x, y, w, h) → {Grape2D.Canvas}

Clears a rectangle.
Parameters:
Name Type Description
x number Start x.
y number Start y.
w number Width.
h number Height.
Source:
Returns:
This canvas.
Type
Grape2D.Canvas

clip() → {Grape2D.Canvas}

Clips the canvas
Source:
Returns:
This canvas.
Type
Grape2D.Canvas

closePath() → {Grape2D.Canvas}

Closes a path.
Source:
Returns:
This canvas.
Type
Grape2D.Canvas

createImageData(sw, sh) → {ImageData}

Creates an image data.
Parameters:
Name Type Description
sw number Source width.
sh number Source height.
Source:
Returns:
Image data.
Type
ImageData

createLinearGradient(x0, y0, x1, y1) → {CanvasGradient}

Creates a line gradient in the canvas.
Parameters:
Name Type Description
x0 number Start x.
y0 number Start y.
x1 number End x.
y1 number End y.
Source:
Returns:
Result gradient.
Type
CanvasGradient

createPattern(image, repetition) → {CanvasPattern}

Creates a pattern. There are 4 available options:
  • repeat
  • repeat-x
  • repeat-y
  • no-repeat
Parameters:
Name Type Argument Description
image HTMLImageElement | HTMLCanvasElement <nullable>
Image
repetition string Valid repetition.
Source:
Returns:
Result pattern.
Type
CanvasPattern

createRadialGradient(x0, y0, r0, x1, y1, r1) → {CanvasGradient}

Creates a radial gradient.
Parameters:
Name Type Description
x0 number X.
y0 number Y.
r0 number Radius.
x1 number X.
y1 number Y.
r1 number Radius.
Source:
Returns:
Result gradient.
Type
CanvasGradient

drawImage(image, dx, dy, dw, dh, sx, sy, sw, sh) → {Grape2D.Canvas}

Draws an image to the canvas.
Parameters:
Name Type Description
image HTMLImageElement | HTMLCanvasElement | HTMLVideoElement Image to draw.
dx number Destination x
dy number Destination y
dw number Destination width
dh number Destination height
sx number Source x
sy number Source y
sw number Source width
sh number Source height
Source:
Returns:
This canvas.
Type
Grape2D.Canvas

fill() → {Grape2D.Canvas}

Fills the canvas.
Source:
Returns:
This canvas.
Type
Grape2D.Canvas

fillRect(x, y, w, h) → {Grape2D.Canvas}

Fills a rectangle.
Parameters:
Name Type Description
x number Start x.
y number Start y.
w number Width.
h number Height.
Source:
Returns:
This canvas.
Type
Grape2D.Canvas

fillText(text, x, y) → {Grape2D.Canvas}

Fills the text.
Parameters:
Name Type Description
text string Text to fill.
x number X.
y number Y.
Source:
Returns:
This canvas.
Type
Grape2D.Canvas

getContext() → {CanvasRenderingContext2D}

Gets canvas context.
Source:
Returns:
Canvas context.
Type
CanvasRenderingContext2D

getHalfHeight() → {number}

Gets canvas half height.
Source:
Returns:
Canvas half height.
Type
number

getHalfWidth() → {number}

Gets canvas half width.
Source:
Returns:
Canvas half width.
Type
number

getHeight() → {number}

Gets canvas height.
Source:
Returns:
Canvas height.
Type
number

getImageData(sx, sy, sw, sh) → {ImageData}

Gets canvas data as an image.
Parameters:
Name Type Description
sx number Source x.
sy number Source y.
sw number Source width.
sh number Source height.
Source:
Returns:
Image data.
Type
ImageData

getWidth() → {number}

Gets canvas width.
Source:
Returns:
Canvas width.
Type
number

globalCompositeOperation(flag) → {Grape2D.Canvas}

Performs a composition operation, according to a flag. The available flags are:
  • source-over
  • source-in
  • source-out
  • source-atop
  • destination-over
  • destination-in
  • destination-out
  • destination-atop
  • lighter
  • copy
  • xor
Parameters:
Name Type Description
flag string An valid flag.
Source:
Returns:
This canvas.
Type
Grape2D.Canvas

isPointInPath(x, y) → {boolean}

Checks if the point is in the current path.
Parameters:
Name Type Description
x number X coordinate.
y number Y coordinate.
Source:
Returns:
True if it's in the path.
Type
boolean

lineTo(x, y) → {Grape2D.Canvas}

Creates a line to a position.
Parameters:
Name Type Description
x number End x coordinate.
y number End y coordinate.
Source:
Returns:
This canvas.
Type
Grape2D.Canvas

measureText(text) → {TextMetrics}

Measures a text.
Parameters:
Name Type Description
text string Text to measure.
Source:
Returns:
Text metrics
Type
TextMetrics

moveTo(x, y) → {Grape2D.Canvas}

Moves to a position to start a line/shape.
Parameters:
Name Type Description
x number X coordinate.
y number Y coordinate.
Source:
Returns:
This canvas.
Type
Grape2D.Canvas

putImageData(imageData, dx, dy, dirtyX, dirtyY, dirtyWidth, dirtyHeight) → {Grape2D.Canvas}

Puts image data into the canvas.
Parameters:
Name Type Description
imageData ImageData Image data.
dx number Destination x.
dy number Destination y.
dirtyX number Dirty x.
dirtyY number Dirty y.
dirtyWidth number Dirty width.
dirtyHeight number Dirty height.
Source:
Returns:
This canvas.
Type
Grape2D.Canvas

quadraticCurveTo(cpx, cpy, x, y) → {Grape2D.Canvas}

Creates a quadratic curve.
Parameters:
Name Type Description
cpx number CPX.
cpy number CPY
x number X.
y number Y.
Source:
Returns:
This canvas.
Type
Grape2D.Canvas

rect(x, y, w, h) → {Grape2D.Canvas}

Creates a rectangle.
Parameters:
Name Type Description
x number X coordinate of the top left corner.
y number Y coordinate of the top left corner.
w number Width of the rectangle.
h number Height of the rectangle.
Source:
Returns:
This canvas.
Type
Grape2D.Canvas

resize(w, h) → {Grape2D.Canvas}

Resizes the canvas.
Parameters:
Name Type Description
w number New width.
h number New height.
Source:
Returns:
This canvas.
Type
Grape2D.Canvas

restore() → {Grape2D.Canvas}

Restores a saved state.
Source:
Returns:
This canvas.
Type
Grape2D.Canvas

rotate(angle) → {Grape2D.Canvas}

Rotates the canvas. Not the DOM element. Equivalent to apply a rotation matrix.
Parameters:
Name Type Description
angle number Angle to rotate.
Source:
Returns:
This canvas.
Type
Grape2D.Canvas

save() → {Grape2D.Canvas}

Saves the state of the canvas.
Source:
Returns:
This canvas.
Type
Grape2D.Canvas

scale(x, y) → {Grape2D.Canvas}

Scales the canvas. Not the DOM element. Equivalent to apply a scale matrix.
Parameters:
Name Type Description
x number X scale.
y number Y scale.
Source:
Returns:
This canvas.
Type
Grape2D.Canvas

setFillStyle(value) → {Grape2D.Canvas}

Sets the fill style.
Parameters:
Name Type Description
value string Fill color. In a valid CSS3 format.
Source:
Returns:
This canvas.
Type
Grape2D.Canvas

setFont(font) → {Grape2D.Canvas}

Sets the font type.
Parameters:
Name Type Description
font string New font.
Source:
Returns:
This canvas.
Type
Grape2D.Canvas

setGlobalAlpha(value) → {Grape2D.Canvas}

Sets the global alpha property.
Parameters:
Name Type Description
value number New alpha value.
Source:
Returns:
This canvas.
Type
Grape2D.Canvas

setHeight(height)

Sets canvas height.
Parameters:
Name Type Description
height number New canvas height.
Source:

setLineCap(value) → {Grape2D.Canvas}

Sets the type of line cap. The available options are:
  • butt
  • round
  • square
Parameters:
Name Type Description
value string A valid line cap option.
Source:
Returns:
This canvas.
Type
Grape2D.Canvas

setLineJoin(value) → {Grape2D.Canvas}

Sets the line join. The available options are:
  • round
  • bevel
  • miter
Parameters:
Name Type Description
value string A valid line join option.
Source:
Returns:
This canvas.
Type
Grape2D.Canvas

setLineWidth(value) → {Grape2D.Canvas}

Sets the line width
Parameters:
Name Type Description
value number New line width value.s
Source:
Returns:
This canvas.
Type
Grape2D.Canvas

setMiterLimit(value) → {Grape2D.Canvas}

Sets the miter limit.
Parameters:
Name Type Description
value number Miter limit value.
Source:
Returns:
This canvas.
Type
Grape2D.Canvas

setShadowBlur(value) → {Grape2D.Canvas}

Sets the shadow blur value.
Parameters:
Name Type Description
value number Shadow blur.
Source:
Returns:
This canvas.
Type
Grape2D.Canvas

setShadowColor(value) → {Grape2D.Canvas}

Sets the shadow color.
Parameters:
Name Type Description
value string Shadow color in a valid CSS3 format.
Source:
Returns:
This canvas.
Type
Grape2D.Canvas

setShadowOffsetX(value) → {Grape2D.Canvas}

Sets the shadow offset in the x axis.
Parameters:
Name Type Description
value number Shadow offset, at the x axis
Source:
Returns:
This canvas.
Type
Grape2D.Canvas

setShadowOffsetY(value) → {Grape2D.Canvas}

Sets the shadow offset in the y axis.
Parameters:
Name Type Description
value number Shadow offset, at the y axis.
Source:
Returns:
This canvas.
Type
Grape2D.Canvas

setStrokeStyle(value) → {Grape2D.Canvas}

Sets the stroke style.
Parameters:
Name Type Description
value string Stroke color. In a valid CSS3 format.
Source:
Returns:
This canvas.
Type
Grape2D.Canvas

setTextAlign(value) → {Grape2D.Canvas}

Set the text align. The available options are:
  • start
  • end
  • left
  • right
  • center
Parameters:
Name Type Description
value string A valid align option.
Source:
Returns:
This canvas.
Type
Grape2D.Canvas

setTextBaseline(baseline) → {Grape2D.Canvas}

Sets the baseline. The available options are:
  • top
  • hanging
  • middle
  • alphabetic
  • ideographic
  • bottom
Parameters:
Name Type Description
baseline string A valid option.
Source:
Returns:
This canvas.
Type
Grape2D.Canvas

setWidth(width)

Sets canvas width.
Parameters:
Name Type Description
width number New canvas width.
Source:

stroke() → {Grape2D.Canvas}

Stroke the canvas.
Source:
Returns:
This canvas.
Type
Grape2D.Canvas

strokeRect(x, y, w, h) → {Grape2D.Canvas}

Strokes a rectangle.
Parameters:
Name Type Description
x number Start x.
y number Start y.
w number Width.
h number Height.
Source:
Returns:
This canvas.
Type
Grape2D.Canvas

strokeText(text, x, y) → {Grape2D.Canvas}

Stroke text.
Parameters:
Name Type Description
text string Text to stroke.
x number X.
y number Y.
Source:
Returns:
This canvas.
Type
Grape2D.Canvas

toDataURL()

Source:

transform(m11, m12, m21, m22, dx, dy) → {Grape2D.Canvas}

Sets a transformation matrix.
Parameters:
Name Type Description
m11 number Element.
m12 number Element.
m21 number Element.
m22 number Element.
dx number Element.
dy number Element.
Source:
Returns:
This canvas.
Type
Grape2D.Canvas

translate(x, y) → {Grape2D.Canvas}

Translate the canvas. Not the DOM element. Equivalent to apply a translation matrix.
Parameters:
Name Type Description
x number Translation in the X axis.
y number Translation in the Y axis.
Source:
Returns:
This canvas.
Type
Grape2D.Canvas