Q:

how to set size of canvas to its background image?

i have the following CSS code for the canvas object which i have 
canvas{
    border: solid black 2px;
    background:url("http://upload.wikimedia.org/wikipedia/en/a/aa/Bart_Simpson_200px.png");
    background-repeat:no-repeat;
    }

how do i make the size of the canvas equal to the size of that background image?

A:

If this is a single unchanging image, use the width and height properties in CSS. 
canvas{
    border: solid black 2px;
    background: url("http://upload.wikimedia.org/wikipedia/en/a/aa/Bart_Simpson_200px.png");
    background-repeat:no-repeat;
    width: 200px;
    height: 298px;
}

If this is a dynamic image, use JavaScript.
HTML:
<canvas id="canvas"><img src="dynamic_url" id="dynamic_img" /></canvas>

JS:
function resizeCanvas()
{
    var img = document.getElementById('dynamic_img'); 
    var width = img.clientWidth;
    var height = img.clientHeight;

    var canvas = document.getElementById('canvas'); 
    canvas.style.width = width;
    canvas.style.height = height;
}

