Hi

If you create just a canvas (as opposed to creating and using a layer), then WADE won't resize and reposition it automatically, because it does that only with layers.

You can do it manually, since WADE still updates the css for the container, so you could look at the container's style and apply the same values to your canvas.

var container = document.getElementById(wade.getCotnainerName());myCanvas.style.width = container.style.width;myCanvas.style.height = container.style.height;// also set the width and height attributes for the canvas (not just its css style)myCanvas.width = wade.getScreenWidth();myCanvas.height = wade.getScreenHeight();

You probably want to do it onResize only, not every frame.

There is more to it if you want to do it properly (e.g. the screen could be rotated if the user is forcing an orientation, or if you want to support resolution factors, etc). In this case I'd look at what the renderer does around line 208 of renderer.js

Gio,

Thanks for your help. But it doesn't seem to work ?

I am doing the following

this.onResize = function() {		console.log('on resize ' + wade.getScreenWidth());		if (background) { background.getSprite().setSize(wade.getScreenWidth(), wade.getScreenHeight()); }		if (renderer) {			console.log('in renderer');			var container = document.getElementById(wade.getContainerName()); 			threeCanvas.style.width = container.style.width;			threeCanvas.style.height = container.style.height;			threeCanvas.width = wade.getScreenWidth();			threeCanvas.height = wade.getScreenHeight();			console.log('style w ' + threeCanvas.style.width + ' ht ' + threeCanvas.style.height);			console.log('canvas w ' + threeCanvas.width + ' ht ' + threeCanvas.height);			console.log(threeCanvas);			renderer.setSize( wade.getScreenWidth(), wade.getScreenHeight() );			camera.aspect	= wade.getScreenWidth() / wade.getScreenHeight();			camera.updateProjectionMatrix();		}	};

I then setup the mouse click to dump the threeCanvas data.

If I perform the above code, then after onResize, the threeCanvas width, height and styles do not change ? Even though I seem to be setting them based on the console messages.

If I resize the browser window vertically, and then check the threeCanvas, its' width and height are the same, but the styles reflect the correct container size, and so everything draws correctly.

So, you are doing something in the wade resize function that I am not doing correctly here.

I looked in the layer.js file. In the Layer.prototype.resize method, it seems you do some extra stuff if the context render mode is webgl. Although I am not sure if I am looking in the right place.

So, whatever you are doing in the engine is correct,  but it is not what I am doing and it would seem to be the difference in using a webgl context versus a 2d context ?

Again, thanks for the help,

Shri

Gio,

I commented out these three lines

renderer.setSize( wade.getScreenWidth(), wade.getScreenHeight() );camera.aspect	= wade.getScreenWidth() / wade.getScreenHeight();camera.updateProjectionMatrix();

from the above code and everything looks like it is working ok.

I had those lines in there because that's what was recommended to do on a resize event in various three.js tutorials.

All those tutorials however assume that you are running three.js in a standard html page.

Anyway, it all seems good for now.

Thanks for the code to reset the canvas style and size.

I'll let you know if I run into any more issues.

cheers,

Shri