Automattic/node-canvas

`Image#src=` does not work with object URL (`onload` never called, cannot be drawn on 2d context)

Open

#2525 opened on Jul 16, 2025

View on GitHub
 (2 comments) (1 reaction) (0 assignees)JavaScript (9,524 stars) (1,140 forks)batch import
Good first issue

Description

import { Image } from 'canvas';
import { readFileSync } from 'fs';

const file = readFileSync('test.png');
const objectUrl = URL.createObjectURL(new Blob([file], { type: 'image/png' }));
const image = new Image();
image.onload = () => {
	URL.revokeObjectURL(objectUrl);
	console.log('in onload: complete =', image.complete); // never called
};
image.src = objectUrl;
console.log('immediately after setting src: complete =', image.complete); // true

If you try to draw an image with src being an object URL on a 2d context, you get Error: Image given has not completed loading.

Environment:

  • Node.js 22.14.0
  • canvas 3.1.2

Contributor guide

Tech stack
javascriptnodejs
Domain
backendapi
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
fresh
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
Basic JavaScriptCanvas APINode.js
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
60
Research direction
Investigate the Image class implementation in node canvas. The issue demonstrates that setting `src` to an object URL does not trigger `onload` and sets `complete=true` immediately. Look at the source files where `Image.src` is handled, likely in `lib/image.js` or the native binding in `src/Image.cc`. Check if there is any existing handling for blob: or object URLs. The fix may involve detecting object URLs and loading the image data asynchronously. Also examine the Cairo based image loading functions to understand how images are actually loaded.