I am trying to change the resolution of the HTML canvas. (Not the width and height). The canvas should maintain the same width and height as the screen, but the rendering resolution should be changeable. I can kind of replicate what I want by using the zoom feature in the browser, but I am wondering if there is a programmatic way to do this. Here is what I have attempted:

function resize() {
    screenWidth = mathRound(window.innerWidth);
    screenHeight = mathRound(window.innerHeight);
    calculateUIScale();
    var scaleFillNative = Math.max(screenWidth / maxScreenWidth, screenHeight / maxScreenHeight);
    c.width = screenWidth;
    c.height = screenHeight;
    graph.setTransform(scaleFillNative, 0, 0, scaleFillNative, ((screenWidth - (maxScreenWidth * scaleFillNative)) / 2), ((screenHeight - (maxScreenHeight * scaleFillNative)) / 2));
    graph.imageSmoothingEnabled = false;
    graph.webkitImageSmoothingEnabled = false;
    graph.mozImageSmoothingEnabled = false;
}

This makes the canvas fit to the screen. I am wondering if you can scale the canvas element somehow to simulate a different resolution.

I have tried to do this:

c.width = 40;
c.style.width = 400;

But the canvas is just really small now.

I am trying to change the resolution of the HTML canvas. (Not the width and height). The canvas should maintain the same width and height as the screen, but the rendering resolution should be changeable. I can kind of replicate what I want by using the zoom feature in the browser, but I am wondering if there is a programmatic way to do this. Here is what I have attempted:

function resize() {
    screenWidth = mathRound(window.innerWidth);
    screenHeight = mathRound(window.innerHeight);
    calculateUIScale();
    var scaleFillNative = Math.max(screenWidth / maxScreenWidth, screenHeight / maxScreenHeight);
    c.width = screenWidth;
    c.height = screenHeight;
    graph.setTransform(scaleFillNative, 0, 0, scaleFillNative, ((screenWidth - (maxScreenWidth * scaleFillNative)) / 2), ((screenHeight - (maxScreenHeight * scaleFillNative)) / 2));
    graph.imageSmoothingEnabled = false;
    graph.webkitImageSmoothingEnabled = false;
    graph.mozImageSmoothingEnabled = false;
}

This makes the canvas fit to the screen. I am wondering if you can scale the canvas element somehow to simulate a different resolution.

I have tried to do this:

c.width = 40;
c.style.width = 400;

But the canvas is just really small now.

• javascript
• html
• css
• canvas

Share Follow edited Jun 17, 2016 at 3:16 user3024235 asked Jun 17, 2016 at 2:43 user3024235user3024235 42511 gold badge55 silver badges1818 bronze badges 6

• 1 you can stretch it or shrink it with css, sometime useful with high def screens but be sure to keep the aspect ratio, and all your coordinates will be scaled too (e.g if you use mouse event listeners) – Kaiido Commented Jun 17, 2016 at 2:45
• 1 the width and height properties of the canvas define the amount of pixels, that the canvas contains. The corresponding css-properites define the dimensions of the canvas (as soon as they're set). If these two sets of dimensions differ, you're scaling the pixels on the canvas; either down or up. – Thomas Commented Jun 17, 2016 at 2:50
• jsfiddle/5ezwn4g9 – Thomas Commented Jun 17, 2016 at 3:10
• @Thomas I have tried to set the canvas.width = 40; and canvas.style.width 400 but that didnt work – user3024235 Commented Jun 17, 2016 at 3:15
• "didn't work" is not a very precise description of what you did, what you expected and what actually happened. And I'm not sure, wether your undderstanding of "changing the resolution of the canvas", and mine are the same. Could you explain what you're trying to achieve, besides your approach to achieve it. – Thomas Commented Jun 17, 2016 at 4:15

 |  Show 1 more ment

3 Answers 3

Sorted by: Reset to default 5

All CSS sizes requires an unit specified if a non-zero value is given:

The format of a length value (denoted by in this specification) is a (with or without a decimal point) immediately followed by a unit identifier (e.g., px, em, etc.). After a zero length, the unit identifier is optional.

So simply add an unit after the number which here is taken as a string:

c.width = 40;
c.style.width = "400px";  // add pixel unit

Or dynamically:

c.style.width = (c.width * 10) + "px";

var ctx = c.getContext("2d");

c.width = 40;
c.height = 12;
c.style.width = (c.width * 8) + "px";
c.style.height = (c.height * 8) + "px";

ctx.lineWidth = 2;
ctx.strokeRect(0,0,c.width,c.height);

<canvas id=c></canvas>

If you want to zoom the whole content of your page, try adding this to the CSS of your html element or simply the whole body:

* {
transform: scale(1.5);
}

jQuery would also work:

$(this).css({
    '-webkit-transform': 'scale(1.5)',
    '-o-transform': 'scale(1.5)',
    '-moz-transform': 'scale(1.5)',
    '-ms-transform': 'scale(1.5)',
    'transform': 'scale(1.5)'
});

I hope this helps.

http://codepen.io/jiemushi/pen/Vjjgaj

Using the word "resolution" in your title is confusing because that has to do with...

 var PR=window.devicePixelRatio;

...and such, but reading your post further it turns out that what you wanted was to ZOOM your canvas content in/out to suit any screen dimensions, if I got it right.

In which case you were looking for this:

context.scale(scalewidth,scaleheight);  // 0.5=50%, 1=100%, 2=200%, etc

Albeit 7 years too late! :)