Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3

Thread: How to do this?

  1. #1
    Regular Coder
    Join Date
    Sep 2011
    Posts
    354
    Thanks
    39
    Thanked 0 Times in 0 Posts

    How to do this?

    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!

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,232
    Thanks
    80
    Thanked 4,456 Times in 4,421 Posts
    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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,232
    Thanks
    80
    Thanked 4,456 Times in 4,421 Posts
    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.
    Last edited by Old Pedant; 11-23-2012 at 09:35 PM.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •