入力値を取得し、2つのパラメータで関数に挿入して矩形を作成しますか？

Question

私はjavascriptの初心者です。収集された入力値（幅と高さ）の取得方法がわからないので、widthとheightパラメータを取るupdateFormというメソッドを作成する必要があります。関数の本体では、入力フォーム上の幅と高さのフィールドを設定し、その長方形をキャンバスに描画するメソッドを呼び出すことができます。

JSフィドル - https://jsfiddle.net/rtomino/hbgmd4sg/2/

<form id="areaform"> 
    <label for="wid">Width:</label> 
    <input id="wid" type="number"> 
    <label for="hgt">Height:</label> 
    <input id="hgt" type="number"> 

    <button onclick="draw()" type="button">Draw Rectangle</button> 
</form> 

<br> 

<div id="drawRectangle"> 
<canvas id="rectCanvas" width=500 height=500></canvas> 
</div> 

JS

var canvas, 
    context, 
    widthValue = document.getElementById('wid'), 
    heightValue = document.getElementById('hgt'); 

canvas = document.getElementById("rectCanvas"); 
context = canvas.getContext("2d"); 

function updateForm(width, height) { 
    'use strict'; 

} 


function draw() { 
    context.clearRect(0, 0, canvas.width, canvas.height); 
    context.rect(0, 0, width, height); 
    context.fillStyle = "#EA7B00"; 
    context.fill(); 
} 

Answer 1

私はこのCodePen DemoでupdateForm機能のほか、以下のスニペットを使用。

キャンバスの幅/高さが100％に設定されているため、四角形を非常に大きくする余地がありますが、キャンバスのサイズはJavaScriptで任意に設定できます。

function updateForm(width, height) { 
 
    "use strict"; 
 
    //Position parameters used for drawing the rectangle 
 
    var x = 50; 
 
    var y = 50; 
 
    var canvas = document.createElement("canvas"); //Create a canvas element 
 
    //Set canvas width/height 
 
    canvas.style.width = "100%"; 
 
    canvas.style.height = "100%"; 
 
    // Set canvas drawing area width/height 
 
    canvas.width = window.innerWidth; 
 
    canvas.height = window.innerHeight; 
 
    //Position canvas 
 
    canvas.style.position = "absolute"; 
 
    canvas.style.left = 0; 
 
    canvas.style.top = 0; 
 
    canvas.style.zIndex = 100000; 
 
    canvas.style.pointerEvents = "none"; //Make sure you can click 'through' the canvas 
 
    document.body.appendChild(canvas); //Append canvas to body element 
 
    var context = canvas.getContext("2d"); 
 
    //Draw rectangle 
 
    context.rect(x, y, width, height); 
 
    context.fillStyle = "blue"; 
 
    context.fill(); 
 
} 
 

 
function draw() { 
 
    var width = document.getElementById("wid").value; 
 
    var height = document.getElementById("hgt").value; 
 
    updateForm(width, height); 
 
}

<form id="areaform"> 
 
    <label for="wid">Width:</label> 
 
    <input id="wid" type="number"> 
 
    <label for="hgt">Height:</label> 
 
    <input id="hgt" type="number"> 
 

 
    <button onclick="draw()" type="button">Draw Rectangle</button> 
 
</form>

この溶液をthis answerから適合されています。