YOUR GUIDE TO

Setting up an Editor and Template to Code the Canvas

Let’s get you set up coding in no time and at no cost!

Welcome readers from ◎ Your Guide to Coding Creativity on the Canvas

Image for post
Example CodePen Online Editor with ZIM Canvas Template

In this guide, we will take you through using either an online editor in a Browser or a text editor on your computer to code the HTML canvas with JavaScript! If you do not know what the canvas is, here is ◎ Your Guide to When to Use a JavaScript Canvas Library or Framework.

ONLINE EDITORS FOR CODING THE CANVAS

You can try coding with an online editor at the popular CodePen site. This is an excellent, quick way to start coding and to explore new front-end libraries and frameworks.

A ◈ To get started, press this link to take you to CodePen Topics.

Image for post
CodePen Topics Page with link to ZIM

B ◈ Press the ZIM icon to see all sorts of examples of coding creativity on the canvas! There is an basic template second from the top. You can select New Pen from Template to “fork” (copy) the template and start a new app. You can also fork any of the “templates” — which are really basic examples. Or fork any of the Featured Pens listed there in a tab.

We do not like calling what we make an app because it might be a game, art work, puzzle, visualization, etc. Unfortunately, our industry does not have a well known name for what we make. Other industries have song, story, film, site, video, etc. The Interactive industry calls them interactives. Neal Stephenson, the writer, called them ractives in Diamond Age. Inventor Dan Zen wanted to use doeo, or digido. At ZIM, we call them Zapps!

Image for post
On the ZIM Topic page, press the button to start a new Zapp!

C ◈ You can then maximize the JavaScript (JS) window with the little arrow at right and scroll down into the template code (we describe that code later) until you see CODE HERE. This is where you start typing in ZIM code. For instance, try this and then press Save and Run at the top:

new Circle().center().drag();
Image for post
Scroll down in the JS window to start typing code

HOW DOES CODEPEN WORK?

The code you see in the JS window is not all the code. There are also Settings at the top that let creators import various libraries, frameworks or other scripts. Under the JS section we have imported CreateJS and ZIM. CodePen wraps all this up and presents it in the preview window. You can also use the Change View button to see different editor layouts and eventually see different views such as Full Page View and Details View (and Editor View).

TEXT EDITORS FOR CODING THE CANVAS

Traditionally, for practical reasons, we code in a text editor on our computer and then, for instance, upload the code to a server to be seen on a Website. In this section we will guide you as to how to do this. A computer, text editor and Browser are all you need!

Image for post

A ◈ We use the Atom text editor, which is a free and quick-to-download editor made by the folks at GitHub. This has color syntax highlighting and very nice editing features like multiple select and edit. Similar features can be found in Sublime Text, Brackets and VS Code. NotePad++ can be used but we recommend you try one of the others.

B ◈ Open the text editor and create a new text file called code.html or something.html. Save this in a folder where you want to save your code. Eventually, this might be a folder per project. We will describe where to get the template to copy and paste into the text file next. There is also the video below that takes you through the steps.

Video that introduces Atom text editor and the ZIM template for the canvas

ZIM TEMPLATE FOR CODING THE CANVAS

Templates are code that most, if not all, projects use. They allow you to get started faster. We have a number of templates in ZIM.

C ◈ The basic template can be found at the top of the ZIM Code page. Press the COPY button and then paste the code into the code.html file in your text editor. This uses what is called the fit scaling mode and is the easiest way to start coding. The majority of the ZIM examples use the fit template.

Image for post
ZIM Template on the Code Page — paste into a Text Editor

OTHER ZIM CANVAS TEMPLATES

There are also other templates listed on the code page. There is a minimal template without comments. There are Frame templates to handle different scaling. There is a template to work with Adobe Animate called ZIM SHIM. You can explore these templates as you get more used to coding the canvas. For now, do not worry about them.

Image for post
Templates for different scaling on the Canvas

A GUIDE TO WHAT IS IN THE TEMPLATE

If you have not coded before, do not worry too much about what is in the template. You can just use it and as you code more, you will start to recognize things. The video above takes you through the template and we will restart our ◈ letters to describe the parts below.

Image for post
ZIM Template inside Atom Text Editor

A ◈ The template is an HTML page. You should change the title as that will show at the top of the Browser, in search results, in bookmarks, etc.

B ◈ We then import CreateJS and ZIM scripts. These scripts hold a lot of code that helps you code on the canvas more easily.

The ZIM and CreateJS files are hosted in what is called a CDN or Content Delivery Network. ZIM, like many JavaScript frameworks, uses Cloudflare which caches the files on the cloud for fast and reliable performance. You can also download and host the files yourself if you know how to do that.

C ◈ The imported JavaScript files are then followed by a <script> tag where you are going to add your code. At the bottom is the </script> tag where we go back into HTML for the body. Nothing is in the body. ZIM will add the canvas tag for you.

Image for post
The top of the coding part in the Template

D ◈ Inside the script tag is the top of the ZIM template. We make a Frame that will handle scaling, size, colors, and you can load assets here too. There are comments in // throughout that help describe what is happening.

E ◈ When the Frame is ready we call a function and inside that function is where you do your code! At this point, the frame has made the canvas tag and set up (through CreateJS) what is called a stage. Anything we want to see on the canvas we put on the stage. This is a metaphor from Director and Flash.

Image for post
The bottom of the coding part in the Template

F ◈ We then come to where you add your own code. Here we have an example of a Circle that is centered and can be dragged. We show this with chaining (multiple dots) and without chaining (commented out). Chaining can be on one line or on multiple lines. Just delete this when you are ready.

G ◈ We add a stage.update() so that any changes we make get shown on the canvas. We then end the frame ready function made in the top part of the template.

VIEWING THE PAGE IN A BROWSER

Save the page and then you will want to view the page in a Browser such as Chrome, Firefox, Edge or Safari. There are several ways to view the file in a Browser. The last way is probably the best but takes a little set-up.

  1. Find the file in your folder and double click it. Usually HTML pages will open in your default Browser. Or you can adjust the file properties to do so.
  2. Find the file, pick it up and drop it on an open Browser window or the Browser icon on your desktop.
  3. Right click the file and open or open with your Browser.
  4. Open the file from your text editor. For Atom, go to Packages in the top menu, choose Settings View > Install Packages/Themes and search for Open in Browser (singular not Browsers). This just takes a second to install. You can then right click and Open in Browser or use the Hot Key.

Once you have the file in the editor and the browser, just keep both open. Make changes in your text editor (CTRL/⌘S) and refresh your Browser (CTRL/⌘R) to see the change.

Image for post
ZIM Template inside Firefox Browser

CONCLUSION

Well… we know. This guide was a little on the practical side and less on the creative side. But it gets us set up which is often a barrier. So if you have a template and got some code happening then you are on your way!

Further Reading

If you would like to see what coding is like on a Canvas Library or Framework here is ◎ Your Guide to Coding Creativity on the Canvas.

Or jump right to ◎ Your Guide to Coding Concepts with the Colorful Canvas.

At any time in the Your Guide to series for the canvas, you are welcome to go to the ZIM Site and look through the Learn Section or the ten banners on the front page.

Have a great day or night! And if you know anyone else who might want to code —invite them along! You will make the journey twice as fun!

Dr Abstract

Image for post

Follow us on Twitter at ZIM Learn and here is ZIM Learn on YouTube!

Written by

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