Save HTML5 Canvas with upscaling

Question

I am developing a image editor that has text on it using HTML5 canvas. The canvas I am using has the width and the height of 500 pixels because of the less room to place it on the web page. However I need to save the canvas data as an image in a bigger scale like 1000 x 1000 pixels. How can I achieve this? I search for similar issue on the web but could not find an answer.

Answer 1

To accomplish this you will need to set the width and height attributes on the canvas to 1000 and 1000. This represents the native size of the canvas. Then you can scale down the canvas using CSS to get it to fit on your page.

Example HTML:

<canvas id="theCanvas" width="1000" height="1000"></canvas>

Example CSS:

theCanvas {
    width: 500px;
    height: 500px;
}

For more information about native vs scaled canvas sizing, see this answer.