jQuery and JS equivalent functions produce different results

Question

I have the following cropper app:

        var canvas = $('#selector')[0]
        //works
        **canvas.width=image.width
        canvas.height=image.height**

        //doesn't work
        **//$(canvas).width($(image).width())
        //$(canvas).height($(image).height())**
        //both seem to do the exact same thing






        $('#selector').css('left','30px')

        var ctx = $('#selector')[0].getContext("2d");
        ctx.fillStyle="rgba(210,220,255,0.6)";

        var cropinit=false;




         //the cropped section will not be resizeable after the user finishes, but the user can create a new cropped section
        canvas.addEventListener("mousedown", function setP1(event) {
            //allows you to find the height and width by imagining a rectangle around it
            //get bounding selector parameters
            var selector_position = $('#selector').position()
            xOff=selector_position.left
            yOff=selector_position.top
            console.log(xOff)
            console.log(yOff)

            p1=[event.clientX-xOff, event.clientY-yOff];
            ctx.fillRect(80,54,40,40)
            console.log(p1)
            cropinit=true;
        });
        //so that if the user releases the mouse after it leaves the canvas, the crop completes
        canvas.addEventListener("mouseleave", function() {
            cropinit=false;
        });
        canvas.addEventListener("mousemove", function drawBox(event) {
            if (cropinit) {
                p2=[event.clientX-xOff, event.clientY-yOff]
                setBox();
                ctx.clearRect(0,0,canvas.width,canvas.height);
                ctx.fillRect(corner[0],corner[1],boxW,boxH);

                //console.log(p2)
                //console.log(corner[0]+" "+corner[1]+" "+boxW+" "+boxH);
            }
        });
        canvas.addEventListener("mouseup", function finishBox(event) {
            p2=[event.clientX-xOff, event.clientY-yOff];
            setBox();
            ctx.clearRect(0,0,canvas.width,canvas.height);
            ctx.fillRect(corner[0],corner[1],boxW,boxH);

            cropinit=false;

        });

The code works when I use the normal JavaScript code for setting the canvas width and height in **. However, when I use jQuery to set the width and height in the ** with comments. The rectangle is not drawn at the start and ending point of the user's mouse. The jQuery and normal JS version seem to produce the same canvas width and height, yet the rectangle is drawn in different places. They seem to do the exact same thing. What is the difference?

Image is loaded by another function through that images.src. — dylan7, Nov 02 '15 at 03:26
also you are very loose with your use of `;`, consider being a little more strict. I'd hate to see what happens when you minify — vol7ron, Nov 02 '15 at 03:31
You should show an example. Also see Yielder's answer. If he's correct, you should use `$(canvas).prop('width', )` (or pass it an object if also setting height. — vol7ron, Nov 02 '15 at 03:38

score 0 · Accepted Answer · edited May 23 '17 at 10:27

JavaScript element.width and jQuery width() are not equivalent.

element.width changes HTML attribute.
element.style.width changes CSS style value.
jQuery width() changes CSS style value, and is equivalent to the previous one.

Talking about canvas, its width and height attributes define an actual drawing size. At the same time, width and height CSS properties control the scale of image.

Note further that the height and width are the logical canvas dimensions used for drawing and are different from the style.height and style.width CSS attributes. If you don't set the CSS attributes, the intrinsic size of the canvas will be used as its display size; if you do set the CSS attributes, and they differ from the canvas dimensions, your content will be scaled in the browser.

There is a good Stackoverflow article, explaining the meaning of width and height of canvas with examples.

jQuery width() result

So, as I said, jQuery width() function changes the inline style of an object.

$("canvas").width(500).height(400);

document.body.innerText = document.getElementsByTagName("canvas")[0].outerHTML;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas></canvas>

element.width result

However, every item in this jQuery array is a DOM element:

var canvas = $("#selector")[0]; // HTML element object
canvas.width = 500; // changing the HTML element object's properties

When you change height and width properties of canvas, it actually changes its attributes:

document.getElementsByTagName("canvas")[0].width = 500;
document.getElementsByTagName("canvas")[0].height = 400;

document.body.innerText = document.getElementsByTagName("canvas")[0].outerHTML;

<canvas></canvas>

Conclusion

So, in case of canvas, you need to change HTML attributes, but not style rules, and jQuery width() and height() functions are just not suitable for this.
At the same time, you can use jQuery in the following way:

$("canvas").prop({"height": 500, "width": 400});

However, it will do absolutely the same as your pure JS code.

If you add that changing the element style width and height sets the pixel dimensions (resolution) of the canvas I will upvote as it is a good answer but lacking that important info — Blindman67, Nov 02 '15 at 04:22
Is there any benefit to the jquery way over the regular js way or benefit to jquery at all? — dylan7, Nov 02 '15 at 04:27

jQuery and JS equivalent functions produce different results

1 Answers1

jQuery width() result

element.width result

Conclusion