Pluggable canvas adapter for Happy DOM using node-canvas.

Installation

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

Documentation

You will find the documentation in the Happy DOM Wiki under 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);

Happy DOM

Documentation | Getting Started | Setup as Test Environment | GitHub