Intro to Canvas 3.0
Tags: canvas, introduction, zim, zimjs
Published: 2020-12-27 02:46:38

Hey folks, we have been working very hard for the last five or six years to make the Canvas easy to use with powerful results.  This guide and the twelve sub-guides will unlock a world of coding wonder!  A super project for the new year - and beyond!  Please share with colleagues too!

[◎ Your Guide to Coding Creativity on the Canvas](https://drabstract.medium.com/your-guide-to-coding-creativity-on-the-canvas-ada0996298f6)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/egrqnp0bztur3282uekd.jpg)

The twelve sections are here:

1. [◎ CANVAS LIBRARIES AND FRAMEWORKS](https://medium.com/@zim_67337/your-guide-to-selecting-a-javascript-canvas-library-or-framework-3584f4512a30)
>CreateJS, ZIM, PixiJS, Phaser, P5js, PaperJS

2. [◎ CODE ENVIRONMENT AND TEMPLATE](https://medium.com/@zim_67337/your-guide-to-setting-up-an-editor-and-template-to-code-the-canvas-7f684e24c2ce)
>text editor, browser, HTML page, template, import, script tag

3. [◎ DISPLAY OBJECTS :: SHAPES](https://medium.com/@zim_67337/your-guide-to-coding-concepts-with-the-colorful-canvas-8ff24086eb6)<br>
>Circle, Rectangle, Triangle, Blob, Squiggle, Container, variables, classes, objects, parameters, properties, methods

4. [◎ DISPLAY OBJECTS :: COMPONENTS](https://medium.com/@zim_67337/your-guide-to-components-on-the-javascript-canvas-54e0d8fc79b)<br>
>Button, Slider, Dial, List, Tabs, Stepper, Indicator, Selector, events, functions, anonymous functions, arrow functions

5. [◎ CONVENIENCES](https://medium.com/@zim_67337/conveniences-when-coding-on-the-canvas-f6b0b8dd981d)
>object literals, chaining, arrays, random, series

6. [◎ INTERACTIVITY](https://medium.com/@zim_67337/your-guide-to-interactivity-on-the-canvas-with-javascript-e7c96c02ff74)
>drag, gesture, transform, tap, change, hitTest, conditionals

7. [◎ ANIMATION](https://medium.com/@zim_67337/your-guide-to-animation-on-the-canvas-with-javascript-cb928c4c888a)
>interval, timeout, animate, wiggle, Ticker

8. [◎ ACCESSIBILITY](https://medium.com/@zim_67337/your-guide-to-accessibility-on-the-canvas-with-javascript-ff58074c30c8)
>screen reader for canvas components and content

9. [◎ ASSETS](https://medium.com/@zim_67337/your-guide-to-images-sounds-and-sprites-on-the-canvas-1b13b019e76d)
>images, sounds and sprites

10. [◎ STYLE](https://medium.com/@zim_67337/style-on-the-canvas-12660313ba6a)
>Set the style for all, types and groups of display objects

11. [◎ RESPONSIVE AND ADAPTIVE](https://medium.com/@zim_67337/your-guide-to-responsive-and-adaptive-design-on-the-canvas-e2f763128152)
>Pages, Layout, HotSpots, Guide, Grid, Manager, Tile, Wrapper

12. [◎ CONTROLS](https://medium.com/@zim_67337/controlling-the-canvas-with-javascript-d94792aa33cd)
>MotionController, Pen, Parallax, Emitter, SoundWave, VR, Physics

Dr Abstract

---

If you have not checked out the Canvas recently - you simply must!  Here is the [ZIM&nbsp;Dev&nbsp;Site](https://dev.zimjs.com) and some [In-depth&nbsp;Guides](https://drabstract.medium.com/) by Dr&nbsp;Abstract including [Your Guide to Coding Creativity on the Canvas](https://drabstract.medium.com/your-guide-to-coding-creativity-on-the-canvas-ada0996298f6).