I have a canvas object that I want to put an image in for a web application. I can get the image loaded, but I've run into 2 problems: The image won't stretch to the canvas, and the canvas won't stretch to cover the entire div in any browser but Firefox.

http://jsfiddle.net/LFJ59/1/

var canvas = $(#imageView);

var context = canvas.get(0).getContext(2d);



$(document).ready(drawImage());

$(window).resize(refreshCanvas());



refreshCanvas();



function refreshCanvas() {

    //canvas/context resize

    canvas.attr(width, $(window).get(0).innerWidth / 2);

    canvas.attr(height, $(window).get(0).innerHeight / 2);

    drawImage();

};



function drawImage() {

    //shadow

    context.shadowBlur = 20;

    context.shadowColor = rgb(0,0,0);



    //image

    var image = new Image();

    image.src = http://www.netstate.com/states/maps/images/ca_outline.gif;

    $(image).load(function () {

        image.height = canvas.height();

        image.width = canvas.width();

        context.drawImage(image);

    });

};

Is there a solution to making the canvas responsive? Or do I just need to lock the canvas and image down to predefined sizes?