Using the Canvas component
The Canvas component allows you to write code to draw shapes and images. Since using the Canvas component is different from using other Anvil components, we’ll cover some best practices and other techniques in this tutorial. By the end, you’ll be able to write code to make best use of a canvas.
Chapters
In this tutorial, you'll:Learn basic Canvas Concepts
We’ll first write some code to draw basic shapes
Use a model
We’ll update our code so that the Canvas draws shapes from a model of information
Handle mouse clicks
We’ll see how to code the Canvas to handle mouse clicks
Animate the Canvas
We’ll update our code to change the Canvas over time
Drag and drop objects
We’ll update our code to allow dragging and dropping on the Canvas
Access the HTML Canvas
We’ll see how to access the underlying HTML Canvas element
You can open the source code for the finished app here: