Javascript 使用外部css文件时画布图像大小错误

我正在使用HTML5画布元素。我正在使用以下javascript将图像绘制到画布中：

var img = new Image();
var canvas = this.e;
var ctx = canvas.getContext('2d');
img.src = options.imageSrc;
img.onload = function() {
    ctx.drawImage(img,0,0);
}

<canvas id="canvas" width="800" height="448"></canvas>

这个很好用。但是我遇到了一些奇怪的css问题。当我像下面这样使用内联css时，图像在画布中可以完美缩放：

var img = new Image();
var canvas = this.e;
var ctx = canvas.getContext('2d');
img.src = options.imageSrc;
img.onload = function() {
    ctx.drawImage(img,0,0);
}

<canvas id="canvas" width="800" height="448"></canvas>

当我使用内联css时，绘制的图像是否以某种方式继承了画布上的css？不确定这里发生了什么，但我想使用外部css文件

编辑 如果我没有为canvas元素提供样式，它会更小，但仍然只显示图像的上角。当我使用css文件进行样式设置时，画布会更大，但就好像它只是放大了图像一样。同样数量的图像显示出来，它现在只是更大

编辑2 根据收到的答案，我现在用javascript调整画布的dom大小。我将img.onload函数更改为以下内容：

img.onload = function() {
    if (options.imageWidth == 0 && options.imageHeight == 0) {
        canvas.height = this.height;
        canvas.width = this.width;
    } else {
        canvas.height = options.imageHeight;
        canvas.width = options.imageWidth;
    }
    ctx.drawImage(img,0,0);
}

---

试试推杆！对于外部样式来说，重要的一点可能是某些内容正在覆盖它，但内联内容将覆盖最后一个

#canvas {
    height:448px !important;
    width:800px !important;
    border:none !important;
}

---

试试推杆！对于外部样式来说，重要的一点可能是某些内容正在覆盖它，但内联内容将覆盖最后一个

#canvas {
    height:448px !important;
    width:800px !important;
    border:none !important;
}

---

画布有两种大小-实际像素网格大小（在

宽度

和

高度

属性中）和CSS大小

如果未指定像素大小，则通常默认为300x300

CSS大小仅指定页面中占用的空间量，默认为像素大小。如果它们不相等，则将缩放图像

必须在

元素中指定像素大小，或使用Javascript进行设置：

var img = new Image();
var canvas = this.e;
var ctx = canvas.getContext('2d');
img.src = options.imageSrc;
img.onload = function() {
    canvas.width = this.width;    // new code
    canvas.height = this.height;  //    "
    ctx.drawImage(img, 0, 0);
}

---

画布有两种大小-实际像素网格大小（在

宽度

和

高度

属性中）和CSS大小

如果未指定像素大小，则通常默认为300x300

CSS大小仅指定页面中占用的空间量，默认为像素大小。如果它们不相等，则将缩放图像

必须在

元素中指定像素大小，或使用Javascript进行设置：

var img = new Image();
var canvas = this.e;
var ctx = canvas.getContext('2d');
img.src = options.imageSrc;
img.onload = function() {
    canvas.width = this.width;    // new code
    canvas.height = this.height;  //    "
    ctx.drawImage(img, 0, 0);
}

---

检查外部css文件链接。。可能是外部css文件链接的输入错误。。可能是打字错误