Javascript HTML画布维度是正确的，但上下文使用默认维度

我在HTML页面的div中有一个canvas元素。我已经通过CSS将其宽度和高度设置为父div的100%，并且设置正确。 我定义了一个“draw”函数，我使用它如下：

。它是这样实现的：

function draw() {
    var cm = 6; // canvas margin

    var canvases = document.getElementsByClassName('container'); 
    for (var i=0; i<canvases.length; i++) {
        var c = canvases[i];
        var w = c.offsetWidth;
        var h = c.offsetHeight;

        console.log('w: ' + w + '; h: ' + h);

        var ctx = c.getContext("2d");
        ctx.beginPath();
        ctx.lineWidth = 2;
        ctx.strokeStyle = '#561a04';

        ctx.moveTo(cm, cm);
        ctx.lineTo(w-cm, cm);
        ctx.lineTo(w-cm, h-cm);
        ctx.lineTo(cm, h-cm);
        ctx.lineTo(cm, cm);

        ctx.stroke();
   }
}

函数绘图（）{
var cm=6；//画布边距
var canvasses=document.getElementsByClassName（'container'）；
对于（var i=0；i我已经使用canvas一段时间了，在css中将其设置为100%，而不是使用Javascript将其设置为100%

编辑：

我没有注意到你想将它设置为100%的家长div，这应该可以做到

请试试这个：

var canvas = document.getElementById("canvas");
canvas.width = canvas.parentElement.offsetWidth; //set canvas width to its parent width
canvas.height = canvas.parentElement.offsetHeight;//set canvas height to its parent height
var ctx = canvas.getContext("2d");

这将设置画布宽度和高度，以匹配其部分宽度和高度

请告诉我这是否解决了您的问题！
画布本身和画布元素都有宽度和高度，它们是独立的。如果它们不相同，画布的内容会自动缩放以适合元素。如果您想要1:1的关系，您需要设置
画布

紧接着：

var w = c.offsetWidth;
var h = c.offsetHeight;

加

例如：


函数绘图（）{
var cm=6；//画布边距
var canvasses=document.getElementsByClassName（'container'）；
for（var i=0；i显示画布的HTML。使用CSS设置宽度和高度会更改元素的宽度和高度，而不是上下文。使用
c.width
和
c.height
设置上下文。我怀疑您遇到了以下情况：
c.width = w;
c.height = h;