2

I'm using the following to download my fabricjs canvas and it works great but I wondered how I might be able to make the downloaded image larger so that it's clearer when I print it? Thanks for any help in advance.

// Download as png
function download(url, name) {
  // make the link. set the href and download. emulate dom click
  $('<a>').attr({
    href: url,
    download: name
  })[0].click();
}

function downloadFabric(canvas, name) {
  //  convert the canvas to a data url and download it.
  download(canvas.toDataURL(), name + '.png');
}

<button onclick="downloadFabric(canvas,'save');">Save</button>
anonymoose
  • 1,169
  • 2
  • 21
  • 62
  • Possible duplicate of [Draw Image on Canvas and export print quality image](https://stackoverflow.com/questions/36546206/draw-image-on-canvas-and-export-print-quality-image) – Durga Nov 14 '17 at 06:08

2 Answers2

3

This wound up being similar to this post. From there I was able to work that adding {multiplier: 4} to canvas.toDataURL(); worked splendidly.

anonymoose
  • 1,169
  • 2
  • 21
  • 62
2

You can set the canvas width and height as bigger than the showing size.

<canvas width="2400" height="2400" style="width:600px;height:600px;"></canvas>

Because render png refers to canvas width and height.

FIDDLE(you can get 2400x2400 image from the fiddle)

HerrGanzorig
  • 51
  • 1
  • 14