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

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


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


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

Proof


You can use like this

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

Change the case and try