How To Scale Canvas?

[SiDChik]

Hello. I'm creating online-map like google-map with zoom function. So
I put images to canvas by drawImage and then i'm changing width and
height of canvas. It's works at Opera, FF, Safari, Chrome.. But no
IE...

For drawImage i'm using images from some DIV... So Can you help me?
How can I scale canvas created by images from DIV more than 1 time
(for animation)?

P.S. If I load images every animations step, I see blinks of window
(loading of images)...

[楊秉桓]

Can you post your code? If you use drawImage funcion, below is this function's arguments

drawImage(img, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight)

2008/11/24 SiDChik <sid...@gmail.com>

[SiDChik]

> Can you post your code? If you use drawImage funcion, below is this
> function's arguments

//Put Images To Canvas
//P.S imgs - is global array of img - objects

function tocanvas()
{
var canv = document.getElementById('canv');
canv.width=256*5;
canv.style.width=256*5+'px';
canv.height=256*5;
canv.style.height=256*5+'px';

ctx = canv.getContext("2d");
for (var e = 1; e<=5;e++)
{
for (var i = 1; i<=5;i++)
{
ctx.drawImage(imgs[e][i],(i-1)*256,(e-1)*256);
}
}
}


//AnimStep, something like this:
function anim_canv()
{
var canv = document.getElementById('canv');

//New Size
canv.style.width=300+'px';
canv.style.height=300+'px';

/* or JQuery
$(canv).animate({'width':'300px', 'height':'300px'},200);
*/
}

Now I'm using just DIV.... And change each image position and size...
So it's slower than I Change just only one canvas...

[楊秉桓]

It doesn't work to resize canvas's hight and width, if you drawImage in it.

drawImage function has another arguments : destX, destY, destWidth, destHeight

it means you can deside destinated width and height.

by the way, images randered by div and canvas will overlaied on top of this map div in general.

DrawImage by canvas is useless and slow , except you want do anything with canvas.

2008/11/24 SiDChik <sid...@gmail.com>