Closed Bug 293239 Opened 15 years ago Closed 15 years ago

Canvas misdraws content using style.height

Categories

(Core :: Canvas: 2D, defect, major)

x86
Windows 2000
defect
Not set
major

Tracking

()

RESOLVED WORKSFORME

People

(Reporter: Peter6, Unassigned)

Details

(Keywords: testcase)

Attachments

(2 files)

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
Attached file testcase
Summary: Canvas misdraws content using style.height → Canvas misdraws content using style.height
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).
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?
Attached file better testcase
in both canvas elements the initial height and width are set at 300px by 300px 

they are drawn quite different though
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.
Marking WORKSFORME based on comment 2, comment 3 and comment 5 using a tinderbox
build from today.
Status: NEW → RESOLVED
Closed: 15 years ago
Resolution: --- → WORKSFORME
(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);

}
You can do that already, just use:

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

...instead.
(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
You need to log in before you can comment on or make changes to this bug.