For everyone from absolute beginner to absolute professional

Canvas Examples :: games, apps, puzzles, art, visualizations

Let’s get you coding in this very first paragraph! Type or paste the code below into a simple Online Editor and press TEST to make a draggable circle!Welcome to the Canvas, an HTML tag for visual content like art and games and can be coded with JavaScript, the word’s most popular programming language.

new Circle().center().drag();

Your Guide to

Hierarchy revisited in this age of Object Oriented Programming

Isomorphisms of Hierarchy Used Crazy Carpet Mural — Hamilton Canada 2015 — Dan Zen


Nodism is a philosophy born from but accessible to all. Even if you have not coded, let’s think about it for a second —coders use logic to make GAMES, SIMULATIONS and AI.

  • The philosophy is called Nodism.
  • Followers are part of the Nodist Colony!

This guide will take you through the history and basics of Nodism.


In the…


As Adobe discontinues support for the Flash plugin

ZIM SHIM to convert Animate and Flash files to ZIM

Adobe Animate (formerly Adobe Flash) exports to HTML 5 as CreateJS. CreateJS is a JavaScript library built for the HTML Canvas. ZIM is a JavaScript framework that adds conveniences, components and controls to CreateJS. You can see what it is all about in ◎ Your Guide to Coding Creativity on the Canvas.

Our current guide has two main parts:

  1. Exporting from Animate to the Canvas
  2. Recreating ActionScript content on the Canvas

1. Exporting from Animate to the Canvas

You can choose a Canvas file when you start an Animate project. You can then code in JavaScript…


Creating with Combinations (Composition)

Your Guide To


Our first foray into creativity was quite the ride! We went from dresser drawers and bullets to DNA and consciousness! All this and more as we explored the terms of the Creativity Framework with respect to hierarchy including CONTEXT (what is above a node) and CONTENT (what is below a node). We saw that we ANALYZE to break things into aspects and SYNTHESIZE to join things for a new perspect(ive). …

Your Guide to

and The Dan Zen Museum

Well, if all the drones have tickets, maybe we should get one too!

Your Guide to

Meaning and Two Types of Hierarchies

Easy as pie! In the last parts of the Guide, we introduced the terms and structures used in the Dan Zen Creativity Framework. The structure of a hierarchy is pretty straight forward. Context is above a node and content is below a…

Your Guide to

An excerpt from the Creativity Framework by Dan Zen

Terms used in the Framework

In part 1 of the Creativity Framework, creator Dan Zen discusses the terms and structures of creativity. These terms and structures will be used in Part 2 to make content. Let’s go through part 1 now.

Your Guide to

See the Steps to Create like Magic!

Excerpt from the Dan Zen Creativity Framework

And a plain English framework called ZIM

Hello Worlds!

Any code that uses the word can be simplified. This means, the canvas, as an open source way to make games, art, apps, visualizations and more in HTML with JavaScript, is off to a rough start with its first few lines:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.arc(95, 50, 40, 0, 2 * Math.PI);

Artists and designers who are likely to use the canvas will shy away from these words — I know I did! Also, nobody wants to use document.getElementById() to access an object! …

Dr Abstract

Inventor, Founder of ZIM JavaScript Canvas Framework and Nodism, Professor of Interactive Media at Sheridan, Canadian New Media Awards Programmer and Educator

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store