Styjun

I'm trying to change the size of the Stats.js canvas. I tried using CSS but I can't assign an id on that particular canvas element, so tried this:

HTML:

<div class="modal_container" id="modal_graph"> 
 <img id="moveModalImage" src="images/moveIcon.png" alt="Move modal window."/>
 <span onclick='document.getElementById( "modal_graph" ).style.display= "none";' class="close-button">×</span>
 <p>Performance over Time Graph</p>
 <hr>

 <div id="modal_4-content">
 <!-- Add Stats.GUI here -->

 </div>

</div>

CSS:

#modal_4-content canvas
 width: 240px; //Doesn't work
 height: 150px; //Doesn't work
 float: left; //Works fine
 padding-right: 60px; //Works fine

JS:

function createStatsGUI()

 var thisParent = document.getElementById("modal_4-content");

 //Create new Graph (FPS, MS, MB)
 stats1 = new Stats();

 //Display different panel
 stats1.showPanel( 0 ); // 0: fps, 1: ms, 2: mb, 3+: custom
 stats1.domElement.style.width = '200px';
 stats1.domElement.style.height = '200px';

 //Add Stats to Document - modal 4
 thisParent.appendChild( stats1.domElement ); 

If you know how to change this please let me know. Thanks for your time.

Try this

 thisParent.firstChild.width =100;
 thisParent.firstChild.height=100;

Instead of

thisParent.child.style.height=100

Expected html in my case

 <div id="modal_4-content"><canvas></canvas>
 </div>

No space between parent and child

 <div id="modal_4-content"><canvas></canvas> 
 //canvas is the first element here try Ur update 1,2,3
 //If not go with queryselector
 </div>

Queryselector

 var canvas = thisParent.querySelector('canvas');
 canvas.width = 500;
 canvas.height = 500;

To draw canvas style is different will not affect wen resize canvas.You need direct inline attribute to change width and height on resize.

I think you can get all child nodes by using .childnodes

This solved the problem:

function createStatsGUI()

 //Create new Graphs (FPS, MS, MB)
 statsGUI = new Stats();
 statsGUI.showPanel( 0 ); // 0: fps, 1: ms, 2: mb, 3+: custom

 var thisParent = document.getElementById("modal_4-content");
 thisParent.appendChild( statsGUI.domElement );

 var statsALL = document.getElementById("modal_4-content").querySelectorAll("canvas");

 for(var i=0; i<statsALL.length; i++)
 statsALL[i].style.width = "100%";
 statsALL[i].style.height = "160px";
 //...