Navigation for the ZIM JavaScript Canvas Framework

AboutExamplesLearnEditorCodeDocsDevsGold
CODE
START

Copy template to a text file on your computer, save as code.html and view in Browser.

   older | more | convert | pizzazz | codepen
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>ZIM - Code Creativity</title>

<!-- zimjs.com - JavaScript Canvas Framework -->
<script type="module">

import zim from "https://zimjs.org/cdn/017/zim";

// See Docs under Frame for FIT, FILL, FULL, and TAG
new Frame(FIT, 1024, 768, light, dark, ready);
function ready() {
    
    // given F (Frame), S (Stage), W (width), H (height)
    // put code here
    
    new Circle(100, purple)
        .center()
        .drag();
        
} // end ready

</script>
<meta name="viewport" content="width=device-width, user-scalable=no" />
</head>
<body></body>
</html>
START

Copy template to a text file on your computer, save as code.html and view in Browser.

newer | more | convert | pizzazz | codepen
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>ZIM - Code Creativity</title>

<!-- zimjs.com - JavaScript Canvas Framework -->
<script src="https://zimjs.org/cdn/1.4.1/createjs.js"></script>
<script src="https://zimjs.org/cdn/017/zim_min.js"></script>

<script>

// See Docs under Frame for FIT, FILL, FULL, and TAG
const frame = new Frame(FIT, 1024, 768, light, dark);
frame.on("ready", () => {

    const stage = frame.stage;
    let stageW = frame.width;
    let stageH = frame.height;

    // put your code here
    new Circle(100, purple)
        .center()
        .drag();

}); // end ready

</script>
<meta name="viewport" content="width=device-width, user-scalable=no" />
</head>
<body></body>
</html>
START

Copy template to a text file on your computer, save as code.html and view in Browser.

     newer | older | more | convert | codepen
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>ZIM - Code Creativity</title>

<!-- zimjs.com - JavaScript Canvas Framework -->
<script type="module">

import zim from "https://zimjs.org/cdn/017/zim_pizzazz";

// See Docs under Frame for FIT, FILL, FULL, and TAG
new Frame(FIT, 1024, 768, light, dark, ready);
function ready() {
    
    // given F (Frame), S (Stage), W (width), H (height)
    // put code here
    
    // for more shapes, icons and patterns see 
    // https://zimjs.com/docs.html?item=pizzazz
    
    makePattern("slants", series(fog, mist), 10, 50, 40).center();    
    new Button({
        backing:makeShape("cloud", black),
        rollBacking:makeShape("cloud", white),
        icon:makeIcon("home", white),
        rollIcon:makeIcon("home", black)
    }).center().tap(()=>{zgo("https://zimjs.com")});   
        
} // end ready

</script>
<meta name="viewport" content="width=device-width, user-scalable=no" />
</head>
<body></body>
</html>
START

Copy template to a text file on your computer, save as code.html and view in Browser.

     newer | older | more | pizzazz | codepen
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>ZIM - Code Creativity</title>

<!-- zimjs.com - JavaScript Canvas Framework -->
<script type="module">

import zim from "https://zimjs.org/cdn/017/zim";

// See Docs under Frame for FIT, FILL, FULL, and TAG
new Frame(FIT, 1024, 768, light, dark, ready);
function ready(frame, stage, stageW, stageH) {

    // given F (Frame), S (Stage), W (width), H (height)

    // but we have also collected frame, stage, stageW, stageH 
    // these are the variables we used in older versions of the template

    // put code here

    new Circle(100, purple)
        .center()
        .drag();

} // end ready

</script>
<meta name="viewport" content="width=device-width, user-scalable=no" />
</head>
<body></body>
</html>
FEATURES

Use ZIM Sprites for INTERACTIVE ANIMATION see info page!

Interactive Animation with Sprites, SpriteSheets on the Canvas with ZIMjs

ZIM is perfect for INTERACTIVE NFTS here we show you how!

ZIM NFT - Interactive NFTs (Non-Fungible Tokens) can be easily made with ZIMjs

Make MOBILE APPS with the ZIM PWA TOOL called Zapps!

ZIM Zapps - Make PWA mobile apps in five minutes with ZIM

Visit ZIM SHIM to use ZIM in Adobe Animate with CreateJS!

