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 .