How to do this?

angelali · 11-23-2012, 08:43 PM

I posted some questions related to HTML 5 Canvas since yesterday. And it seems when you write a text on a canvas, you cannot edit it to write another one as it is pixel based. To edit the tex, you have to cleasr the canvas as a whole and begin again.

I found this website:

http://yugico.com/yugioh-card-creator

When you write on the textbox, and click "Preview", the text appears on the image, good! When you edit the same text in the textbox, it also edits it on the image.

Can you tell me how it is working? If you do this on HTML5 Canvas, the text will not be cleared if you want to clear, nor will be edited if you wan to edit.

Thank!

Old Pedant · 11-23-2012, 09:23 PM

They aren't using Canvas, at ll.

They are creating an *IMAGE* ON THE SERVER and then all you see in the Preview is the image.

So it's completely irrelevant to HTML 5.

**********

But you could do the same thing they are doing, just using Canvas instead of a server-side image:

They simply *REMEMBER* all the components of the card and any time you make a change to any component, they RE-CREATE THE ENTIRE IMAGE from scratch.

So, with JS and Canvas, you would need to *REMEMBER* all the steps you took in JS coding to create the current canvas. If the user changed the text, you erase the canvas an RE-PLAY the same steps, just changing what text is use as you drop the text on the canvas.

Old Pedant · 11-23-2012, 09:32 PM

And DevNull *gave* you the answer to this, already:

http://www.codingforums.com/showpost...90&postcount=4

Why are you asking again?

FWIW, you would use the same techniques creating a server-side image. Find some library that allows you to SIMULATE the effect of redrawing text (or any other shape, for that matter).

Even products such as Photoshop and GIMP do it this way. Their "layers" are a lie. Layers are actually just SEPARATE images. And then, to produce the image you SEE, they just plop one layer after another down on the "canvas". Don't like the result? Want to change a layer? You *ACTUALLY* change one of the separate images and then they start ALL OVER, plopping one layer at a time down on the visible canvas.