Node Canvas Adapter

About

@happy-dom/node-canvas-adapter makes it possible to use node-canvas as a canvas adapter for Happy DOM.

Installation

npm install canvas @happy-dom/node-canvas-adapter

Usage

import { Window } from 'happy-dom';
import { CanvasAdapter } from '@happy-dom/node-canvas-adapter';

const window = new Window({
  settings: {
    canvasAdapter: new CanvasAdapter(),
    // Optionally, enable image file loading (e.g. for <img> elements)
    enableImageFileLoading: true
  }
});

const canvas = window.document.createElement('canvas');
const context = canvas.getContext('2d');

canvas.width = 200;
canvas.height = 200;

// Now you can use canvas context
context.fillStyle = 'red';
context.fillRect(0, 0, 100, 100);

// Get data URL
const dataUrl = canvas.toDataURL();

// Output the data URL
console.log(dataUrl);