Javascript 使用按钮更改矩形高度

我有一个长方形和一个按钮。当用户单击按钮时，我希望矩形变大。这是我的代码：

var c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；
ctx.rect（20,20,150,100）；
ctx.stroke（）；
var高度=150；
函数myFunction（）{
高度=300；
}

点击我！

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
}

编辑

从html中删除

宽度

，通过css添加

JS

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

 #myCanvas{
    width:300px
    }

CSS

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

 #myCanvas{
    width:300px
    }

HTML

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

#我的画布{
宽度：300px
}

点击我！

为什么它也会增加宽度？我不想增加宽度，你能让它保持线条的粗细吗？对不起，这么挑剔。线条的粗细我不知道。不要在厚度上打问号，只要在厚度的位置打个问号，我就能找到厚度