save/restore screen area

Discussion in 'Javascript' started by MartinRinehart@gmail.com, Oct 22, 2008.

  1. Guest

    I'm making a slider widget with a <canvas>.

    First I draw the background. I'd like to save this drawing. Something
    like:
    slider.drawBackground();
    slider.back = new ScreenArea( left, top, width, height );

    Next, draw the pointer. When the user slides the slider, I'd like to
    restore the saved background and then redraw the pointer. Any way of
    doing this directly? Something like:
    slider.back.restore();
    slider.drawPointer();

    I've been playing with indirection: using context.toDataURL() (after
    drawing the background) but I haven't found a way to take that string
    and use it to construct an Image object. What I want is:
    slider.back = new Image( context.toDataURL() ); // in my dreams!

    Or maybe:
    slider.back = new Image( wid, hgt );
    slider.back.src = context.toDataURL(); // still dreaming
     
    , Oct 22, 2008
    #1
    1. Advertising

  2. David Mark Guest

    On Oct 22, 1:12 pm, wrote:
    > I'm making a slider widget with a <canvas>.
    >


    Why?
     
    David Mark, Oct 22, 2008
    #2
    1. Advertising

  3. Jorge Guest

    On Oct 22, 7:12 pm, wrote:
    > (...)
    > I've been playing with indirection: using context.toDataURL() (after
    > drawing the background) but I haven't found a way to take that string
    > and use it to construct an Image object. What I want is:
    > slider.back = new Image( context.toDataURL() ); // in my dreams!
    >
    > Or maybe:
    > slider.back = new Image( wid, hgt );
    > slider.back.src = context.toDataURL(); // still dreaming


    var img= document.createElement('img');
    img.src= context.toDataURL();

    --
    Jorge.
     
    Jorge, Oct 23, 2008
    #3
  4. Guest

    David Mark wrote:
    > On Oct 22, 1:12�pm, wrote:
    > > I'm making a slider widget with a <canvas>.
    > >

    >
    > Why?


    Because I need a slider for my color chooser which I'm writing after
    asking my very smart friend Mr. Google about JS color choosers. He led
    me to many. But when I said "I want to be able to pick a color by
    clicking in a color wash, by supplying RGB values, by entering hex or
    by picking from a palette of recent choices, Mr. Google told me I was
    on my own.
     
    , Oct 23, 2008
    #4
  5. Guest

    Jorge wrote:
    > var img= document.createElement('img');
    > img.src= context.toDataURL();


    Thank you!

    Any reason why this works but 'new Image()' doesn't?
     
    , Oct 23, 2008
    #5
  6. Jorge Guest

    On Oct 23, 3:29 pm, wrote:
    > Jorge wrote:
    > > var img= document.createElement('img');
    > > img.src= context.toDataURL();

    >
    > Thank you!
    >
    > Any reason why this works but 'new Image()' doesn't?


    No idea. I didn't know that new Image() existed. What other tags have
    a constructor ?

    --
    Jorge.
     
    Jorge, Oct 23, 2008
    #6
  7. Guest

    Still not working. Here I've got a second 'test' canvas. Attempt to
    save image and redraw in the test area. Code:

    var img = document.createElement( 'img' );
    img.src = slider.canvas.toDataURL( 'image/png' );
    alert( img.src.length )
    var t = document.getElementById( 'test' );
    var pen2 = t.getContext( '2d' );
    pen2.drawImage( img, 0, 0 );

    This is called after painting the background from <body> onload(). The
    alert() gives different results (from a low around 250 to a high over
    10,000).

    P.S. WORKING! I have no clue why. Trivial change, looks functionally
    identical.

    var img = document.createElement( 'img' );
    var str = slider.canvas.toDataURL( 'image/png' );
    alert( str.length )
    img.src = str;
    var t = document.getElementById( 'test' );
    var pen2 = t.getContext( '2d' );
    pen2.drawImage( img, 0, 0 );

    The alert gives different results, but in the 300 to 315 range.
     
    , Oct 23, 2008
    #7
  8. Guest

    Jorge wrote:
    > No idea. I didn't know that new Image() existed. What other tags have
    > a constructor ?


    Since 'document.createElement()' works and 'new Image()' doesn't, I'm
    going to pretend the former is the real constructor.
     
    , Oct 23, 2008
    #8
  9. sasuke Guest

    On Oct 23, 8:05 pm, wrote:
    > Jorge wrote:
    > > No idea. I didn't know that new Image() existed. What other tags have
    > > a constructor ?

    >
    > Since 'document.createElement()' works and 'new Image()' doesn't, I'm
    > going to pretend the former is the real constructor.


    document.createElement('img') way of creating an image object is a
    part of the DOM specification; new Image() isn't. The valid
    invocations of the Image constructor are:
    var i = new Image();
    i.src = 'images/ah.png';

    var i = new Image(250 /*width*/, 250 /*height*/);
    i.src = 'images/ah.png';

    /sasuke
     
    sasuke, Oct 24, 2008
    #9
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Reinhard Vornholt

    Save Viewstate in DB and restore it later

    Reinhard Vornholt, Jul 30, 2003, in forum: ASP .Net
    Replies:
    0
    Views:
    517
    Reinhard Vornholt
    Jul 30, 2003
  2. 1388-2/HB
    Replies:
    0
    Views:
    367
    1388-2/HB
    Mar 1, 2007
  3. Carl K

    attribute save restore

    Carl K, Apr 13, 2007, in forum: Python
    Replies:
    4
    Views:
    282
    Bruno Desthuilliers
    Apr 13, 2007
  4. kj

    How to save/restore the call stack?

    kj, May 26, 2009, in forum: C Programming
    Replies:
    8
    Views:
    1,212
    Dik T. Winter
    Jun 2, 2009
  5. Nicolae Fieraru
    Replies:
    5
    Views:
    169
    frizzle
    Mar 5, 2005
Loading...

Share This Page