Higher DPI graphics with HTML5 canvas

Question

Is there a way to set a custom DPI/PPI when creating an image using the HTML5 canvas? I know how can I draw on the canvas and export it as an image, but how can I make sure

Answer 1

If you just want to set the dpi of the PNG (ie not increase the number of pixels) then this library lets you set the pHYs chunk (amongst other things):

https://github.com/imaya/CanvasTool.PngEncoder

Minimal example to export an HTML5 canvas to base64-encoded PNG:

        // convert dots per inch into dots per metre
        var pixelsPerM = dpi * 100 / 2.54;

        var param = {
            bitDepth : 8,
            colourType : 2,
            filterType : 0,
            height : canvas.height,
            interlaceMethod : 0,
            phys : {
                unit : 1,
                x : pixelsPerM,
                y : pixelsPerM
            },
            width : canvas.width
        };

        var array = canvas.getContext('2d').getImageData(0, 0, canvas.width,
                canvas.height).data;

        var png = new window.CanvasTool.PngEncoder(array, param).convert();

        var base64 = 'data:image/png;base64,' + btoa(png);