Canvas Tutorial

There have been a number of questions in past months about using the canvas. Unfortunately there’s a learning curve with using the canvas since it’s unlike other components in how you work with it. I had some time, so worked up an app that should help others over that learning curve. It doesn’t show everything you can do with a canvas, but should get complete newcomers started and productive.

Here’s the live version: https://canvas-examples.anvil.app/

And the clone version: Anvil | Login

16 Likes

Nice, thank you :slight_smile: Here’s a little snake game that may be useful for someone to see:

https://anvil.works/build#clone:JOENPPFZHKPR5THE=WXSXS5MPWGEND73TGRHLP3EX

6 Likes

‘ijkl’ keys can also be used to control snake movement.

Awesome job! Thanks for sharing :slight_smile:

@jshaffstall - thanks for sharing this post. the app you wrote to explain how canvas works in anvil was very easy to follow and well laid out - excellent job!

1 Like

Thanks @jshaffstall this is excellent timing.

Just adding a tag for those searching the forum in future for setLineDash() have a look at the “Bit of JavaScript” section.

Search Tags: setLineDash, Canvas dashed line

1 Like