Class: Context

Konva. Context


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 have to use it if you want to create
a custom shape or a custom hit regions.

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


clear( [bounds])

clear canvas

Parameters:
Name Type Argument Description
bounds Object <optional>
Properties
Name Type Argument Description
x Number <optional>
y Number <optional>
width Number <optional>
height Number <optional>
Source:
konva.js

fillShape(shape)

fill shape

Parameters:
Name Type Description
shape Konva.Shape
Source:
konva.js

fillStrokeShape(shape)

fill then stroke

Parameters:
Name Type Description
shape Konva.Shape
Source:
konva.js

getCanvas()

get canvas wrapper

Source:
konva.js
Returns:
Type
Konva.Canvas

reset()

reset canvas context transform

Source:
konva.js

strokeShape(shape)

stroke shape

Parameters:
Name Type Description
shape Konva.Shape
Source:
konva.js