Skip to main content

How to convert canvas to pdf

Do you want to save Konva stage into a PDF file?​

PDF is a complicated format. So we have to use an external library such as jsPDF.

The idea of saving canvas to pdf is simple:

  1. Generate canvas content
  2. Export canvas into the image
  3. Add image into PDF document created with the PDF library
  4. Save PDF file

Also I have two tips for you:

  1. Thanks to High quality Exports, you can increase the quality of a PDF using pixelRatio attribute when you are converting a node into the image.

  2. It is possible to make a text selectable in the PDF. Even if we are adding the canvas into the PDF as an image, we can insert texts manually. That is not trivial and it can be difficult if you have complex styles. Also text rendering on PDF is different from the text rendering with Konva. But we can try to make it as close as possible. For the demo, we will draw "hidden" text inside PDF file. The text will be places under the image, so it is no visible. But it is still selectable. As a demo of "complex styles" I will blur the text.

Instructions: take a look into the canvas. Then try to save it as PDF.

import Konva from 'konva';

// Create a button for PDF export
const saveButton = document.createElement('button');
saveButton.textContent = 'Save as PDF';
saveButton.style.position = 'absolute';
saveButton.style.top = '5px';
saveButton.style.left = '5px';
document.body.appendChild(saveButton);

// Create a stage
const width = window.innerWidth;
const height = window.innerHeight;

const stage = new Konva.Stage({
  container: 'container',
  width: width,
  height: height,
});

const layer = new Konva.Layer();
stage.add(layer);

// Add background
const back = new Konva.Rect({
  width: stage.width(),
  height: stage.height(),
  fill: 'rgba(200, 200, 200)',
});
layer.add(back);

// Add text with blur effect
const text = new Konva.Text({
  text: 'This is the Darth Vader',
  x: 15,
  y: 40,
  rotation: -10,
  filters: [Konva.Filters.Blur],
  blurRadius: 4,
  fontSize: 18,
});
text.cache();
layer.add(text);

// Add arrow
const arrow = new Konva.Arrow({
  points: [70, 50, 100, 80, 150, 100, 190, 100],
  tension: 0.5,
  stroke: 'black',
  fill: 'black',
});
layer.add(arrow);

// Add image
const imageUrl = 'https://new.konvajs.org/assets/darth-vader.jpg';
Konva.Image.fromURL(
  imageUrl,
  function (darthNode) {
    darthNode.setAttrs({
      x: 200,
      y: 50,
      scaleX: 0.5,
      scaleY: 0.5,
    });
    layer.add(darthNode);
  },
  function () {
    console.error('Failed to load image');
  }
);

// Handle PDF export
saveButton.addEventListener('click', function () {
  // We need to check if jsPDF is loaded
  if (typeof jsPDF !== 'undefined') {
    const pdf = new jsPDF('l', 'px', [stage.width(), stage.height()]);
    pdf.setTextColor('#000000');
    
    // First add texts
    stage.find('Text').forEach((text) => {
      const size = text.fontSize() / 0.75; // convert pixels to points
      pdf.setFontSize(size);
      pdf.text(text.text(), text.x(), text.y(), {
        baseline: 'top',
        angle: -text.getAbsoluteRotation(),
      });
    });

    // Then put image on top of texts (so texts are not visible)
    pdf.addImage(
      stage.toDataURL({ pixelRatio: 2 }),
      0,
      0,
      stage.width(),
      stage.height()
    );

    pdf.save('canvas.pdf');
  } else {
    console.error('jsPDF library is not loaded. Please include it in your project.');
    alert('jsPDF library is not loaded. In a real project, you need to include it.');
  }
});

// Add jsPDF library dynamically for demo purposes
const script = document.createElement('script');
script.src = 'https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js';
script.integrity = 'sha384-NaWTHo/8YCBYJ59830LTz/P4aQZK1sS0SneOgAvhsIl3zBu8r9RevNg5lHCHAuQ/';
script.crossOrigin = 'anonymous';
document.head.appendChild(script);
Open on CodeSandboxOpen Sandbox