ZIM BITS TUTORIAL
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>ZIM BITS - Inline Canvas</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.4/createjs.js"></script>
<script src="https://zimjs.org/cdn/01/zim_min.js"></script>
<!-- use zimjs.com/distill for minified individual functions! -->
<script src="https://zimjs.com/bits/footer10.js"></script><!-- you will not need this -->
<style>
body {margin:0px; padding:0px; background-color:#eee;}
main {width:400px; 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
// FILL 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
const scaling = "holder"; // 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/F.html and Docs for more
const width = 400;
const height = 300;
const color = "#333";
new Frame(scaling, width, height, color, null, ready);
function ready() {
// given F (Frame), S (Stage), W (width), H (height)
// ZIM BITS - Inline Canvas (2016 - updated 2022)
// many times we will want the canvas to be full window
// but sometimes we want to put the canvas inline in our HTML
// STEPS
// 1. make an html tag such as a <div> or <section> to hold the canvas
// 2. give the tag an id such as id="holder"
// 3. target the ID as the first parameter of the Frame() creation
// 4. give the holder and the canvas any other styles you want
// including responsive design styles
// note: styling the canvas will stretch it just like an image
// you can make the canvas dimensions bigger then scale smaller too
// but it is not wise to make the canvas smaller and scale bigger
// you can also pass in no dimensions to Frame
// and set dimensions on the tag - see the Docs
// Frame will then make a stage the size of the tag and not scale it
new Button(120,60,"ZIM")
.centerReg()
.tap(function() {
zgo("https://zimjs.com", "_blank");
});
} // end of ready
}); // end of dom loaded
</script>
<meta name="viewport" content="width=device-width, user-scalable=no" />
</head>
<body>
<!-- canvas with id="myCanvas" is made by zim Frame -->
<main>
<nav>
<a href="https://zimjs.com/bits.html#inlinecanvas">
<img src="https://zimjs.com/images/zimbits.png"></a>
</nav>
<!-- here is the tag inside which we will insert the canvas made by ZIM Frame -->
<section id="holder"></section>
<footer>
<a href="https://zimjs.com/bits.html#inlinecanvas">ZIM BITS</a>
<a href="https://zimjs.com/bits/inlinecanvas.html">SEE CODE</a>
</footer>
</main>
</body>
</html>