ZIM BITS TUTORIAL

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>ZIM BITS - Two Canvases for JavaScript HTML 5 Canvas and CreateJS - Tips, Techniques and Tutorials</title>

<!-- Welcome to ZIM at https://zimjs.com - Code Creativity!              	        -->
<!-- ZIM runs on the HTML Canvas powered by JavaScript and CreateJS https://createjs.com -->
<!-- Founded by Inventor Dan Zen - http://danzen.com - Canadian New Media Award Winner 	-->
<!-- ZIM is free to use. You can donate to help improve ZIM at http://zimjs.com/donate 	-->

<script src="https://zimjs.org/cdn/1.3.2/createjs.js"></script>
<script src="https://zimjs.org/cdn/cat/00/zim.js"></script>
<!-- use zimjs.com/distill for minified individual functions! -->

<style>
	body {margin:0px; padding:0px; background-color:#eee;}
	#one {position:relative; background-color:#333; display:inline-block; margin-right:20px;}
	#two {position:relative; background-color:#333; display:inline-block; vertical-align:top;}
	main {width:420px; margin:0px auto;}
	nav, footer {width:100%; padding:20px 0px; text-align:center;}
	a {outline:none;}
	footer a {
		font-family:Courier New; padding:5px 8px; background-color:#ddd;
		border:dashed thin #666; text-decoration:none; color:#666;
	}
	footer a:hover {background-color:#fff;}
	footer {margin-bottom:30px;}
</style>

<script>

window.addEventListener("DOMContentLoaded", function(e) { // make sure tag is loaded!


	// SCALING OPTIONS
	// scaling can have values as follows with full being the default
	// "fit"	sets canvas and stage to dimensions and scales to fit inside window size
	// "outside"	sets canvas and stage to dimensions and scales to fit outside window size
	// "full"	sets stage to window size with no scaling
	// "tagID"	add canvas to HTML tag of ID - set to dimensions if provided - no scaling

	var scaling = "one"; // for inline canvas set scaling to tagID
	// optional - can remove dimensions to set stage to tag dimensions
	// then make sure to give tag dimensions in pixels, percentage, etc.
	// Frame will place a canvas there an not scale the canvas
	// so you would then scale within the code if desired
	// see https://zimjs.com/frame.html and Docs for more

	// ZIM BITS - Two Canvases (2016 - updated 2020)

	// sometimes we want two canvases like the current ZIM home page
	// there is one canvas for the interactive logo
	// and another canvas for the happy sun face example

	// STEPS
	// 1. make div tags to hold the two canvases (or other types of tags - but NOT canvas tags)
	// 2. pass the name of the tag and the dimensions for the canvas to ZIM Frame
	// 3. add things to the stage, etc.
	// 4. use ZIM Frame to add another canvas (note the two different variables for frame)
	// 5. add things to the second stage, etc.

	// STEP 1 is down below in the HTML code

	// 2. pass the name of the tag and the dimensions for the canvas to ZIM Frame
	// ZIM Frame makes the canvas for you so do not make a canvas tag yourself - just a holder for the canvas
	// here we call our first frame variable frame1 and we will call the second frame variable frame2
	// all the variables inside the ready function are protected so they can be whatever they like
	// for instance, it is okay to call the stage, stage in both ready functions
	// as each ready function has its own scope

	// just for reference, ZIM Frame will make canvases with the IDs of oneCanvas and twoCanvas
	// as we passed in one and two as the holder tag names (so it appends the word Canvas)
	// if we used fit, outside or full instead of a tag name then it would set the canvas to an id of myCanvas
	// you can override this with the canvasName parameter in ZIM Frame

	var width = 200;
	var height = 200;
	var frame1 = new Frame(scaling, width, height);
	frame1.on("ready", function() {
		zog("ready from ZIM Frame 1");

		var stage = frame1.stage;
		var stageW = frame1.width;
		var stageH = frame1.height;

		// 3. add things to the stage, etc.
		var circle = new Circle(60, blue)
			.center() // both centers and does addChild
			.drag();

		stage.update();

	}); // end of ready


	// 4. use ZIM Frame to add another canvas (note the two different variables for frame)

	scaling = "two";
	width = 200;
	height = 150;
	var frame2 = new Frame(scaling, width, height);
	frame2.on("ready", function() {
		zog("ready from ZIM Frame 2");

		var stage = frame2.stage;
		var stageW = frame2.width;
		var stageH = frame2.height;

		// 5. add things to the second stage, etc.
		var square = new Rectangle(100, 100, frame1.yellow)
			.center(stage) // need stage - otherwise centers on default Frame's (frame1) stage
			.drag();

		stage.update();

	}); // end of ready


}); // end of dom loaded

</script>

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimal-ui" />

</head>

<body>

<main>
    <nav>
    	<a href="https://zimjs.com/bits.html#two">
        <img src="https://zimjs.com/images/zimbits.png"></a>
    </nav>

	<!-- 1. make div tags to hold the two canvases (or other types of tags - but NOT canvas tags) -->
    <div id="one"></div><div id="two"></div>

    <footer>
    	<a href="https://zimjs.com/bits.html#two">ZIM BITS</a>  
        <a href="https://zimjs.com/bits/two.html">SEE CODE</a>
    </footer>
</main>
</body>
</html>