Bug Tracker

Modify

Ticket #10040 (closed bug: duplicate)

Opened 3 years ago

Last modified 2 years ago

.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
Blocking: Blocked by:

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

$('.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>

Change History

comment:1 Changed 3 years ago by addyosmani

  • Owner set to temporaryacct20@…
  • Priority changed from undecided to low
  • Status changed from new to pending
  • Component changed from unfiled to dimensions

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

comment:2 Changed 3 years ago by temporaryacct20@…

  • Status changed from pending to 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?

comment:3 Changed 3 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 3 years ago by dmethvin

  • Status changed from new to 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.

comment:5 Changed 3 years ago by temporaryacct20@…

  • Status changed from pending to 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.

comment:6 Changed 3 years ago by addyosmani

  • Cc dmethvin added
  • Status changed from new to closed
  • Resolution set to duplicate

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 3 years ago by addyosmani

Duplicate of #10125.

Please follow the  bug reporting guidlines and use  jsFiddle when providing test cases and demonstrations instead of pasting the code in the ticket.

View

Add a comment

Modify Ticket

Action
as closed
Author


E-mail address and user name can be saved in the Preferences.

 
Note: See TracTickets for help on using tickets.