Fail on setting attribute for canvas from Javascript

Question

Hi all, I have to set the attributes 'width' and 'height' for a canvas element, depending on the available screen resolution. Setting them statically from html works (ex. <canvas id="canv" width="1600" ... ). From Javascript I can't do it. I've googled and searched in SO but I didn't find anything that works. I am using JQuery and I've tried unsuccessfully the following (the same for height attribute)

$('#canv').setAttribute('width',screen.availWidth);
$('#canv').attr('width',screen.availWidth);
$('#canv').data('width',screen.availWidth);
$('#canv').width = screen.availWidth;
$('#canv').css('width',screen.availWidth);

I did the same putting var cv = $('#canv')[0].getContext("2d"); and changing $('#canv') with cv but with no result.

bb

Answer 1

You can do it like this, but I'm not sure if the screen size is what you're after:

$('#canv').width(screen.availWidth);​

You can see a demo here

Answer 2

I changed the code on jsfiddle.net/pUcjV/2 to

$('#canv').attr("width", screen.availWidth);    
$('#canv').attr("height", screen.availHeight);  
circlesBG (cv, col, screen.availWidth, screen.availHeight);

from

circlesBG (cv, col, screen.availWidth, screen.availHeight);
$('#canv').width(screen.availWidth);    
$('#canv').height(screen.availHeight);    

This produced stars over the whole canvas. Is this the desired result? I'm using Chrome 5.0.375.99.