ZIM SHIM - Publish with Adobe Animate for HTML Canvas coding with JavaScript and CreateJS

Explore ZIM on CODEPEN and get TEMPLATES and more!

ZIM on CodePen - for HTML Canvas coding with JavaScript and CreateJS

Use ZIM ACCESSIBILITY for Screen Readers - see the DOCS

ZIM Accessibility - Screen Reader support for HTML Canvas coding with JavaScript and CreateJS
CDN

The ZIM CDN (Content Delivery Network) holds links to code files stored on the cloud with CloudFlare

ZIM CDN - Content Delivery Network for HTML Canvas coding with JavaScript and CreateJS

Import ES6 MODULES or use SCRIPT TAGS (ZIM Crystal has been discontinued)

ZIM ES6 Modules - import a set of library scripts for HTML Canvas coding with JavaScript and CreateJS
ZIM Script - JavaScript script call to a set of library scripts for HTML Canvas coding with JavaScript and CreateJS

NPM

ZIM is available on ZIM on NPM along with the helper modules

@zimjs/physics | @zimjs/game | @zimjs/three | @zimjs/socket | @zimjs/cam | @zimjs/pizzazz

Here are ZIM TEMPLATES for Svelte, React, Angular and VUE.

VIDEOS
HELP

ZIM LEARN has tutorials and the DOCS are interlinked with ZIM BITS

ZIM LEARN - Code and Video Tutorials for HTML Canvas coding with JavaScript and CreateJS ZIM DOCS - documentation for HTML Canvas coding with JavaScript and CreateJS ZIM BITS - 64 Interactive Media Tips and Tutorials for HTML Canvas coding with JavaScript and CreateJS

See GUIDES on Medium and POSTS on DEV with Dr Abstract!

Dr Abstract on Medium - articles and guides for HTML Canvas coding with JavaScript and CreateJS Dr Abstract on DevTO - posts for HTML Canvas coding with JavaScript and CreateJS

ZIM TIPS and ZIM BUBBLING have the latest based on DARK PAPERS

ZIM TIPS - the latest recommended code information  ZIM Bubbling - Videos of all the latest features! ZIM Dark Paper on code for JavaScript and ZIMjs on the HTML Canvas

CODE ZERO shows starter videos and SHERIDAN has PostGrad learning

ZIM ZERO - Very Basic Code Help Videos for HTML Canvas coding with JavaScript and CreateJS ZIM POST GRAD SHERIDAN - for HTML Canvas coding with JavaScript and CreateJS

SLACK and DISCORD have community and support worth GIT HUB stars!

ZIM SUPPORT - on Slack for HTML Canvas coding with JavaScript and CreateJS ZIM SUPPORT - on Slack for HTML Canvas coding with JavaScript and CreateJS ZIM GIT HUB - repository and issues for HTML Canvas coding with JavaScript and CreateJS
TOOLS

ZIM Tools! DISTILL, ZAPPS!, WONDER, ASSET LIST and DOCTOR

ZIM DISTILL - Minify Tree Shaking for HTML Canvas coding with JavaScript and CreateJS ZIM ZAPPS - mobile app PWA tool for HTML Canvas coding with JavaScript and CreateJS ZIM WONDER - Embedded Stats for HTML Canvas coding with JavaScript and CreateJS ZIM ASSET LIST - File Tool for HTML Canvas coding with JavaScript and CreateJS ZIM DOCTOR - Custom Doc Links Tool for HTML Canvas coding with JavaScript and CreateJS

Perfect particles with EMITTER CONFIGURATOR and find your THRESHOLD!

ZIM Emitter Configurator - make the perfect particles! ZIM Threshold Tool to make cool Instagram Pics!

ZIM BEAM to share code, ZIM EDITOR to test code and include EMOJIS!

ZIM Beam - Code Sharing for HTML Canvas coding with JavaScript and CreateJS ZIM EDITOR - online code editor with fun examples of Interactive Media ZIM Emoji - online emoji library tool with unicode to utf converter

Type code in an EDITOR with CODE HINTS and optional TYPESCRIPT!

VS Code - text editor for HTML Canvas coding with JavaScript and CreateJS Code Hints in text editor for HTML Canvas coding with JavaScript and CreateJS TYPESCRIPT - Typings for HTML Canvas coding with JavaScript and CreateJS

