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?
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;
}
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments