How do I save the current state of a DrawingCanvas after quitting the game?

0 favourites
  • 9 posts
From the Asset Store
State Machine
$6.30 USD
10% off
State Machine is a great tool for managing the state of anything in your game.
  • Hello everybody!

    In my game the player has a trail and actually draws his way on the drawing canvas. My question is, is there a way to save the state of it and load it back in? With the normal save functionallity it saves it and can load it again, but after quitting the game it is gone.

    Is there a way to save it e.g. locally as an image and load it back in?

    Best wishes,


  • It is possible with BinaryData plugin - you can convert the image to base64 string and save it to Local Storage. However, to restore it you will have to load the image into a sprite first, and then paste the sprite to DrawingCanvas. There may be some quality loss if window size has changed, for example. Also, if the image is large, base64 string may be really long (many megabytes)

  • There's rarely any need to use base64 these days, and it's more efficient if you don't use base64. You can instead use 'Save image' in Canvas, use AJAX to fetch the image directly in to Binary Data, and then use Local Storage to save the Binary Data to storage. Then you can later load the Binary Data from storage again, load an image from the Binary Data URL, and paste that in to the canvas. This keeps everything binary and never converts to base64.

  • [removed]

    EDIT: Never mind, found "LocalStorage Set/Get Binary" actions. I don't know how I never noticed them before!

  • Thank you very much!

    I will try that out :)

  • Ok I tried it, but I don't get the thing with pasting the binary data/image.

    Here is what I am doing at the moment:

    Or is there a plugin/method to convert the binary data to an image/object to paste it to the DrawingCanvas?

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • After "AJAX Set response to binary" you need another action -

    AJAX Request URL DrawingCanvas.SavedImageURL

    Then wait for AJAX to complete, and only then save to local storage.

    And the loading function is also wrong. You need wait for "Get item" to finish, then load the BinaryData into a temporary sprite. Wait again, then paste the sprite onto the canvas..

    Use System action "Wait for previous action" to minimize the number of events.

  • Thank you ver much. But I still don't fully understand the steps for loading the image back from binary data.

    Here is what I am trying at the moment, but it does not work:

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)