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

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?

const canvas = document.querySelector('canvas');
canvas.style.width = "500px";

canvas {
  width: 200px;
  height: 200px;
  background-color: dodgerblue;
}

<canvas></canvas>