Canvas problem

Hiya,

I'm trying to make a proof-of-concept for an vista/windows 7 style aero effect on a webpage using DHTML.

So far, it's looking like it will work in the end. However, i find canvas to behave strangely... In short this is how i'm trying to get it to work (for now):

I have a body with a background-image, and in it a div-element with some text in it. It is impossible to assign a canvas as a background, so i wrap the div in another div and then create a canvas that i position behind the other div absolutely.

So far so good, but now i want to draw the same image in my canvas as the body has for a background, and it for some reason resizes my image.

here's my jscode:
$(document).ready(function() {
var img = new Image();
img.src="resources/images/BackgroundImage.jpg";
var wrapperdiv = document.createElement("div");
wrapperdiv.style.position = "relative";
wrapperdiv.setAttribute("width", $(".aero").width());
wrapperdiv.setAttribute("height", $(".aero").height());
$(".aero").wrap(wrapperdiv);
var aerocanvas = document.createElement("CANVAS");
aerocanvas.style.position="absolute";
aerocanvas.style.top=0;
aerocanvas.style.left=0;
aerocanvas.style.zIndex = -1;
aerocanvas.className = "aerocanvas";
aerocanvas.setAttribute("width", img.width);
aerocanvas.setAttribute("height", img.height);
alert(img.width+","+img.height);
var ctx = aerocanvas.getContext('2d');
img.onload = function(){
ctx.drawImage(img,0,0,imgw, imgh);
alert(imgh);
Pixastic.process(img, "blurfast", {amount:1});
}
aerocanvas.setAttribute("width", $(".aero").width())
aerocanvas.setAttribute("height", $(".aero").height())
img.setAttribute("width", $(".aero").width())
img.setAttribute("height", $(".aero").height())
img.style.position="absolute";
img.style.top=0;
img.style.left=0;
img.style.zIndex = -1;
$(".aero").after(img);

})


i'm using Jquery ease of coding and Pixastic for the blur effect.

Does anyone know a solution for this?

Sorry if this was a lot of text for such a simple question :rolleyes:

Thx in advance!!

Solved!

It turned out Pixastic was just behaving in a diffrent way than i expected it to.

This isn't exactly what you wanted, but you may be interested in it anyway:

http://meyerweb.com/eric/css/edge/co...al/glassy.html