fillRect 在 HTML canvas 中绘制了错误的形状

Question

我在我的 chrome 应用程序中使用 html canvas 元素，但 fillRect 不起作用。它打印出一个实心矩形，但不正确。

我这样做了：

var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(20, 20, 150, 100);

但看起来像这样：

它应该是这样的

这是什么问题？

CSS?

#canvas {
  width: 896px;
  height: 896px;
  background-image: url('assets/underlays/transUnderlay_28.png');
}

HTML?

<td>
  <div id='canvasWrapper'>
    <canvas id='canvas'></canvas>
  </div>
</td>

Answer 1

在除 CSS 之外的 <canvas> 元素中添加 height 和 width:

<td>
  <div id='canvasWrapper'>
    <canvas id='canvas' width='896' height='896' ></canvas>
  </div>
</td>

对于 HTML 5 canvas，width 和 height 属性用于为 canvas 设置实际的 width/height坐标系，而正常的 CSS width 和 height 只是元素的大小（不考虑元素坐标系）。

fillRect drawing wrong shape in HTML canvas