Expose CanvasRenderingContext2D via the `canvas` package

Clear and concise description of the problem

I tried to use vitest in a project where I extensively use pixi.js and therefore, the Canvas element. As far as I know, jsdom does not expose canvas functionality out of the box but it can be emulated by using the node-canvas package (https://github.com/jsdom/jsdom/issues/3042).

Suggested solution

What I tried was bootstraping the canvas package in the jsdom environment with the following code

try {
  const { Context2d } = await importModule("canvas");
  Object.defineProperty(global, "CanvasRenderingContext2D", {
    get() {
      return Context2d
    }
  })
} catch (e) { }

inserted somewhere at https://github.com/vitest-dev/vitest/blob/27d6bcb10d6c00ae678769c6f48422ffe9d7d142/packages/vitest/src/env/jsdom.ts#L28-L30

Not the nicest implementation, but I hope you get the idea.

Alternative

No response

Additional context

By the way: Thank’s for this awesome package. It was so easy to setup and works damn good!

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn’t already an issue that request the same feature to avoid creating a duplicate.

[regenrek]

@hetsch could maybe share some code how you solved it? Trying to test a konvajs project where I need canvas too. Can’t figure it out how to test it with jsdom and vitest.

I’m running into:

Error: Not implemented: HTMLCanvasElement.prototype.getContext (without installing the canvas npm package)

[hetsch]

Thank you, @antfu and @patak-dev. Was my bad. Putting the code in a setup file works perfectly fine.