Canvas Tutorial

[jshaffstall]

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

[nickantonaccio]

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

Snake

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

[nickantonaccio]

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

[tobias.carlbom]

Awesome job! Thanks for sharing

[ricketyler]

@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!

[rickhurlbatt]

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