#10040 closed bug (duplicate)

Opened August 12, 2011 09:01PM UTC

Closed September 04, 2011 07:58PM UTC

Last modified March 14, 2012 08:52AM UTC

.height/.width functions stretch canvas element

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

Description

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>

canvas {border-style:dotted; border-width:1;cursor:url(pencil.cur),auto;}

</style>

</head>

<body>

</body>

</html>

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(){

$('.canvas').mousemove(function(e){

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

isDown=false;

});

})

</script>

Attachments (0)

Change History (7)

Changed August 16, 2011 05:24AM UTC by addyosmani comment:1

component:	unfiled → dimensions
owner:	→ temporaryacct20@yahoo.com
priority:	undecided → low
status:	new → pending

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

Changed August 16, 2011 05:56PM UTC by temporaryacct20@yahoo.com comment:2

status:	pending → new

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?

Changed August 16, 2011 06:05PM UTC by temporaryacct20@yahoo.com comment:3

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/

Changed August 27, 2011 08:26PM UTC by dmethvin comment:4

status:	new → pending

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.

Changed September 02, 2011 12:06AM UTC by temporaryacct20@yahoo.com comment:5

status:	pending → new

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.

Changed September 04, 2011 07:58PM UTC by addyosmani comment:6

cc:	→ dmethvin
resolution:	→ duplicate
status:	new → closed

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.

Changed September 04, 2011 07:58PM UTC by addyosmani comment:7

Duplicate of #10125.

Side navigation