I am using Konva with Konva-React to draw a simple custom shape consisting of two perpendicular lines joined by an arc.
The API documentation for custom shape states that we can use the renderer to access the HTML5 Canvas context. As such I have created a drawing function that uses the Konva.Canvas renderer to display my shape, however the shape does not render as expected. See: https://codesandbox.io/s/react-konva-custom-shape-demo-hs3y4.
This renders correctly when using HTML5 Canvas https://codepen.io/anon/pen/voYNLR.
After several permutations (using typescript) I managed to generate an error message that highlights an issue with the arcTo command:
Expected 6 arguments, but got 5. TS2554
However https://www.w3.org/TR/2dcontext/ specifically states that arcTo has 5 parameters:
context.arcTo(x1, y1, x2, y2, radius)
On further investigation Context.d.ts states:
arc(a0: any, a1: any, a2: any, a3: any, a4: any, a5: any): void;
arcTo(a0: any, a1: any, a2: any, a3: any, a4: any, a5: any): void; <== Note 6 args (the same as arc)
The definition of arcTo in nodemodules\konva\lib\Context.js has what I believe to be a bug:
function Context(canvas) {
this.canvas = canvas;
this._context = canvas._canvas.getContext('2d');
……
Context.prototype.arc = function (a0, a1, a2, a3, a4, a5) {
this._context.arc(a0, a1, a2, a3, a4, a5);
};
Context.prototype.arcTo = function (a0, a1, a2, a3, a4, a5) {
this._context.arc(a0, a1, a2, a3, a4, a5);
};
Notice here that the implementation of the prototype for arcTo uses _context.arc in place of arcTo. I would appreciate any validation of these findings, or some background if this is intended behaviour.
I have created a fork with a modified arcTo signature here: https://github.com/piriej/konva (warning: work in progress)
Kind Regards Jeff
