parallax/jsPDF · error · Error

Given canvas must have data. Canvas width: {element.width},

Error message

Given canvas must have data. Canvas width: {element.width}, height: {element.height}

What it means

When passing an HTML <canvas> element to addImage (via getImageDataFromElement), jsPDF checks that the canvas has non-zero width and height. A zero-dimension canvas means no pixel data has been drawn to it, and calling toDataURL on it would produce a meaningless or empty result. The error message includes the actual dimensions to aid debugging.

Source

Thrown at src/modules/addimage.js:401

      //is base64 encoded dataUrl, directly process it
      if (src.indexOf("data:image/") === 0) {
        return atob(
          unescape(src)
            .split("base64,")
            .pop()
        );
      }

      //it is probably an url, try to load it
      var tmpImageData = jsPDFAPI.loadFile(src, true);
      if (tmpImageData !== undefined) {
        return tmpImageData;
      }
    }

    if (element.nodeName === "CANVAS") {
      if (element.width === 0 || element.height === 0) {
        throw new Error(
          "Given canvas must have data. Canvas width: " +
            element.width +
            ", height: " +
            element.height
        );
      }
      var mimeType;
      switch (format) {
        case "PNG":
          mimeType = "image/png";
          break;
        case "WEBP":
          mimeType = "image/webp";
          break;
        case "JPEG":
        case "JPG":
        default:
          mimeType = "image/jpeg";

View on GitHub (pinned to a3930ce03a)

Solutions

Ensure drawing is complete before calling addImage: call addImage inside the image/chart onload or render callback
Explicitly set canvas.width and canvas.height to non-zero values before drawing
Check canvas dimensions before calling addImage: if (canvas.width > 0 && canvas.height > 0) doc.addImage(canvas, ...)
For async rendering, use await or promise callbacks to guarantee the canvas has content

Example fix

// before
var canvas = document.createElement('canvas');
doc.addImage(canvas, 'PNG', 10, 10); // throws - no width/height

// after
var canvas = document.createElement('canvas');
canvas.width = 400;
canvas.height = 300;
var ctx = canvas.getContext('2d');
ctx.fillRect(0, 0, 400, 300); // draw something
// or wait for async render: await chart.render();
doc.addImage(canvas, 'PNG', 10, 10);

Defensive patterns

Strategy: validation

Validate before calling

// Check canvas dimensions before calling addImage
function isCanvasReady(canvas) {
  return canvas &&
    canvas.nodeName === 'CANVAS' &&
    canvas.width > 0 &&
    canvas.height > 0;
}

if (isCanvasReady(canvas)) {
  doc.addImage(canvas, 'PNG', 10, 10);
} else {
  console.warn('Canvas not ready for addImage');
}

Type guard

/**
 * @param {*} el
 * @returns {boolean}
 */
function isNonEmptyCanvas(el) {
  return el instanceof HTMLCanvasElement && el.width > 0 && el.height > 0;
}

Try / catch

try {
  doc.addImage(canvas, 'PNG', 10, 10);
} catch (e) {
  if (e.message.includes('canvas must have data')) {
    // Canvas not rendered yet - retry after a tick or log warning
    requestAnimationFrame(() => doc.addImage(canvas, 'PNG', 10, 10));
  } else throw e;
}

Prevention

Always set canvas.width and canvas.height explicitly before drawing
For async rendering (charts, images), call addImage inside the render callback
Check canvas.width > 0 before calling addImage as a pre-flight validation

When it happens

Trigger: Passing a canvas element that was created with document.createElement('canvas') but never had its width/height set or had no drawing operations. Passing a canvas whose width or height was explicitly set to 0. Passing a canvas before an async draw operation (e.g., drawImage of a not-yet-loaded Image) completes.

Common situations: Rendering charts or images to canvas asynchronously and calling addImage before the render completes. Using offscreen canvases that haven't been initialized. Canvas dimensions computed from CSS or container size that evaluate to 0.

Related errors

AI-assisted analysis of parallax/jsPDF@a3930ce03a (2026-08-13). Data as JSON: /api/errors/bf4928c56ae55682. Report an issue: GitHub.