I'd like to change size of the canvas with data from input form-CodePudding

I have two input forms - Width, Height and button - submit When user enters values in form and presses the button I'd like to render on a same page canvas with user's dimensions.

HTML:

<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;
}

The problem is, I don't see any changes.

I tried different approaches:

used JQuery,
different method (POST, GET),
different buttons,
tried to save input data in different global variable,
googled it

But can't find anything that will work with canvas and input form.

CodePudding user response：

Use

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