Setting the width of an article in Javascript doesn't update

user_11914177 0
Viewed 159

I have this code for a canvas and a chat:

<section id="main_section">
        <article id="GL">
            <canvas id="GL-Surface">

            </canvas>
        </article>

        <article id="chat">
            <script src="chat.js"></script>
        </article>
</section>

I want to set the width and height of the chat. It works when setting it in CSS, but I want to change the size of the chat inside of Javascript, since the canvas might get bigger. I use these commands to set the size:

document.getElementById("chat").width = w;
document.getElementById("chat").height = h;

But the chat doesn't change the size. These lines work for changing the size of the article containing the canvas. Printing out the document.getElementById("chat").width returns the right value, which is weird.

What is going on, that the same commands only work for some objects?

html5-canvas html javascript
2 Answers

Since you have set the width and height in your CSS, you can only modify the style properties of the canvas to change it, i.e. canvas.style.width and canvas.style.height.

const canvas = document.querySelector('canvas');
canvas.style.width = "500px";
canvas {
  width: 200px;
  height: 200px;
  background-color: dodgerblue;
}
<canvas></canvas>

user_95131840

The <script> tag doesn't belong there - it may know what the #gl element is, but it may not know what #chat is if the script executes before #chat gets defined by closing the article tag.

Move it to the bottom of the body.

user_116686670
Related