CODE - ZIM JavaScript Canvas Framework - Code Creativity with ZIMjs!

CODE

TEMPLATE

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

older | convert | pizzazz | more | codepen

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>ZIM - Code Creativity</title>

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

import "https://zimjs.org/cdn/020/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>

TEMPLATE

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

newer | convert | pizzazz | more | 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.5/createjs.js"></script>
<script src="https://zimjs.org/cdn/020/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>

TEMPLATE

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

newer | older | convert | more | 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/020/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>

TEMPLATE

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

newer | older | pizzazz | more | 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/019/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>

CDN & NPM