path2d node-canvas example doesn't work in TypeScript

[CreativeTechGuy]

In TypeScript, the example from the path2d package docs (converted to ESM) gives the following error:

Example:

import { CanvasRenderingContext2D } from "canvas";
import { applyPath2DToCanvasRenderingContext } from "path2d";

applyPath2DToCanvasRenderingContext(CanvasRenderingContext2D);

Argument of type 'typeof CanvasRenderingContext2D' is not assignable to parameter of type 'IPrototype<ICanvasRenderingContext2D>'.
  The types of 'prototype.isPointInPath' are incompatible between these types.
    Type '(x: number, y: number, fillRule?: CanvasFillRule | undefined) => boolean' is not assignable to type '{ (x: number, y: number, fillRule?: CanvasFillRule | undefined): boolean; (path: Path2D, x: number, y: number, fillRule?: CanvasFillRule | undefined): boolean; }'.
      Types of parameters 'x' and 'path' are incompatible.
        Type 'Path2D' is not assignable to type 'number'.

And then the next line global.CanvasRenderingContext2D = CanvasRenderingContext2D; gives this error:

Type 'typeof CanvasRenderingContext2D' is not assignable to type '{ new (): CanvasRenderingContext2D; prototype: CanvasRenderingContext2D; }'.
  Types of property 'prototype' are incompatible.
    Type 'CanvasRenderingContext2D' is missing the following properties from type 'CanvasRenderingContext2D': getContextAttributes, isPointInStroke, createConicGradient, filter, and 5 more.

---

I realize that this isn't entirely your problem, but hopefully you can work this out with the maintainers of canvas so the documented example actually works. It's really disheartening when trying to use something and getting errors immediately upon starting.

[CreativeTechGuy]

Also the next line of the docs example:

// Path2D has now been added to global object

This isn't true. In the example you imported Path2D explicitly before it could be used. Without importing it, it's not available, so we actually need to manually assign global.Path2D = Path2D.

Then when trying to do that I get the following TypeScript error:

Type 'typeof Path2D' is not assignable to type '{ new (path?: string | Path2D | undefined): Path2D; prototype: Path2D; }'.
  Types of construct signatures are incompatible.
    Type 'new (path?: string | Path2D | undefined) => Path2D' is not assignable to type 'new (path?: string | Path2D | undefined) => Path2D'.
      Types of parameters 'path' and 'path' are incompatible.
        Type 'string | Path2D | undefined' is not assignable to type 'string | import("./node_modules/path2d/dist/index").Path2D | undefined'.
          Type 'Path2D' is not assignable to type 'string | Path2D | undefined'.
            Property 'commands' is missing in type 'Path2D' but required in type 'import("./node_modules/path2d/dist/index").Path2D'.

[nilzona]

hey @CreativeTechGuy thanks for trying out the library.

Your comments will be mostly resolved by #58

And then the next line global.CanvasRenderingContext2D = CanvasRenderingContext2D; gives this error:

The type CanvasRenderingContext2D in this case comes from the node-canvas library, so I can't do anything about that.

It's really disheartening when trying to use something and getting errors immediately upon starting.

I hope you realize that I'm just a dude maintaining this library on my free time. I don't have any use of it anymore, I just think it's fun (kind of). Don't know what's more disheartening. To do free work for others or get complaints about it.

You are more than welcome to help out maintaining the library. Just let me know.

This isn't true. In the example you imported Path2D explicitly before it could be used. Without importing it, it's not available, so we actually need to manually assign global.Path2D = Path2D.

I know it's not true :) but some old documentation was lingering behind and I didn't go over everything properly. The type error on global.Path2D = Path2D will always give you type errors unfortunately since they are not the same. It's maybe possible to solve. But I think it's totally fine to annotate the line as:

// @ts-expect-error custom Path2D
global.Path2D = Path2D

[CreativeTechGuy]

I hope you realize that I'm just a dude maintaining this library on my free time. I don't have any use of it anymore, I just think it's fun (kind of). Don't know what's more disheartening. To do free work for others or get complaints about it.

Sorry if that came across wrong. I was just trying to explain why it mattered since many package maintainers don't seem to care that documentation isn't correct.

Whenever I file an issue I always try to do 3 things: clearly state the problem, why the problem should be fixed (aka: why it matters), and if possible, suggestions to fix it.

I really appreciate the work you have done, no doubt. Apologies.

[nilzona]

A library is just as good as it's documentation :)