CODEWITHSUNDEEP
htmlcanvas
Indiana Kernick
Indiana Kernick

Reputation: 5331

fillRect drawing wrong shape in HTML canvas

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 looks like this

it should look 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>

Upvotes: 3

Views: 2825

Answers (1)

Spencer Wieczorek
Spencer Wieczorek

Reputation: 21565

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).

Upvotes: 5

Related Questions