我有两个输入表单-宽度、高度和按钮-提交当用户在表单中输入值并按下按钮时，我希望在同一页画布上呈现用户的尺寸。
于飞：

<div id="app">
    <form>
        <label for="enterWidthInput">Width:</label><br>
        <input type="number" id="enterWidthInput" name="widthInput"><br>

        <label for="enterHeightInput">Height:</label><br>
        <input type="number" id="enterHeightInput" name="heightInput"><br>

        <input type="submit" id="submitButton" value="Submit">
    </form>
</div>

<canvas id="myCanvas"></canvas>

app.js:

let canvasElement =  document.getElementById("myCanvas");
let userInputHeight = document.getElementById("enterHeightInput");
let userInputWidth = document.getElementById("enterWidthInput");
let addParamCanvas = document.getElementById("submitButton");

function changeCanvas() {
    canvasElement.style.width = userInputWidth+"px";
    canvasElement.style.height = userInputHeight+"px";
}

addParamCanvas.addEventListener('click', changeCanvas);

$("#submitButton").submit(function(e) {
    e.preventDefault();
});

CSS：

#app canvas {
    margin: auto;
}

#myCanvas {
    width: 500px;
    height: 300px;
    background-color: aqua;
}

问题是，我看不出有什么变化。
我尝试了不同的方法：

• 使用了JQuery，
• 不同方法（POST、GET），
• 不同的按钮，
• 尝试将输入数据保存在不同的全局变量中，
• 谷歌搜索了一下

但是找不到任何可以与画布和输入表单一起工作的东西。