HTML5 Canvas 2d Context and Javascript Questions

[SinbadEV]

So, I've recently been playing around with the future of web technology and have been having trouble interpreting some of the available documentation on certain subjects... so, seeing as this forum seems to be populated with a ready supply of geeks I felt I could ask here (instead of on stack overflow where I have a reputation to maintain)

How do I save the current "drawing" on a canvas to a placeholder object... I'm making a board game and essentially I want to draw the "board", then draw the "pieces" and then draw draw the "available moves" and have them highlighted when the mouse is over them.

so:
Draw Board, Save in State 1
Draw Pieces on Board, Save in State 2
Draw the "locations you can move to" into state 3
Draw Each Path and Save them in an array of states

a list will be presented on the side where the user can select the path they wish to take, when they mouse over the button for the path it will restore state 3 and draw the correct path
after the player choses a move I would restore state 2 and then draw the new locations of the pieses and save to state 2 again
when the player rolls I would draw the locations you can move to and save to state 3... etc.

We used to call this "paging" but I don't know what to call it in HTML5 Canvas 2d Context terms so I'm not even sure what to search for.

there is a "save" and "restore" stack which I guess might save some redrawing but there's got to be some way to store a clip or something into a local object to use later.

EDIT: [Half Solved] Okay, it looks like I can use "image.src = canvas.toDataURL()" to store the canvases state to a PNG formatted image object and then use the "drawImage(image, 0, 0)" to draw it back, but this seems clumsy... it's what I'll use for now though.

[KaiserJ]

sounds to me like you're going the wrong way round

if you're drawing the board dynamically there should already be adequate arrays and data for you to reconstruct any of these other states without using expensive image copying

use something like z indexing to draw onto the 3 "state" images directly rather than saving/loading the whole thing three times

[SinbadEV]

OMG, I always forget how much stupid detail is involved with programming... I want to draw to a "non-existent" surface and then display the results... but I can't instantiate a canvas context without it being associated with an existing canvas element in the HTML page.. and the canvas element doesn't support the "collapse" state for visibility so it has to take up physical space... grr... I've resorted to using the following method:

save the context
clear the context
draw the stuff I want
export the drawing to the src property of an Image object
restore the context

due to the fact that it doesn't have a chance to show the user the drawing before it's restored this actually works... though I'd really just rather instantiate a canvas or context that doesn't actually render or take up space... I must just not be programming the way the W3 want me to.

[Pxtl]

Haven't played much with canvases myself, but I'm pretty sure that browser handle double-buffering for you and don't generally display the stuff you drew to the canvas until execution is complete, so you shouldn't need to double-buffer to avoid flicker.

I could be wrong, though.

[SinbadEV]

Haven't played much with canvases myself, but I'm pretty sure that browser handle double-buffering for you and don't generally display the stuff you drew to the canvas until execution is complete, so you shouldn't need to double-buffer to avoid flicker.

I could be wrong, though.

I'm only buffering because I'm using the active canvas element to draw something that I then want to redraw later

draw board
save board
draw stuff on board
draw board from saved board
draw different stuff on board
draw board from saved board
draw different stuff on board
draw board from saved board

now that I look at it, I don't need to do the save, erase, draw, restore thing for this particular application...

and if what you guys are telling me is correct I would be better off just running the "draw board" function from scratch every time instead running it once and then storing the result... I guess I'm used to real-time situations where drawing everything 60 times a second would slow things down.

[KaiserJ]

draw the board only once. use z-indexing to display a second, active layer with the stuff you want

there shouldn't be any need for image buffering at all with a turn-based boardgame, as the graphics only update when a piece is selected or a move is made

[Andrej]

We used to call this "paging" but I don't know what to call it in HTML5 Canvas 2d Context terms so I'm not even sure what to search for.

I think it's called offscreen rendering nowdays?
First google result: http://kaioa.com/node/103

Typical of html solved in 3 seconds then it takes 45 minute of screwing with Firebug plugin to make an example if javascript is the future the future sucks >.>
http://ideone.com/m13UU

Ok admittedly the only reason i posted is because this part

Okay, it looks like I can use "image.src = canvas.toDataURL()" to store the canvases state to a PNG formatted image object and then use the "drawImage(image, 0, 0)" to draw it back

reminds me of Leah's Epsilon-0.30 Clamping Star Algorithm (convert float->string->integer->string->float)

Page was taken down but luckily Anonymous post no. 4 has us covered http://dis.4chan.org/read/prog/1259501835/1-40

[SinbadEV]

We used to call this "paging" but I don't know what to call it in HTML5 Canvas 2d Context terms so I'm not even sure what to search for.

I think it's called offscreen rendering nowdays?
First google result: http://kaioa.com/node/103

That's exactly what I was looking for.

Also, thinking I should have included quotes around "the future"...

[SinbadEV]

On an Unrelated topic I have succeeded in installing a VirtualBox Ubuntu LAMP on my computer that I can connect to with browser, putty and sftp... my development environment is therefore functional... YAY!

[Forboding Angel]

ungh ./facepalm

WAMP

[SinbadEV]

ungh ./facepalm

WAMP

Isolating my build environment on a virtual server allows me to use this computer for other things without risking blowing it up or exposing it to evil.

[AF]

Such a risk, just imagine if we installed these things enmasse on humonguous arrays of machines, stacked in shelves, covering hundreds of thousands of sq meters in a single installation alone..

oh wait..

btw check out processing.js