Drawing canvas inside Twine 2?

Hello! I’ve made some Twine games in the past, and as of now, I’ve only used Harlowe for making them. I was thinking about a game where a map is given to you, and I wanted people to be able to draw in the map. As I come from Unity-based games, my first thought was that I was better off using that engine for this idea, but then I realized Twine is very configurable.

I found 1 post that talked about this, but I’m not very familiar with integrating things into Twine. Also, I don’t know if Harlowe would be the best for this.

Basically: I want to include some type of drawing canvas in a Twine game.

Edit: I wrote this at 3am and just noticed the typos haha.
I just edited them out.


Harlowe is never the best if more than very basic JavaScript is involved. That said, as long as whatever you’re doing does not require you to hook into Harlowe’s internals, then it should probably work out in the end.

In this case, it depends on exactly how much interaction with the story format your idea will need. If you just want to use a <canvas> element, and maybe some associated JavaScript, then you should be fine with Harlowe. If you want a lot of interaction between the story format and the <canvas> element, then you may be better off with another story format.


TheMadExile is 100% correct.

I took the time to do a deep dive into Harlowe. It can do what you need it to. Particularly, the last two sections in the following link may prove useful for you to setup HTML canvas code.

Harlowe: thinking outside the (box:)

That said, many here would argue that SugarCube is the most robust format to work in. If you like Harlowe, then continue with it. If you are having second thoughts, check out SugarCube. If you are hardcore, Snowman. :wink:

1 Like

As of now, I’m not thinking about too much interaction, really. The idea as of now involves going to a passage where a map is given to the player. The player then can draw on top of it, but then the drawings get saved. That part may be the tricky one? But the drawing wouldn’t really interact with the story per se.

Anyways, I should maybe look into SugarCube as @HAL9000 points out. The thing is, I was just started to feel comfortable with Harlowe and I’m somehow afraid that SugarCube will be another giant mountain to climb, but I’ll be looking into it.

Thank you very much for your replies!

1 Like

I’m not much of a programmer. I can do basic stuff, so I was kinda hopeful some simpler solution existed, but I’ll be reading it nonetheless and looking for more help in the future.

Thank you!

1 Like

That was my trap too. :wink: Then I moved onto Chapbook and really like it for it’s simplicity.

The thing with SugarCube is that it doesn’t have any syntax highlighting in the Twine editor. This means you have to use VSCode (or Notepad++), find a syntax highlighting add-on and setup + use Tweego as a compiler. It’s quite daunting for me so I still haven’t set it up to give it a proper go.

If you decide to take the plunge into SugarCube…
Try Josh’s guide… Tweego and VSCode | tiny-qbn @JoshGrams
Manon @manonamora has a ton of resources online too Tweego Ready-to-Use Folder and can help you get started with SugarCube when the time is right.

Edit: I should mention that Twine has not exposed it’s syntax highlighting API to the story formats properly, from my understanding. This is why SugarCube does not have the highlighting. Harlowe and Chapbook sort of hack Twine to make it happen.

Regarding your need to save the image the user creates in the HTML canvas, Twine stories use the browser’s local storage so you’ll need to do something along the lines of…

javascript - How to save an image to localStorage and display it on the next page? - Stack Overflow

…but save the image variable into the Twine story’s storage. Harlowe allows you to save a story variable in JavaScript. Not too sure if there are limitations to the type of variable that can be stored, but a Base64 should work because it’s just a long string.

I love it when people do unique things in their games. Good luck!

This used to be true, but there’s an official API for this along with other ways to extend Twine as of version 2.4. Docs for those interested are here.

1 Like

Excellent! I would love to try SugarCube without going through the hoops I mentioned to get syntax highlighting to work. Hopefully this happens soon!

…back to your regularly scheduled topic. :wink: