Property 'getContext' does not exist on type '{ sceneFunc: () => void;

vinoth kumar

3y857Angular

Hi All,

When i using canvas in konva by using angular13 to draw a pattern lock.i getting this error how to solve this.

private newLine(dots: Konva.Circle[], strokeStyle = "rgba(255,255,255,0.5)") {

return new Konva.Shape({

sceneFunc: function () {

const ctx: any = this.getContext(); //////// this line gets an error

const dot1 = dots[0];

ctx.beginPath();

ctx.moveTo(dot1.x(), dot1.y());

for (let i = 1; i < dots.length; i += 1) {

const dot: Konva.Circle = dots[i];

ctx.lineTo(dot.x(), dot.y());

}

ctx.lineJoin = "round";

ctx.lineCap = "round";

ctx.strokeStyle = strokeStyle;

ctx.lineWidth = 2;

ctx.stroke();

ctx.closePath();

}

});

}

3 Replies

Know the answer? Post it — somebody with the same question will find it here.

Tuhin Paul3y ago
Hello Vinoth,

One possible solution is to use a type assertion so that you know the returned object is of type CanvasRenderingContext2D. You can modify the getContext() call like this:
```
const ctx: CanvasRenderingContext2D = this.getContext('2d') as CanvasRenderingContext2D;
```
This tells compiler to treat the returned object as if it were of type CanvasRenderingContext2D, which should allow you to call its methods without errors.

Regarding the second error, it looks like there may be an issue with the binding of the 'this' keyword. The error message mentions that the argument of type 'this' is not assignable to the parameter of type 'Shape'. Without seeing more of the code, it's hard to know exactly what the problem is, but it could be related to how the function is being called. I would recommend checking the context in which the function is being called, and making sure that the 'this' keyword is bound correctly.
vinoth kumar3y ago
Hi Tuhin,

Thanks for ur response,

But it will not solve my issue.

when i try the first method it will be shown the same error.

when i try the second method

const ctx: CanvasRenderingContext2D = this.getContext('2d');

}.bind(this) /////in these highlight text shown the below error.

these error shown

1.Type 'Context' is missing the following properties from type 'CanvasRenderingContext2D': getContextAttributes, isPointInStroke, createConicGradient, filter, and 7 more.

2.Expected 0 arguments, but got 1.

3.No overload matches this call.
Overload 1 of 6, '(this: (this: Shape) => void, thisArg: Shape): () => void', gave the following error.
Argument of type 'this' is not assignable to parameter of type 'Shape'.
Type 'PatternService' is missing the following properties from type 'Shape': _centroid, colorKey, _fillFunc, _strokeFunc, and 269 more.
Overload 2 of 6, '(this: (this: Shape, ...args: never[]) => void, thisArg: Shape, ...args: never[]): (...args: never[]) => void', gave the following error.
Argument of type 'this' is not assignable to parameter of type 'Shape'
Tuhin Paul3y ago
As far as I see based on the code you have provided the error is due to a TypeScript type checking issue. Specifically, TypeScript is unable to determine the type of this in the sceneFunc function.

To fix this, you can add a type annotation to this to specify the type of the context. For example, you can change the line that is causing the error to:
```
const ctx = this.getContext('2d') as CanvasRenderingContext2D;
```
This will tell TypeScript that this has a getContext method that returns a CanvasRenderingContext2D object, which is the correct type for the ctx variable.

Alternatively, you can also try using the Function.bind method to bind the sceneFunc function to a specific this context. For example:
```
sceneFunc: function(this: Konva.Shape) {
  const ctx: CanvasRenderingContext2D = this.getContext('2d');
  // ...
}.bind(this)
```
This will bind the sceneFunc function to the Konva.Shape instance, which should allow TypeScript to properly infer the type of this.

Let me know if this can solve the issue.