ZIM BEAM (tag2) - Code Sharing for JavaScript Canvas Framework

BEAM

Share ZIM CODE use ZIM BEAM

COPY

SHOW

tag2 2024-05-29 15:51:38

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>ZIM Frame - Tag (Dimensions) Template</title>

#holder {position:relative; margin:20px 0px;}
	/*
	zim Frame makes a canvas tag and adds it to the div called holder
	the id of canvas tag is holderCanvas (Frame adds the word Canvas to the holder id)
	here we are using CSS to scale the canvas but the stage dimensions stay fixed to the values provided to Frame
	note, the div (and article) is by default display:block which will scale to their parent size
	the !important is just in case...
	*/
	#holderCanvas {width:80% !important; height:auto !important;}
	/*
	just use 400px instead of 80% for a fixed width
	*/
</style>

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

// 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 fill 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"; // use the ID of a tag to place the canvas in the tag
const width = 1024; // can go higher...
const height = 768;
const color = brown; // ZIM colors now available globally
new Frame({scaling, width, height, color, ready, allowDefault:true}); // see docs for more options and info
function ready() {
	
	// put your code here (you can delete this code)
	// given F (Frame), S (Stage), W (width), H (height)

const button = new Button(140, 60, "ZIM", grey, dark)
		.scaleTo(S, 30) // also see zim.Layout() for more complex scaling
		.center() // centers on stage - addTo() and others as well!
		.tap(() => {
			zgo("http://zimjs.com/frame.html"); // or relative URL, target is available too
		});
	
} // end of ready

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

<body>
<article>
	<h3>ZIM Frame Tag mode (with dimensions)</h3>
	<p>This template shows how to place a DIMENSIONED Canvas in an HTML element with a specified on tag ID (holder in this case).  ZIM Frame will make the Canvas with an id the same as the holder tag but with the word Canvas added to the end.  You may choose to scale the canvas with CSS - just try to scale from big to small - like you would a picture.  The stage size will be the dimensions you provide to Frame regardless of scaling (like the fit mode).</p>
	<div id="holder"></div>
	<p>Frame uses appendChild() to add the canvas tag to the specified element.
	<p>
	<a href="http://zimjs.com/frame.html" style="outline:none;"><img src="https://zimjs.com/templates/content/icon.jpg" style="width:100px; margin-bottom:-10px;"/></a>
	</p>
</article>
</body>
</html>