Canvas Auto-Width - CopperCube Open discussion Forum

Ambiera Forum

Discussions, Help and Support.

[

2 ] Page 1 of 2

	Ambiera Forum > CopperCube > CopperCube Open discussion
	Canvas Auto-Width

rottyumn Registered User
Quote
2011-06-16 17:09:28

I know this topic was brought up a while ago, but here's a quick method I'm using for setting the canvas to auto-width and height according to current window size. The only problem here is maintaining the camera aspect ratio. Hope this helps!


<html>
<head>
<script type="text/javascript" src="copperlichtdata/copperlicht.js"></script>
<script type="text/javascript">
	var canvas;
	function webGLStart() {
		canvas = document.getElementById("3darea");
		var c_w = window.innerWidth - 50,  c_h = window.innerHeight - 17;
		canvas.width = c_w;   canvas.height = c_h;
	}
	canvas.resize = function (){
		c_w = window.innerWidth - 50;  c_h = window.innerHeight - 17;
		canvas.width = c_w;   canvas.height = c_h;   
	}
</script>
</head>
<body ="webGLStart();" ="canvas.resize();"> 
   <canvas id="3darea" width="500" height="500" style="background-color:000; margin:0px;"></canvas> 
   	<script type="text/javascript">
	<!--
			startCopperLichtFromFile('3darea', 'copperlichtdata/pantest.ccbjs');
	-->
	</script>
</body>
</html>

KK Guest
Quote
2011-06-16 19:51:30

Very cool.. I will try to do this. Thanks for sharing

KK Guest
Quote
2011-08-10 14:35:55

Hi pal,

I am getting an error: canvas is undefined
Is it still working for you?

rottyumn Registered User
Quote
2011-08-10 16:41:27

Still working for me, is you canvas id still '3darea'?

KK Guest
Quote
2011-08-10 16:56:09

Yes the ID is still "3darea".. With that error it isn´t working for me. Don´t you get the same error?!

Would you leave the aspect ratio on "automatic"?

rottyumn Registered User
Quote
2011-08-10 17:03:37

I have been leaving the camera aspect ratio as automatic. Not sure if that makes a difference in the error you're getting though. I feel like maybe it's something in your HTML somewhere like a div tag left open or something. Or I suppose it could be the same sort of thing in your JS.

KK Guest
Quote
2011-08-10 17:21:31

I tested it with an empty scene using exact the same script you posted above.. Same error and no auto-width when browserwindow size is changed :(

Anyone else having this issue?

bars-profi Guest
Quote
2011-08-10 20:39:39

This method returns the size of the browser window:

[code
]var width=(window.innerWidth)?window.innerWidth:((document.all)?document.body.offsetWidth:null);
var height=(window.innerHeight)?window.innerHeight:((document.all)?document.body.offsetHeight:null);
[/code]

bars-profi Registered User
Quote
2011-08-10 20:40:52

This method returns the size of the browser window:


var width=(window.innerWidth)?window.innerWidth:((document.all)?document.body.offsetWidth:null);
var height=(window.innerHeight)?window.innerHeight:((document.all)?document.body.offsetHeight:null);

The rest of the code I think the problems will not make

rottyumn Registered User
Quote
2011-08-10 23:49:00

I took a look at the code again. Here's what I'm doing differently now:


window. = function() {
    canvas = document.getElementById('3darea');
    var c_w = window.innerWidth,  c_h = window.innerHeight;
    canvas.width = c_w - 0;   canvas.height = c_h;
}

sikhoonak Guest
Quote
2015-09-04 20:54:34

hi
i have problem by full screen
i replace this code in my pantest.html file but the screen go to left position of my screen and dont fullscreen

<html>
<head>
<script type="text/javascript" src="copperlichtdata/copperlicht.js"></script>
<script type="text/javascript">
var canvas;
function webGLStart() {
canvas = document.getElementById("3darea");
var c_w = window.innerWidth - 50, c_h = window.innerHeight - 17;
canvas.width = c_w; canvas.height = c_h;
}
canvas.resize = function (){
c_w = window.innerWidth - 50; c_h = window.innerHeight - 17;
canvas.width = c_w; canvas.height = c_h;
}
</script>
</head>
<body ="webGLStart();" ="canvas.resize();">
<canvas id="3darea" width="500" height="500" style="background-color:000; margin:0px;"></canvas>
<script type="text/javascript">

</script>
</body>
</html>

niko Moderator
Quote
2015-09-05 08:19:18

The attribute in the body of the posted code lacks that "on resize" (without spaces), this forum strips this out, unfortunately. Then this should be fixed. BTW: The next update of CopperCube will have this feature built-in, so you only need to click a checkbox for this.

sikhoonak Registered User
Quote
2015-11-28 12:35:38

hi
no check box found un ver 5.3 !

sikhoonak Registered User
Quote
2015-11-28 12:37:27

what's the best method to full screen the page in browser,i can't find solution

niko Moderator
Quote
2015-11-29 12:38:56

You are right, this didn't make it into the 5.3 release. But I'll publish a free plugin which will make this possible about in the middle of next week.

[

2 ] Page 1 of 2

Create reply:

Possible Codes

Feature	Code
Link	[url] www.example.com [/url]
Bold	[b]bold text[/b]
Image	[img]http://www.example.com/image.jpg[/img]
Quote	[quote]quoted text[/quote]
Code	[code]source code[/code]

Emoticons