Export the HTML Canvas as print optimized file

Drawing things that result in an art sketches on the HTML Canvas is fun but how do you export them? For a quick export it's fine to right click on the canvas and save it. The file will have a set resolution wich is the same as your canvas resolution. If you want to print your canvas content in a professional way you will need a much higher resolution and usually a fixed width/height. In this article I will show you how to configure your canvas to export a high dpi image optimized for printing.

How?

First thing we need is a reference to the canvas in our JS code and the 2D context of our canvas.

const cvs = document.getElementById("drawing");
const ctx = cvs.getContext("2d");
const dpr = window.devicePixelRatio;

Printers use the measurement DPI wich stands for dots per inch. The canvas is based on pixels so there must be a conversion between these two. Let's say I want my canvas content printed on a 2 inch by 2 inch piece with a resolution of 300 dpi. In this case my real canvas width/height must be 300*2 pixel:

const dpi = 300;
let width = 2;
let height = 2;
cvs.width = width * dpi * dpr;
cvs.height = height * dpi * dpr;
ctx.scale(dpr, dpr);

As you see there is a third constant multiplied with our canvas size, the device pixel ratio. It is the device specific ratio of physical pixel per pixel calculated by your website. Read more here We also need to scale the context to this ratio to make it look crisp.
The last step for the canvas setup is to scale it with css so it fits the screen. By doing this it will keep the set resolution but will appear smaller on the screen.

canvas {
  width: 600px;
  height: 600px;
}

And that's it. If you now right click on the canvas and save it you can see the generated image has the defined size optimized for print.
Instead of a right click to download the image the canvas has a 'toDataURL' Function wich we can use to download the image with code. The generated DataURL can be added to an anchor tag to start the download:

function download() {
  const downloadUrl = cvs.toDataURL();
  const a = document.createElement("a");
  a.href = downloadUrl;
  a.setAttribute("download", "SketchDownload");
  a.click();
}

Simply link the function to a button and we can export a HTML canvas with a specific size on the click of a button.

Creative Coding Workbench

This article is part of my progress for the Digital Ocean Hackathon Project 'Creative Coding Workbench'.

Features:

• draw sketch on HTML canvas
• export sketch for print
• expose sketch settings to UI
• toggle sketch animation
• save sketch to a library
• load sketch from a library
• edit sketch from a library
• ...

Technologies:

• Sapper
• Digitial Ocean App Platform
• ...

Stay tuned for updates on this project as there will be posts for each part of it.