293239 - Canvas misdraws content using style.height

Status: RESOLVED WORKSFORME

(Core :: Graphics: Canvas2D, defect)

Description

[Peter van der Woude [:Peter6]]

Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.8b2) Gecko/20050506
Firefox/1.0+

1.open testcase
2.squares should have been drawn, i/o of rectangles

<canvas id="canvas" style="width:300px;height:300px;border:#000000 1px solid;">
<canvas id="canvas" style="width:300;height:300;border:#000000 1px solid;">
 both draw the right outline, but wrong contentsize (double height)

<canvas id="canvas" width="300" height="300" style="border:#000000 1px solid;">
 draws the right outline and right content

testcase coming

Comment 1

[Peter van der Woude [:Peter6]]

Attachment: testcase

Comment 2

[Vladimir Vukicevic [:vlad] [:vladv] (needinfo me, slow to respond)]

Works for me, but the behaviour of this recently changed -- what your testcase
will now show is a 300x150 canvas (the default size when no width/height
attributes are specified) scaled up to 300x300 for display (specified in the CSS).

Comment 3

[Anne (:annevk)]

I have the feeling this bug was filed before the initial checkin of bug 291216
which fixed some things with regard to this. I do see rectangles in the
testcase, but I'm not sure if that is bug. Could you make a more clear testcase
if you still think this is a bug?

Comment 4

[Peter van der Woude [:Peter6]]

Attachment: better testcase

in both canvas elements the initial height and width are set at 300px by 300px 

they are drawn quite different though

Comment 5

[Anne (:annevk)]

And that is correct. As 'height' in CSS != 'height' in HTML. In a fresh build
the 'height' of the rectangles in the canvas at the top should be twice the
height of rectangles in the canvas at the bottom.

Comment 6

[Anne (:annevk)]

Marking WORKSFORME based on comment 2, comment 3 and comment 5 using a tinderbox
build from today.

Comment 7

[Peter van der Woude [:Peter6]]

(In reply to comment #5)
> And that is correct. As 'height' in CSS != 'height' in HTML. In a fresh build
> the 'height' of the rectangles in the canvas at the top should be twice the
> height of rectangles in the canvas at the bottom.

Indeed, but this makes it very different from the <img> tag
offcourse there the size is set by the image itself and every deviation in CSS
or height="" causes it to rescale.
Wouldn't it be far more logical if the basic size of the <canvas> would be
determined in the script, not in the tag (as is the case with <img>).

e.g.
</style>
  <script type="application/x-javascript">
  function init() {

  canvasHeight='300px';
  canvasWidth='300px';

  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");

  ctx.fillStyle = "rgb(200,0,0)";
  ctx.fillRect (10, 10, 50, 50);

  ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
  ctx.fillRect (30, 30, 50, 50);

}

Comment 8

[Hixie (not reading bugmail)]

You can do that already, just use:

  canvas.height = 300;
  canvas.width = 300;

...instead.

Comment 9

[Peter van der Woude [:Peter6]]

(In reply to comment #8)
> You can do that already, just use:
> 
>   canvas.height = 300;
>   canvas.width = 300;
> 
> ...instead.
thanks a lot.

(In reply to comment #8)
> You can do that already, just use:
> 
>   canvas.height = 300;
>   canvas.width = 300;
> 
> ...instead.

yep, except that it scales the image