CODEWITHSUNDEEP
javascriptjquerycanvashtml
m90
m90

Reputation: 11822

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

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?

Upvotes: 32

Views: 56843

Answers (6)

adeneo
adeneo

Reputation: 318182

It seem like changing the case of any letter will prevent jQuery from converting the attribute to a style, so ranganadh probably stumbled on to some unintended flaw in jQuery where it checks the attribute against styles, but not case-insensitive.

This for instance seems to work aswell ??

var newCanvas = $('<canvas/>', {heiGht: 200, widtH: 100});
$('body').append(newCanvas);​​​

The native JS attributes are not converted to styles, and I'd probably go with the below solution to make sure it's "future proof" ( setAttribute() seems to work fine aswell ) :

var newCanvas = $('<canvas/>');
    newCanvas[0].height = 200;
    newCanvas[0].width = 100;

$('body').append(newCanvas);​​​

Upvotes: 8

elaid
elaid

Reputation: 351

I found that this worked the best:

$('<canvas height="50px" width="50px"/>')

You can also add id, class, or other attributes this way. Because it is not in the style="" attribute, it does not count as CSS and mess up your shapes.

Upvotes: 1

Mahn
Mahn

Reputation: 16585

Edit: This is slower, see comments below.

This will likely be faster than any workaround posted here:

var attributes = {width: 100, height: 100, class: "whatever"};
$('<canvas width="'+attributes.width+'" height="'+attributes.height+'" class="'+attributes.class+'""></canvas>').appendTo(document.body);

Slightly less fancier, but it's esentially the same with less function calls.

Upvotes: 0

thecodeparadox
thecodeparadox

Reputation: 87073

var newCanvas = $('<canvas/>',{
                   'class':'radHuh',
                    id: 'myCanvas'                   
                }).prop({
                    width: 200,
                    height: 200
                });
$('#canvas').append(newCanvas);

Proof

Upvotes: 31

Juan Mellado
Juan Mellado

Reputation: 15113

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
},

Upvotes: 33

Ranganadh Paramkusam
Ranganadh Paramkusam

Reputation: 4358

You can use like this

$('<canvas/>',{'class':'radHuh','Width':100,'Height':200});

Change the case and try

Upvotes: 10

Related Questions