Simple Draggable Canvas Circle - 39 Characters in ZIMjs

script.babel

const frame = new Frame("fit", 800, 600, "#EEE", "#555");
frame.on("ready", ()=>{ 
	zog("ready from ZIM Frame"); // logs in console (F12 - choose console)

	// often need below - so consider it part of the template
	const stage = frame.stage;
	const stageW = frame.width;
	const 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
	
	// Circle centered on stage with drag code	
	// TIP: colors - https://zimjs.com/tips.html#COLORS
	// TIP: chaining - https://zimjs.com/tips.html#CHAINING
	// TIP: positioning - https://zimjs.com/tips.html#POSITION
	// TIP: dragging - https://zimjs.com/tips.html#DRAG	
		
	new Circle(100, pink).center().drag(); // chaining

	new Label("ZIM - drag circle...").pos(50,50).alp(.5); // position and alpha

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

	// DOCS FOR ITEMS USED
	// http://zimjs.com/docs.html?item=circle
	// http://zimjs.com/docs.html?item=center
	// http://zimjs.com/docs.html?item=drag
	// http://zimjs.com/docs.html?item=label
	// http://zimjs.com/docs.html?item=pos
	// http://zimjs.com/docs.html?item=alp
	// http://zimjs.com/docs.html?item=frame

	// FOOTER
	// call remote script to make ZIM icon - you will not need this
	createIcon(); 

}); // end of ready

scripts

<script src="https://zimjs.org/cdn/1.2.3/createjs_min.js"></script>
<script src="https://zimjs.org/cdn/10.7.1/zim.js"></script>
<script src="https://zimjs.org/cdn/icon5.js"></script>

simple-draggable-canvas-circle-39-characters-in-zimjs.markdown

Simple Draggable Canvas Circle - 39 Characters in ZIMjs

A simple (37 character) draggable circle for the Canvas! ZIM provides JavaScript conveniences, components and controls for the Canvas and is powered by CreateJS with its solid Bitmap Object Model (BOM). Code Creativity with ZIM!

A Pen by ZIM on CodePen.

License.