// use the default "full" mode - not the "fit" mode many of the codepens use
// full mode makes a full window stage without any automatic scaling 
// the objects then must be manually scaled in the Frame's resize event
const frame = new Frame({color:darker, outerColor:darker}); 
frame.on("ready", ()=>{ // ES6 Arrow Function - similar to function(){}
	zog("ready from ZIM Frame"); // logs in console (F12 - choose console)

	// often need below - so consider it part of the template
	let stage = frame.stage;
	let stageW = frame.width;
	let stageH = frame.height;

  // REFERENCES for ZIM at https://zimjs.com
	// see https://zimjs.com/intro.html for an intro example
	// see https://zimjs.com/learn.html for video and code tutorials
	// see https://zimjs.com/docs.html for documentation

	// CODE HERE

	// this is basic responsive using percentages of the stageW and stageH 
	// these can be used with scaleTo(), sca(), pos()
	// or properties (but without chaining) scale, scaleX, scaleY, x, y
	// There will be more advanced examples using the ZIM Layout() class as well

	// use a grid to help visualize percentages - see docs for more options
	const grid = new Grid({color:dark}); // or put last to go on top

	// make some assets to position or scale in the resize event later
	const a = new Rectangle(100,100,green).centerReg();
	const b = new Rectangle(100,100,blue).centerReg();
	const c = new Rectangle(100,100,orange).centerReg();
	const d = new Rectangle(100,100,pink).centerReg();
	const circle = new Circle(100, red);	

	const title = new Label({
		text:"ZIM - Responsive Canvas: position and scale - press to toggle",
		color:white
	}).alp(.7).addTo();

	// mousedown on the stage:
	// here we have provided a way to toggle the the grid and outline
	// normally, as you build you would put them in to see what is happening 
	// and then comment them out or remove them when done 
	// so all this code is really just for this demonstration
	// note we use "stagemousedown" to capture a mousedown anywhere on the stage 
	// there is just "mousedown" which only captures events on any object on the stage 
	stage.on("stagemousedown", ()=>{
		if (stage.contains(grid)) {
			grid.removeFrom();
			outlineSize=0
		} else {
			grid.addTo(stage, 0);
			outlineSize=2;
		}
		resize();
		stage.update();
	});
	let outlineSize = 2;

	// here is the frame resize event (same as window.addEventListener("resize", ()=>{}))
	frame.on("resize", resize);
	function resize() {
		// grab the new stage width and height
		stageW = frame.width;
		stageH = frame.height;

		// scaleTo defaults to scale to the "smallest" of 30% height or 30% width
		// can also scale to the "largest" or "both" - this last one would stretch the object				
		circle.scaleTo(stage, 30, 30).center().outline(purple, outlineSize);

		// keep center rectangles at 20% horizontal and 30% vertical margin
		// note the rectangles are center registration so this is to their centers 
		// the outline shows the registration point as a circle 
		// once again, the outline is only for helping see what is happening 
		// you would remove the outline and the grid for the final app 
		// normally, outline can be done just obj.outline();
		// we just wanted purple and the ability to toggle the outline with its size parameter
		a.loc(stageW*.2, stageH*.3).outline(purple, outlineSize);
		b.loc(stageW*.8, stageH*.3).outline(purple, outlineSize);
		c.loc(stageW*.8, stageH*.7).outline(purple, outlineSize);
		d.loc(stageW*.2, stageH*.7).outline(purple, outlineSize);

		// scale the title to 50% the width 
		// position title at 5% margin left and top
		title.scaleTo(stage, 50);
		title.pos(stageW*.05, stageH*.05);
		grid.resize();      
	}


	stage.update(); // this is needed to show any changes

	// DOCS FOR ITEMS USED
	// http://zimjs.com/docs.html?item=grid
	// http://zimjs.com/docs.html?item=rectangle
	// http://zimjs.com/docs.html?item=circle
	// http://zimjs.com/docs.html?item=centerReg
	// http://zimjs.com/docs.html?item=center
	// http://zimjs.com/docs.html?item=scaleTo
	// http://zimjs.com/docs.html?item=outline
	// http://zimjs.com/docs.html?item=pos
	// http://zimjs.com/docs.html?item=addTo
	// http://zimjs.com/docs.html?item=frame  
  

}); // end of ready
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://zimjs.org/cdn/1.2.3/createjs_min.js
  2. https://zimjs.org/cdn/10.7.1/zim.js
  3. https://zimjs.org/cdn/icon5.js