save/restore screen area

[MartinRinehart]

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

First I draw the background. I'd like to save this drawing. Something
like:
slider.drawBack ground();
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.res tore();
slider.drawPoin ter();

I've been playing with indirection: using context.toDataU RL() (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.toDataU RL() ); // in my dreams!

Or maybe:
slider.back = new Image( wid, hgt );
slider.back.src = context.toDataU RL(); // still dreaming

[David Mark]

On Oct 22, 1:12*pm, MartinRineh...@ gmail.com wrote:

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

Why?

[Jorge]

On Oct 22, 7:12 pm, MartinRineh...@ gmail.com wrote:

(...)
I've been playing with indirection: using context.toDataU RL() (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.toDataU RL() ); // in my dreams!

Or maybe:
slider.back = new Image( wid, hgt );
slider.back.src = context.toDataU RL(); // still dreaming

var img= document.create Element('img');
img.src= context.toDataU RL();

--
Jorge.

[MartinRinehart]

David Mark wrote:

On Oct 22, 1:12�pm, MartinRineh...@ gmail.com 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.

[MartinRinehart]

Jorge wrote:

var img= document.create Element('img');
img.src= context.toDataU RL();

Thank you!

Any reason why this works but 'new Image()' doesn't?

[Jorge]

On Oct 23, 3:29*pm, MartinRineh...@ gmail.com wrote:

Jorge wrote:

var img= document.create Element('img');
img.src= context.toDataU RL();

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.

[MartinRinehart]

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.create Element( 'img' );
img.src = slider.canvas.t oDataURL( 'image/png' );
alert( img.src.length )
var t = document.getEle mentById( 'test' );
var pen2 = t.getContext( '2d' );
pen2.drawImage( img, 0, 0 );

This is called after painting the background from <bodyonload() . 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.create Element( 'img' );
var str = slider.canvas.t oDataURL( 'image/png' );
alert( str.length )
img.src = str;
var t = document.getEle mentById( 'test' );
var pen2 = t.getContext( '2d' );
pen2.drawImage( img, 0, 0 );

The alert gives different results, but in the 300 to 315 range.

[MartinRinehart]

Jorge wrote:

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

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

[sasuke]

On Oct 23, 8:05*pm, MartinRineh...@ gmail.com wrote:

Jorge wrote:

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

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

document.create Element('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