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