www.webdeveloper.com
Results 1 to 3 of 3

Thread: Canvas problem

Hybrid View

  1. #1
    Join Date
    Jan 2009
    Posts
    4

    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

    Thx in advance!!

  2. #2
    Join Date
    Jan 2009
    Posts
    4
    Solved!

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

  3. #3
    Join Date
    May 2009
    Posts
    150
    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

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles