Bug Tracker

Opened 6 years ago

Closed 6 years ago

Last modified 5 years ago

#10040 closed bug (duplicate)

.height/.width functions stretch canvas element

Reported by: temporaryacct20@… Owned by: temporaryacct20@…
Priority: low Milestone: None
Component: dimensions Version: 1.6.1
Keywords: Cc: dmethvin
Blocked by: Blocking:


When using the .height and .width function on a canvas element the element seems to be stretched as opposed to the actual width and height set for the element. I have included a simple html example below. In the first window the drawing in the canvas acts as expected. In the second window as the cursor moves from the 0,0 position the actual drawing point seems to move exponentially.

<html> <head><title>freedraw2</title> <style type="text/css"> canvas {border-style:dotted; border-width:1;cursor:url(pencil.cur),auto;} </style> <script type="text/javascript" src="jquery.js"></script> </head> <body> </body> </html> <script type="text/javascript"> var windowH = $(window).height(); var windowW = $(window).width(); var colorChoice = '#000000';

var canvasa = $('<canvas></canvas>').attr('id','canvasa'); canvasa.attr('class','canvas'); $('body').append(canvasa); canvasa.attr('width','500'); canvasa.attr('height','375');

var canvasb = $('<canvas></canvas>').attr('id','canvasb'); canvasb.attr('class','canvas'); $('body').append(canvasb); canvasb.width('500'); canvasb.height('375');

var somex = -1; var somey = -1; var isDown = false; jQuery(document).ready(function(){


var can = $(this).offset(); var a = e.pageX - can.left; var b = e.pageY - can.top; if (isDown){

canvas = document.getElementById($(this).attr('id')); context = canvas.getContext('2d'); context.beginPath(); context.moveTo(somex, somey); context.lineTo(a, b); context.strokeStyle = colorChoice; context.stroke(); somex = a;

somey = b;


}); $('.canvas').mousedown(function(e){

isDown = true; var can = $(this).offset();

somex = e.pageX - can.left;

somey = e.pageY - can.top;

}); $(document).mouseup(function(e){



}) </script>

Change History (7)

comment:1 Changed 6 years ago by addyosmani

Component: unfileddimensions
Owner: set to temporaryacct20@…
Priority: undecidedlow
Status: newpending

Hi. Could you put your test case on jsFiddle, please?

comment:2 Changed 6 years ago by temporaryacct20@…

Status: pendingnew

Pardon my ignorance. I did save the example to befuddled but as I don't have an account I don't have any way to reference it nor did I see any type of link that would point to the saved example. Is there something else I should do?

comment:3 Changed 6 years ago by temporaryacct20@…

I just put it on jsFiddle again. I now see the link, it just did not stick out that the url had changed slightly the first time. The example can be found here http://jsfiddle.net/Kp6Jd/

comment:4 Changed 6 years ago by dmethvin

Status: newpending

Sorry but the test case isn't making sense for me. Is the canvas supposed to be blank? It's hard to see if there is any stretching going on if that is the case.

comment:5 Changed 6 years ago by temporaryacct20@…

Status: pendingnew

Both canvases start out blank. If you draw in the top canvas it will act as expected. If you draw in the bottom canvas the line will not be drawn correctly.

comment:6 Changed 6 years ago by addyosmani

Cc: dmethvin added
Resolution: duplicate
Status: newclosed

So, I've spent some time reviewing this issue:

I can confirm that as temporaryacct20 mentions, the second canvas (which has its height set using width/height) appears to be actually stretching rather than just having its dimensions altered as per the .attr() example higher up in the code.

Reviewing our current documentation, I haven't been able to locate any known gotchas detailing the above, however I was able to find #10125 (http://bugs.jquery.com/ticket/10125). Here, timmywil, who was involved in the attributes rewrite for 1.6.x mentions that this is actually desired behaviour and .attr() should ideally be used rather than directly trying to set the width/height through .width()/.height() or .css('width',..)/.css('height',..).

For this reason I'll be closing this ticket as a duplicate of 10125, however if another member of the team feels we should look into this again, feel free to reopen.

comment:7 Changed 6 years ago by addyosmani

Duplicate of #10125.

Note: See TracTickets for help on using tickets.