Awesome selections!

Want to refer to multiple canvases at once? Well, now you can!

With the full power of jQuery selectors, we can specify with the element selector, class selectors, or individual ID selectors!

All of this can be done on the fly, rather than pre-referencing canvases and contexts!

Selection syntax!

We can select an individual canvas by referring to it by ID!

								$('#selectionCanvas1').drawText({
									//Draw commands!
								});
						

We can also pick multiple specific canvases by referring to all canvases with the 'selectionCanvas' class!

								$('canvas.selectionCanvas').drawText({
									//More draw commands!
								});
						

You can also draw across ALL canvas elements!

(But, let's not do that; it would be kinda silly.)

								$('canvas').drawText({
									//Can you guess what goes here?
									//Hint: It's more draw commands!
								});
						

Messy reference variables? Never heard of 'em!

Selection example!

Draw on first canvas! Draw on second canvas!

Draw on BOTH canvases!

Awesome chaining!

Unlike the default Canvas behaviour, commands with jCanvas can be chained for cleaner, less redundant coding.

By treating the canvas as a data object and issuing commands in queries, complex drawings can be created quickly and cleanly.

As an additional bonus, there's no need to create a context variable!

Chaining syntax!

							$('#chainingCanvas')
							.drawArc({
								//Draw an arc!
							})
							.drawBezier({
								//Do some curves!
							})
							.drawLine({
								//Add a line!
							})
							.drawLine({
								//Ooh! Another line!
							}).drawText({
								//Toss some text on that!
							});
						

Look, mom! No context!

Chaining example!

Run a draw command chain!

Layering!

jCanvas introduces a layering API, allowing layers to be added, manipulated, and animated!

Layers can be grouped and manipulated as a group by their reference.

They can then be drawn, removed, and redrawn easily!

Drawing Layers!

Defining a new layer is as easy as adding 'layer: true' to any invocation of the draw function!

Layers can be assigned names for later reference by passing a name property. Layers without a name may still be referenced by their draw order.

Draw order is stored in an array, from which layers may be retrieved by their respective index.

						$('#layersCanvas').drawImage({
							layer: true,
							name: 'bub',
							source : "img/bub.png",
							x: 50, y: 201,
							scale: 3
						});
						

Either method may be used to retrieve this layer as a child of the canvas!

							$('#layersCanvas').getLayer('bub');
							$('#layersCanvas').getLayer('0');
						

Layering part one!

Draw the base layer!

Draw Bub! Draw Bob!

Clear the canvas!

Now that we've drawn some layers, let's change them!

Manipulating Layers!

To manipulate a layer, we simply call the 'setLayer' method and pass the layer's name or index as an argument!

Any attribute of a layer can be re-set using the setLayer and overwriting the previous property!

							$('#layersCanvas2').setLayer( 'bub', {
							  y: '-=30'
							})
							.drawLayers();
						

Manipulating Layers Example!

Move Bub up! Move Bub down!

Remove Bob! Bring Bob back!

Clear the canvas! Re-Draw the canvas!

Notice how layer properties remain saved when the canvas is cleared or the layers are redrawn!

No, really, that's not a bug, I just didn't know what to do with it.

Animation and Events!

Animation and event-based interaction with jCanvas is the same as animating with jQuery!

Just name a layer to create a reference to it, then invoke the animateLayer method on the target layer!

Making an animation!

Event listeners can be attached directly to layers in their property declarations, making interaction easy!

							$('#animationCanvas').drawImage({
								layer: true,
								name: 'bubble',
								source: "img/bubble.png",
								x: 150, y: 180,
								scale: 2,
								click: function(layer) {
								//bounce up and scale
									$(this).animateLayer('bubble', {
										y: '-=100',
										scale: 3
									}, 1000, function(layer) {
									//callback - bounce back and scale down
										$(this).animateLayer(layer, {
									  		y: '+=100',
									  		scale: 2
										},
									'slow', 'ease');
								});
							  }
							});
						

Animating!

Click the bubble to trigger the animation event!

The end.

If you're interested in knowing more, check out the documentation on the project's homepage:

jCanvas Home

Or, find it on github:

jCanvas on Git