Can you combine multiple images into a single one using JavaScript? -

i wondering if there way combine multiple images single image using javascript. canvas able do. effect can done positing, can combine them single image download?

update oct 1, 2008:

thanks advice, helping work on js/css site, jquery , looking have macos dock-like image effects multiple images overlay each other. solution came absolute positioning, , using effect on parent <div> relatively positioned. have been easier combine images , create effect on single image.

it got me thinking online image editors picnik , wondering if there browser based image editor photoshop capabilities written in javascript. guess not possibility, maybe in future?

i know old question , op found workaround solution, work if images , canvas part of html page.

<img id="img1" src="imgfile1.png"> <img id="img2" src="imgfile2.png"> <canvas id="canvas"></canvas>  <script type="text/javascript"> var img1 = document.getelementbyid('img1'); var img2 = document.getelementbyid('img2'); var canvas = document.getelementbyid('canvas'); var context = canvas.getcontext('2d');  canvas.width = img1.width; canvas.height = img1.height;  context.globalalpha = 1.0; context.drawimage(img1, 0, 0); context.globalalpha = 0.5; //remove if pngs have alpha context.drawimage(img2, 0, 0); </script> 

or, if want load images on fly:

<canvas id="canvas"></canvas> <script type="text/javascript"> var canvas = document.getelementbyid('canvas'); var context = canvas.getcontext('2d'); image img1 = new image(); image img2 = new image();  img1.onload = function() {     canvas.width = img1.width;     canvas.height = img1.height;     img2.src = 'imgfile2.png'; }; img2.onload = function() {     context.globalalpha = 1.0;     context.drawimage(img1, 0, 0);     context.globalalpha = 0.5; //remove if pngs have alpha     context.drawimage(img2, 0, 0); };          img1.src = 'imgfile1.png'; </script>