Get elements from canvas

Question

I would like to export my canvas onto a PDF and only render the elements added to the canvas. For example:

I have this canvas, with a background-image set to it. http://i49.tinypic.com/n7lv.png

This is my result when I render it to PDF (using Bytescout library) http://i50.tinypic.com/346ud7m.png

This is how I want it to end up as: http://i50.tinypic.com/2q1s9hv.png

Meaning, I want it to end up with no rounded corners, without the background image. The canvas is done using the fabric framework. My idea is to get all the elements added to the canvas, except background image, then render the PDF from there. Any guidelines? Is that the way to go?

Answer 1

You simply redraw the entire scene, omitting the parts you don't want to write to a PDF.

If you don't feel like keeping track of everything to redraw, then create a second, in-memory canvas (document.createElement('canvas')) and do every drawing operation to that canvas instead of your normal one, then draw that canvas onto your normal one as the user edits instead of drawing directly onto your normal canvas.

The old way:

// First you round the corners permanently by making a clipping region:
ctx.roundedRect(etc)
ctx.clip();
//then a user draws something onto normal canvas, like an image
ctx.drawImage(myImage, 0, 0);

The new way:

// make a hidden canvas:
var hiddenCanvas = document.createElement('canvas');
var hCtx = hiddenCanvas.getContext('2d');
// First you round the corners permanently by making a clipping region:
ctx.roundedRect(etc)
ctx.clip();
//then a user draws something onto HIDDEN canvas, like an image
// This image never gets its corners cut
hCtx.drawImage(myImage, 0, 0);
// Then you draw the hidden canvas onto your normal one:
ctx.drawImage(hiddenCanvas, 0, 0);

When its time to print, you use your hidden canvas, which does not have a background image and does not have clipped corners.