fillRect drawing wrong shape in HTML canvas

canvas, html

Solution

Add the `height` and `width` in the `<canvas>` element other than in the CSS:

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

For the HTML 5 canvas the `width` and `height` attributes are for setting the actual width/height for the canvas's coordinate system, while the normal CSS `width` and `height` as just the size of the element (not respect to the elements coordinate system).

Problem

I'm using a html `canvas` element in my chrome app but `fillRect` won't work. It prints a solid rectangle but incorrectly. I did this: ``` var c = document.getElementById("canvas"); var ctx = c.getContext("2d"); ctx.fillStyle = "#FF0000"; ctx.fillRect(20, 20, 150, 100); ``` but it looks like this: it should look like this What kind of problem is this? 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> ```

Original source