three.js changing resolution

Question

I have a question that may sound simply stupid and it's about resolution in THREE.js. I am common with OpenGL and few frameworks around it, so it's pretty obvious that i finally got interested with webGL and therefore Three.js. I tried some simple demos and decided to write something on my own, but here's a problem:

How can i accomplish having canvas with size of 640x480 px, but rendering the 320x240px scene on it's full size?

For example just for performance, or more artistic/oldScholl look?

Thanks in advance.

bfavaretto · Accepted Answer · 2013-10-11 18:49:13Z

1

You can use CSS. Set the canvas to 320x240px using html attributes or JavaScript, then use CSS to set it to 640x480px. This should scale the canvas and its contents.

For example:

<canvas id="c" width="128" height="128"></canvas>

#c {
    width: 256px;
    height: 256px;
}

http://jsfiddle.net/jwy6a/

answered Oct 11, 2013 at 18:49

bfavaretto

72k18 gold badges118 silver badges162 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user2872173 Over a year ago

Thanks for the hint, but i already tried that. It appears that tampering with canvas width and height destroys three.js rendering context. I just got blank canvas, when running the same program without changing the resolution causes no errors. any suggestions on that? maybe working three.js example?

Collectives™ on Stack Overflow

three.js changing resolution

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related