Make Mobile apps with PWAs and Native Apps with CAPACITOR!

ZIM PWA - Progressive Web App for HTML Canvas coding with JavaScript and CreateJS ZIM with Native Mobile Apps using Capacitor for HTML Canvas coding with JavaScript and CreateJS

Try ZIM MVC or NPM or make a CUSTOM library!

ZIM MVC - Model View Controller for HTML Canvas coding with JavaScript and CreateJS ZIM on NPM Node Package Manager for HTML Canvas coding with JavaScript and CreateJS Custom Library Sample for HTML Canvas coding with JavaScript and CreateJS

Use ADOBE ANIMATE for custom shapes and TEXTURE PACKER for Sprites!

ADOBE ANIMATE - Vector Animation Tool for HTML Canvas coding with JavaScript and CreateJS TEXTURE PACKER - SpriteSheet Editor for HTML Canvas coding with JavaScript and CreateJS

CREATEJS powers ZIM and both use JAVASCRIPT

ZIM ZERO - Very Basic Code Help Videos for HTML Canvas coding with JavaScript and CreateJS ZIM SUPPORT - on Facebook for HTML Canvas coding with JavaScript and CreateJS
collect Plasma Points for the Plasma Points mobile app with ZIM!
LIBRARIES

ZIM SOCKET for Multiuser and ZIM GAME with Leader and ISOMETRIC Boards

ZIM SOCKET - Multiuser for HTML Canvas coding with JavaScript and CreateJS ZIM GAME - with Leader Board for HTML Canvas coding with JavaScript and CreateJS ZIM GAME with Isometric Board - for HTML Canvas coding with JavaScript and CreateJS

ZIM TEN PHYSICS with integrated Physics!

ZIM PHYSICS - with Box2D for HTML Canvas coding with JavaScript and CreateJS ZIM PHYSICS - with Box2D for HTML Canvas coding with JavaScript and CreateJS

ZIM PHYSICS for Box2D with SOUP of course!

ZIM PHYSICS - with Box2D for HTML Canvas coding with JavaScript and CreateJS ZIM PHYSICS - with Box2D for HTML Canvas coding with JavaScript and CreateJS

ZIM THREE with TEXTUREACTIVE for ZIM in three.js

ZIM TextureActive for interactive and animated texture on material meshes in three.js HUD, VR, puzzles and games on surfaces and models!  for HTML Canvas coding with JavaScript and CreateJS ZIM TextureActive for interactive and animated texture on material meshes in three.js HUD, VR, puzzles and games on surfaces and models!  for HTML Canvas coding with JavaScript and CreateJS ZIM TextureActive for interactive and animated texture on material meshes in three.js HUD, VR, puzzles and games on surfaces and models!  for HTML Canvas coding with JavaScript and CreateJS
ZIM TextureActive for interactive and animated texture on material meshes in three.js HUD, VR, puzzles and games on surfaces and models!  for HTML Canvas coding with JavaScript and CreateJS ZIM TextureActive for interactive and animated texture on material meshes in three.js HUD, VR, puzzles and games on surfaces and models!  for HTML Canvas coding with JavaScript and CreateJS ZIM TextureActive for interactive and animated texture on material meshes in three.js HUD, VR, puzzles and games on surfaces and models!  for HTML Canvas coding with JavaScript and CreateJS

ZIM THREE for three.js meshes and MODELS in ZIM

ZIM THREE - 3D for HTML Canvas coding with JavaScript and CreateJS ZIM THREE - with ThreeJS for HTML Canvas coding with JavaScript and CreateJS

ZIM PIZZAZZ for BACKINGS, ICONS, PATTERNS and PATHS

ZIM PIZZAZZ - Backgrounds for HTML Canvas coding with JavaScript and CreateJS ZIM PIZZAZZ - Icons for HTML Canvas coding with JavaScript and CreateJS ZIM PIZZAZZ - Patterns for HTML Canvas coding with JavaScript and CreateJS ZIM PIZZAZZ - Paths for HTML Canvas coding with JavaScript and CreateJS

ZIM CAM for Webcam motion and ZIM BASE for database queries!

ZIM Cam - Capture Motion with Web Cam ZIM Base - PHP MySQLi Database Query Library