ボタンで長方形の高さを変更

Question

私は長方形とボタンを持っています。ユーザーがボタンをクリックすると、長方形が大きくなるようにします。これは私のコードです：

var c = document.getElementById("myCanvas"); 
 
var ctx = c.getContext("2d"); 
 
ctx.rect(20, 20, 150, 100); 
 
ctx.stroke(); 
 

 
var height = 150; 
 

 
function myFunction(){ 
 
\t height = 300; 
 
}

<button onclick="myFunction()">Click Me!</button> 
 

 
<canvas id="myCanvas" width="300" height="height" style="border:1px solid #d3d3d3;"></canvas>

が、私はボタンをクリックすると、何も起こりません。助けて？

Answer 1

height="height"は、htmlでは有効な値ではありません。あなたは、

var c = document.getElementById("myCanvas"); 
var ctx = c.getContext("2d"); 
ctx.rect(20, 20, 150, 100); 
ctx.stroke(); 

var height = 150; 

function myFunction(){ 
    c.style.height = '300px'; // changed here 
} 

DEMO

編集

のhtmlからwidthを削除するキャンバスのstyle.heightを変更するCSSを通してそれを追加することができ、ボタンのクリックで

JS

function myFunction(){ 
     c.style.height ='300px'; 
    } 

CSS

#myCanvas{ 
    width:300px 
    } 

HTML

<canvas id="myCanvas" style="border:1px solid #d3d3d3;"></canvas> 

DEMO 2

var c = document.getElementById("myCanvas"); 
 
var ctx = c.getContext("2d"); 
 
ctx.rect(20, 20, 150, 100); 
 
ctx.stroke(); 
 

 

 

 
function myFunction(){ 
 
\t c.style.height ='300px'; 
 
}

#myCanvas{ 
 
width:300px 
 
}

<button onclick="myFunction()">Click Me!</button> 
 

 
<canvas id="myCanvas" style="border:1px solid #d3d3d3;"></canvas>