By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,851 Members | 1,095 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,851 IT Pros & Developers. It's quick & easy.

save/restore screen area

P: n/a
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 '08 #1
Share this Question
Share on Google+
8 Replies


P: n/a
On Oct 22, 1:12*pm, MartinRineh...@gmail.com wrote:
I'm making a slider widget with a <canvas>.
Why?
Oct 22 '08 #2

P: n/a
On Oct 22, 7:12 pm, MartinRineh...@gmail.com 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.
Oct 23 '08 #3

P: n/a
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.
Oct 23 '08 #4

P: n/a

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 '08 #5

P: n/a
On Oct 23, 3:29*pm, MartinRineh...@gmail.com 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.
Oct 23 '08 #6

P: n/a
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 <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.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 '08 #7

P: n/a
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 '08 #8

P: n/a
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.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
Oct 24 '08 #9

This discussion thread is closed

Replies have been disabled for this discussion.