在HTML画布中，fillRect绘制的形状不正确

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>

- Indiana Kernick

---

你希望看到什么？ - Steven Hansen

Answer 1

在<canvas>元素中添加height和width，而不是在CSS中添加：

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

对于 HTML 5 画布，width 和 height 属性用于设置画布坐标系的实际宽度/高度，而普通的 CSS width 和 height 只是元素的大小（不考虑元素坐标系）。

- Spencer Wieczorek