984692 - drawImage css width and height problem with drawing

Status: RESOLVED INCOMPLETE

(Core :: Graphics: Canvas2D, defect)

Description

[djhassan]

User Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:27.0) Gecko/20100101 Firefox/27.0 (Beta/Release)
Build ID: 20140218135856

Steps to reproduce:

create a canvas in your html file.
<canvas id="myCanvas"></canvas>

Specify a width and height for your canvas in css file.
#myCanvas{
position: fixed;
top: 5%;
left: 25%;
width: 800px;
height: 800px;
border: 1px solid black;
}

in javascript file load an image and draw it to the canvas' 

context.drawImage(img,0,0);


Actual results:

The image will be stretched beyond its original dimensions.


Expected results:

The image should have been drawn with its original dimensions. 

To fix this problem I removed the width and height from the canvas' css element. 

I also modified the html canvas line to be

<canvas id="myCanvas" height="800"; width="800";></canvas>

Comment 1

[djhassan]

(In reply to djhassan from comment #0)
> User Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:27.0) Gecko/20100101
> Firefox/27.0 (Beta/Release)
> Build ID: 20140218135856
> 
> Steps to reproduce:
> 
> create a canvas in your html file.
> <canvas id="myCanvas"></canvas>
> 
> Specify a width and height for your canvas in css file.
> #myCanvas{
> position: fixed;
> top: 5%;
> left: 25%;
> width: 800px;
> height: 800px;
> border: 1px solid black;
> }
> 
> in javascript file load an image and draw it to the canvas' 
> 
> context.drawImage(img,0,0);
> 
> 
> Actual results:
> 
> The image will be stretched beyond its original dimensions.
> 
> 
> Expected results:
> 
> The image should have been drawn with its original dimensions. 
> 
> To fix this problem I removed the width and height from the canvas' css
> element. 
> 
> I also modified the html canvas line to be
> 
> <canvas id="myCanvas" height="800" width="800"></canvas>

Comment 2

[u279076]

Can you still reproduce this?

Comment 3

[Liviu Cirdei]

Testcase:

1. When "width" and "height" for the canvas are placed in css file: http://jsbin.com/xidigog/3/edit?html,css,js,output

2. When "width" and "height" are in html canvas line: http://jsbin.com/xokite/edit?html,css,js,output

I noticed this is not reproducible only on Firefox, Chrome does the same. Also this seems to be a know behavior of the canvas. Please see: http://stackoverflow.com/questions/2588181/canvas-is-stretched-when-using-css-but-normal-with-width-height-properties where you can notice that "...width and height attributes determine the width or height of the canvas's coordinate system, whereas the CSS properties just determine the size of the box in which it will be shown."

So, considering this, maybe the bug should be closed as Invalid, but I will wait for a second opinion before doing that.

Comment 4

[Firefox Bug Husbandry Bot]

2019-03-06

This bug is part of a group of bugs which have had an open needinfo for at least 12 weeks.

The request for information has not been answered, and we can't move forward on the bug so we are closing it.

If the defect is still present, please reopen this bug with an updated report.