saving a website canvas as a larger image

Question

I'm trying to download a high res canvas image from

https://axaa2023.mapyourshow.com/8_0/floorplan/ https://ax2023.mapyourshow.com/8_0/floorplan/

If I open the canvas image in a new tab, the text is small and becomes blurry when zooming in If I zoom in on the canvas then open image in new tab, only that part of the image is given

I've tried modifying the dimensions with inspect element which failed. I used JavaScript to download the image but it's still low res:

saveCanvas.toBlob(blob => {
    let a = document.createElement("a"),
        url = URL.createObjectURL(blob);
    a.href = url;
    a.download = "image.png";
    document.body.appendChild(a);
    a.click();
    setTimeout(function() {
        document.body.removeChild(a);
        window.URL.revokeObjectURL(url);
    }, 0);
});

AG1 · Answer 1 · 2023-06-27T15:28:02.993

You can upscale canvas and rerender before saving. Here is the example (or open this codepen):

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext('2d');
const pr = window.devicePixelRatio;
const size = {w: canvas.clientWidth * pr, h: canvas.clientHeight * pr};
canvas.width = size.w;
canvas.height = size.h;

const draw = () => {
  ctx.fillStyle = "#afb";
  ctx.fillRect(0, 0, size.w, size.h);
  ctx.font = "20px Arial";
  ctx.fillStyle = "#333";
  ctx.fillText("ABC", 20, size.h/2);
};

draw();

const save = (name) => {
    canvas.toBlob(blob => {
        let a = document.createElement("a"),
            url = URL.createObjectURL(blob);
        a.href = url;
        a.download = `${name}.png`;
        document.body.appendChild(a);
        a.click();
        setTimeout(function() {
            document.body.removeChild(a);
            window.URL.revokeObjectURL(url);
        }, 0);
    });
}

const saveScaled = (name, scaleRate = 2) => {
    // set scaled size to canvas
    // it will not affect on ui cause it doesn't change style, only canvas internal size
    canvas.width = size.w * scaleRate;
    canvas.height = size.h * scaleRate;
    ctx.save();
    ctx.scale(scaleRate, scaleRate);
    draw();
    // actual save
    save(name);
    // return everything back to keep app to be responsive and do not take too much time for rendering.
    canvas.width = size.w;
    canvas.height = size.h;
    ctx.restore();
    draw();
};

document.getElementById("low").addEventListener("click", ()=>{
  save("low");
});

document.getElementById("high").addEventListener("click", ()=>{
  saveScaled("high", 4);
});

canvas {
  width: 130px;
  height: 50px;
  display: block;
  margin-bottom: 5px;
}

<canvas id="canvas"></canvas>
<button id="low">Low res</button>
<button id="high">High res</button>

Do not forget to return everything back after upscaling and saving cause it can cause problems with performance.

saving a website canvas as a larger image

1 Answers1