Search code examples
javascriptcanvaskineticjs

Using arcTo() gives me an error in Kinetic.js

I am getting an error when using arcTo in the following code, using Kinetic.js 5.1.0.

The error is 'TypeError: context.arcTo is not a function'

myshape = new Kinetic.Shape({
    sceneFunc: function(context) {
        context.beginPath();
        context.moveTo(10, 0);
        context.lineTo(57, 0);
        context.lineTo(47, 35);
        context.lineTo(13, 35);
        context.arcTo(3, 0, 10, 0, 3);
        context.closePath();
        context.fillStrokeShape(this);
    },
        fill: '#e2e4e3',
    stroke: '#92278f',
    strokeWidth: 1,
    rotationDeg: 15,
    x: 150,
    y: 40
});
Solution

  • context parameter is not native 2d canvas context, it is KineticJS wrapper. You may use arc() function or use native canvas reference with context._context

    context._context.arcTo(...);