This is the first question I've ever asked on here, as normally I can find an answer that will solve all my problems. However, this week I've hit quite the wall.
I'm using a canvas on my page that's working great and can be saved as an image file. I've also created a button that will open the canvas in a new window for printing after using toDataURL. I'm using the code below:
function printable() {
var dataUrl = document.getElementById("mainCanvas").toDataURL("image/png");
var windowContent = '<!DOCTYPE html>';
windowContent += '<head><title>Print Map</title></head>';
windowContent += '<body>';
windowContent += '<img src = "' + dataUrl + '">';
windowContent += '</body>';
windowContent += '</html>';
var printWin = window.open('', '', width = 340, height = 260);
printWin.document.open();
printWin.document.write(windowContent);
printWin.document.close();
printWin.focus();
printWin.print();
}
This works great and opens the print dialogue to print my canvas image. My issue is that my image is larger than a single page and only the first page of my image prints. Is there any way to print my canvas across multiple pages, or should i just chalk this up to bad browser to printer functionality and get my users who need to print to use a different program after saving their canvas locally?
Thanks
there is a stupid solution, but definitely work.
use a script to split canvas, and put contents to several separate canvases.
use these functions: