无法在画布上设置高度和宽度

Question

I am creating a canvas object with javascript and trying to set height and width on it, but it isn't creating a canvas with the required dimensions. Please tell me where I am going wrong. Here's the code -

const canvas = document.createElement('canvas');
const a = document.createElement('a');
canvas.style.height = '1000px';
canvas.style.width = '1000px';
a.href = canvas.toDataUrl('image/jpg');
a.download = 'download.jpg';
a.click();

The downloaded image seems to be of much smaller dimensions and not of what is specified(1000px * 1000px)

Answer 1

If you want to set the width/height of a HTMLCanvasElement, you need to set them directly on the canvas element, not on its style. So it should look like this:

const canvas = document.createElement('canvas');
const a = document.createElement('a');
canvas.height = '1000px';
canvas.width = '1000px';
a.href = canvas.toDataURL('image/jpg');
a.download = 'download.jpg';
a.click();

Also, you misspelled the function .toDataURL() , URL is capitalized there.

Answer 2

Try with attributes, not the style: canvas.height instead of canvas.style.height . One is the presented resolution, the other is the actual pixel height. It's confusing, but let's you control upscaling.

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

Should give you a canvas with a 1000x1000 resolution.