Creating a canvas element and setting its width and height attributes using jQuery

canvas, html, javascript, jquery

Solution

jQuery try to match each attribute name with a jQuery function name. Matched functions are called.

`width` and `height` are jQuery functions, so your original code is equivalent to this:

  var newCanvas = 
    $('<canvas/>',{'class':'radHuh'})
    .width(100)
    .height(100);

width(value) and height(value) functions set CSS width and height of an element.

Relevant jQuery source code line (https://github.com/jquery/jquery/blob/master/src/attributes.js#L308)

if ( pass && name in jQuery.attrFn ) {

`attrFn` object definition (https://github.com/jquery/jquery/blob/master/src/attributes.js#L288):

attrFn: {
    val: true,
    css: true,
    html: true,
    text: true,
    data: true,
    width: true,
    height: true,
    offset: true
},

Problem

I was just trying to do the following in jQuery: ``` var newCanvas = $('<canvas/>',{'width':100,'height':200,'class':'radHuh'}); $(body).append(newCanvas); ``` This is working (kind of) and generates the following markup: ``` <canvas style="width:100px; height:200px;" class="radHuh"></canvas> ``` As most of you might know `canvas` elements don't really like CSS dimensions but expect a width and height attribute, so this object creation failed for me. I do know I could just do: ``` var newCanvas = $('<canvas/>',{'class':'radHuh'}).attr({'width':100,'height':200}); ``` instead, but I was just wondering nonetheless if there is any way of telling jQuery that `width` and `height` should be treated as attributes when creating the element via `$('element',{attributes})` and not as CSS?

Original source