Setting canvas width / height on creation

Question

So I'm attempting to create a canvas object in a jQueryUI widget that has a width and height specified by the user. Then fill that canvas with a gradient.

Doing it this way doesn't work, the width of the fillrect is much too narrow

this.canvas = $("<canvas/>", { width: this.options.width, height: this.options.height }).appendTo(this.element);

However doing it this way works

this.canvas = $("<canvas width=\""+ this.options.width + "\" height=\""+ this.options.height + "\"/>").appendTo(this.element);

What is the difference between the two methods?

+1 for pointing out the often overlooked `$("", {properties})` jQuery method. It is a little limited, but can be quite handy. — iCollect.it Ltd, May 27 '14 at 12:35

score 3 · Answer 1 · edited May 23 '17 at 12:05

3

In the second case, the width and height of the canvas element will be added as an attribute, which is the correct way to set canvas width and height.

In the first case, canvas width and height will be set as a css style. Setting the canvas width and height using css won't set the actual width and height of canvas element, it'll only give a zoomed effect of original canvas (This size won't be considered to perform the internal calculations).

check the following SO Question for more info...

edited May 23 '17 at 12:05

Community

1
1

answered May 27 '14 at 11:17

T J

42,762
13
83
138

So are you saying the first case is the same as saying this: this.canvas = $("").appendTo(this.element); – Tom Martin May 27 '14 at 11:22
@user3660362 any reason for accepting the late answer that actually didn't explain the difference between setting width and height as attribute and via css..? – T J May 27 '14 at 12:16
Don't be upset that I guessed what he actually wanted to do, rather than what he asked. Part of my day job is translating user requirements :) – iCollect.it Ltd May 27 '14 at 12:25
@TrueBlueAussie haha, no big deal for me, but his final question was **What is the difference between the two methods?** and i think this answer actually answered that, your answer provided a solution or work around for the way he likes to code. So actually i answered the question. Later you've edited your ans with the same info in my ans, which indicates that you agree with the above. – T J May 27 '14 at 13:02
Our answers are similar, but contain different information. I only spelled it out as you seemed to think there was not enough information to qualify as *the* answer. *Personally I thought my first line was sufficient to answer his question, as it was obvious to all that his second method was setting attributes, but hey, that's just my opinion.* :) – iCollect.it Ltd May 27 '14 at 13:39

iCollect.it Ltd · Accepted Answer · 2014-07-08T16:20:50.777

A quirk of $('<element/>', {properties}) is that height and width properties are applied as styles, not attributes.

You can probably do what you wanted with:

   $("<canvas/>").attr({ width: this.options.width, height: this.options.height }).appendTo(this.element);

JSFiddle: http://jsfiddle.net/TrueBlueAussie/LWB2Q/

In answer to your question actually asked, the first version applies properties as styles. This is limited to specific jQuery properties, for instance you cannot set {'background-color': 'green'} with it.

The second version sets height and width as attributes, which is what you needed, but the better way to do that is as shown in my example.

General advice: Concatenating strings for elements is always a bad idea (and best avoided).

Setting canvas width / height on creation

2 Answers2

JSFiddle: http://jsfiddle.net/TrueBlueAussie/LWB2Q/