new Context()
Konva wrapper around native 2d canvas context. It has almost the same API of 2d context with some additional functions.
With core Konva shapes you don't need to use this object. But you will use it if you want to create
a custom shape or a custom hit regions.
For full information about each 2d context API use MDN documentation
- Source:
- konva.js
Example
const rect = new Konva.Shape({
fill: 'red',
width: 100,
height: 100,
sceneFunc: (ctx, shape) => {
// ctx - is context wrapper
// shape - is instance of Konva.Shape, so it equals to "rect" variable
ctx.rect(0, 0, shape.getAttr('width'), shape.getAttr('height'));
// automatically fill shape from props and draw hit region
ctx.fillStrokeShape(shape);
}
})
Methods
-
arc()
-
arc function.
- Source:
- konva.js
-
arcTo()
-
arcTo function.
- Source:
- konva.js
-
beginPath()
-
beginPath function.
- Source:
- konva.js
-
bezierCurveTo()
-
bezierCurveTo function.
- Source:
- konva.js
-
clear( [bounds])
-
clear canvas
Parameters:
Name Type Argument Description boundsObject <optional>
Properties
Name Type Argument Description xNumber <optional>
yNumber <optional>
widthNumber <optional>
heightNumber <optional>
- Source:
- konva.js
-
clearRect()
-
clearRect function.
- Source:
- konva.js
-
clip()
-
clip function.
- Source:
- konva.js
-
closePath()
-
closePath function.
- Source:
- konva.js
-
createImageData()
-
createImageData function.
- Source:
- konva.js
-
createLinearGradient()
-
createLinearGradient function.
- Source:
- konva.js
-
createPattern()
-
createPattern function.
- Source:
- konva.js
-
createRadialGradient()
-
createRadialGradient function.
- Source:
- konva.js
-
drawImage()
-
drawImage function.
- Source:
- konva.js
-
ellipse()
-
ellipse function.
- Source:
- konva.js
-
fill()
-
fill function.
- Source:
- konva.js
-
fillRect()
-
fillRect function.
- Source:
- konva.js
-
fillShape(shape)
-
fill shape
Parameters:
Name Type Description shapeKonva.Shape - Source:
- konva.js
-
fillStrokeShape(shape)
-
fill then stroke
Parameters:
Name Type Description shapeKonva.Shape - Source:
- konva.js
-
fillText()
-
fillText function.
- Source:
- konva.js
-
getCanvas()
-
get canvas wrapper
- Source:
- konva.js
Returns:
- Type
- Konva.Canvas
-
getImageData()
-
getImageData function.
- Source:
- konva.js
-
getLineDash()
-
getLineDash function.
- Source:
- konva.js
-
isPointInPath()
-
isPointInPath function.
- Source:
- konva.js
-
lineTo()
-
lineTo function.
- Source:
- konva.js
-
measureText()
-
measureText function.
- Source:
- konva.js
-
moveTo()
-
moveTo function.
- Source:
- konva.js
-
putImageData()
-
putImageData function.
- Source:
- konva.js
-
quadraticCurveTo()
-
quadraticCurveTo function.
- Source:
- konva.js
-
rect()
-
rect function.
- Source:
- konva.js
-
reset()
-
reset canvas context transform
- Source:
- konva.js
-
restore()
-
restore function.
- Source:
- konva.js
-
rotate()
-
rotate function.
- Source:
- konva.js
-
save()
-
save function.
- Source:
- konva.js
-
scale()
-
scale function.
- Source:
- konva.js
-
setLineDash()
-
setLineDash function.
- Source:
- konva.js
-
setTransform()
-
setTransform function.
- Source:
- konva.js
-
stroke()
-
stroke function.
- Source:
- konva.js
-
strokeRect()
-
strokeRect function.
- Source:
- konva.js
-
strokeShape(shape)
-
stroke shape
Parameters:
Name Type Description shapeKonva.Shape - Source:
- konva.js
-
strokeText()
-
strokeText function.
- Source:
- konva.js
-
transform()
-
transform function.
- Source:
- konva.js
-
translate()
-
translate function.
- Source:
- konva.js