DEV Community

loading...
Cover image for Intro to Canvas 3.0

Intro to Canvas 3.0

zimlearn profile image Dr Abstract ・2 min read

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

Alt Text

The twelve sections are here:

  1. ◎ CANVAS LIBRARIES AND FRAMEWORKS

    CreateJS, ZIM, PixiJS, Phaser, P5js, PaperJS

  2. ◎ CODE ENVIRONMENT AND TEMPLATE

    text editor, browser, HTML page, template, import, script tag

  3. ◎ DISPLAY OBJECTS :: SHAPES

    Circle, Rectangle, Triangle, Blob, Squiggle, Container, variables, classes, objects, parameters, properties, methods

  4. ◎ DISPLAY OBJECTS :: COMPONENTS

    Button, Slider, Dial, List, Tabs, Stepper, Indicator, Selector, events, functions, anonymous functions, arrow functions

  5. ◎ CONVENIENCES

    object literals, chaining, arrays, random, series

  6. ◎ INTERACTIVITY

    drag, gesture, transform, tap, change, hitTest, conditionals

  7. ◎ ANIMATION

    interval, timeout, animate, wiggle, Ticker

  8. ◎ ACCESSIBILITY

    screen reader for canvas components and content

  9. ◎ ASSETS

    images, sounds and sprites

  10. ◎ STYLE

    Set the style for all, types and groups of display objects

  11. ◎ RESPONSIVE AND ADAPTIVE

    Pages, Layout, HotSpots, Guide, Grid, Manager, Tile, Wrapper

  12. ◎ CONTROLS

    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 Dev Site and some In-depth Guides by Dr Abstract including Your Guide to Coding Creativity on the Canvas.

Discussion (1)

pic
Editor guide
Collapse
zimlearn profile image
Dr Abstract Author

We have called it Canvas 3.0 as the original HTML 5 Canvas tag is 1.0. Helper libraries like CreateJS and PixiJS that give us the BOM (Bitmap Object Model) are Canvas 2.0. Higher level frameworks like Phaser and ZIM are Canvas 3.0. Phaser focuses on games and ZIM is a general canvas framework with many conveniences, components and controls - and can do 2D games too.