fillRect在HTML画布中绘制错误的形状

Question

我canvas在Chrome应用中使用了html 元素，但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以外的元素中添加height和：width<canvas>

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

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