View On Github

Displaying Images

To display an Image on the canvas, simply create a JS3Image Object and pass in the path of the file to be loaded.
JS3Image Objects support pngs, jpgs, and gifs.


	var stage = new JS3('my-canvas');
	var img = new JS3Image( {src:'nyancat.png'} );
	    img.x = 25;
	    img.y = 25;
	stage.addChild(img);


Or of course you can specify the src on the JS3Image itself instead of passing it into the constructor.


	var stage = new JS3('my-canvas');
	var img = new JS3Image( {x:25, y:25} );
	img.src = 'nyancat.png';
	img.rotation = 90;
	stage.addChild(img);


Each JS3Image Object also has a ready callback that executes when the Image has finished loading.


	var stage = new JS3('my-canvas');
	var img = new JS3Image( {x:25, y:25, src:'nyancat.png'} );
	    img.ready = function(){ alert('Image Loaded')};
	stage.addChild(img);


Quick Tip : You don't have to wait for the Image to finish loading before adding it to the DisplayList.

Rendering Text

Rendering Text on the canvas is as simple as creating a JS3Text Object and adding it to the Stage.


	var stage = new JS3('my-canvas');
	var text = new JS3Text( {text:'Hello World!', bold:true, color:'green', size:20} );
	    text.x = 50;
	    text.y = 35;
	stage.addChild(text);


And of course you can scale and rotate JS3Objects just as you would any other Sprite.


	var text = new JS3Text( {text:'Hello World!', bold:true, color:'green', size:20} );
	    text.x = 50;
	    text.y = 35;
	stage.run(function(){
	    text.rotation += 1;
	});
	stage.addChild(text);


In addition to the properties inherited from the base JS3Object, JS3Text objects also define the following :


	font        :String = 'Arial';
	size        :Number = 12;
	bold        :Boolean = false;
	italic      :Boolean = false;
	color       :String = '#333';
	strokeColor :String = '#CCC';


Support for rendering text on an HTML5 canvas is still somewhat in its infancy.
Many more features will be added here as the spec and browser support evolves...

Awesome, you're ready for the next section. Click here to learn about Tweening & Animating with Timers.