{"record":{"id":"bf4928c56ae55682","repo":"parallax/jsPDF","slug":"given-canvas-must-have-data-canvas-width-elemen","errorCode":null,"errorMessage":"Given canvas must have data. Canvas width: {element.width}, height: {element.height}","messagePattern":"Given canvas must have data\\. Canvas width: (.+?), height: (.+?)","errorType":"validation","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"src/modules/addimage.js","lineNumber":401,"sourceCode":"      //is base64 encoded dataUrl, directly process it\n      if (src.indexOf(\"data:image/\") === 0) {\n        return atob(\n          unescape(src)\n            .split(\"base64,\")\n            .pop()\n        );\n      }\n\n      //it is probably an url, try to load it\n      var tmpImageData = jsPDFAPI.loadFile(src, true);\n      if (tmpImageData !== undefined) {\n        return tmpImageData;\n      }\n    }\n\n    if (element.nodeName === \"CANVAS\") {\n      if (element.width === 0 || element.height === 0) {\n        throw new Error(\n          \"Given canvas must have data. Canvas width: \" +\n            element.width +\n            \", height: \" +\n            element.height\n        );\n      }\n      var mimeType;\n      switch (format) {\n        case \"PNG\":\n          mimeType = \"image/png\";\n          break;\n        case \"WEBP\":\n          mimeType = \"image/webp\";\n          break;\n        case \"JPEG\":\n        case \"JPG\":\n        default:\n          mimeType = \"image/jpeg\";","sourceCodeStart":383,"sourceCodeEnd":419,"githubUrl":"https://github.com/parallax/jsPDF/blob/a3930ce03a585a26b2c76d12a0f413ce96f6d1a3/src/modules/addimage.js#L383-L419","documentation":"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.","triggerScenarios":"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.","commonSituations":"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.","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"],"exampleFix":"// before\nvar canvas = document.createElement('canvas');\ndoc.addImage(canvas, 'PNG', 10, 10); // throws - no width/height\n\n// after\nvar canvas = document.createElement('canvas');\ncanvas.width = 400;\ncanvas.height = 300;\nvar ctx = canvas.getContext('2d');\nctx.fillRect(0, 0, 400, 300); // draw something\n// or wait for async render: await chart.render();\ndoc.addImage(canvas, 'PNG', 10, 10);","handlingStrategy":"validation","validationCode":"// Check canvas dimensions before calling addImage\nfunction isCanvasReady(canvas) {\n  return canvas &&\n    canvas.nodeName === 'CANVAS' &&\n    canvas.width > 0 &&\n    canvas.height > 0;\n}\n\nif (isCanvasReady(canvas)) {\n  doc.addImage(canvas, 'PNG', 10, 10);\n} else {\n  console.warn('Canvas not ready for addImage');\n}","typeGuard":"/**\n * @param {*} el\n * @returns {boolean}\n */\nfunction isNonEmptyCanvas(el) {\n  return el instanceof HTMLCanvasElement && el.width > 0 && el.height > 0;\n}","tryCatchPattern":"try {\n  doc.addImage(canvas, 'PNG', 10, 10);\n} catch (e) {\n  if (e.message.includes('canvas must have data')) {\n    // Canvas not rendered yet - retry after a tick or log warning\n    requestAnimationFrame(() => doc.addImage(canvas, 'PNG', 10, 10));\n  } else throw e;\n}","preventionTips":["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"],"tags":["addimage","canvas","dom-element","async-rendering"],"backgroundTag":null,"analyzedSha":"a3930ce03a585a26b2c76d12a0f413ce96f6d1a3","analyzedAt":"2026-08-13T05:33:39.648Z","schemaVersion":2},"datasetVersion":"2026-08-13T09:17:06.757Z"}