Make Html5 Canvas and its containing image susceptible in browsers

Question

I have a canvas object in which I want to put an image for a web application. I can upload an image, but I ran into two problems: the image will not stretch to the canvas, and the canvas will not stretch to cover the entire div in any browser other than 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 make the canvas responsive? Or do I just need to lock the canvas and image to predefined sizes?

Answer 1

widthand heightimages are read-only, so they won’t work.

Try instead:

 context.drawImage(image, 0, 0, canvas.width, canvas.height);

, , ( , btw). image.)

Answer 2

<canvas id="imageView" width="1000" height="1000" style="width:100%; height:100%"></canvas>

CSS . CSS , , . , .

, 10 1, , .

<canvas id="imageView" width="1000" height="1000" style="width:100px; height:100px"></canvas>

CSS , width height canvas.