canvas_library is written in CoffeeScript. canvas_library gives you easy drawing, object and animation management for the HTML 5 Canvas element. The API itself looks a lot like the Flash drawing API.
A very simple demo:
HTML:
<canvas id="test_canvas" width="320" height="240"></canvas>
Coffeescript:
run = ->
# this is the screen
stage = new CanvasLibrary.Stage('test_canvas')
# create a rectangle
someShape = new CanvasLibrary.Shape()
someShape.x = 0
someShape.y = 0
someShape.fillStyle 'rgba(0, 0, 0, 1)'
someShape.fillRect 0, 0, 50, 50
# create another rectangle
otherShape = new CanvasLibrary.Shape()
otherShape.alpha = .5
otherShape.fillStyle 'rgba(255, 0, 0, 1)'
otherShape.fillRect 0, 0, 25, 25
otherShape.x = 10
otherShape.y = 10
otherShape.scaleX = 1
otherShape.scaleY = 1
stage.addChild someShape
stage.addChild otherShape
# setup renderer and connect it to the stage and run at 25 fps
renderer = new CanvasLibrary.Renderer(stage, 25)
renderer.run()
# tween some stuff
Tween.to someShape, 5000, { x: 100, y: 100 }
Tween.to otherShape, 20000, { rotation: 180, x: 320, y: 200, alpha: 1, scaleX: 1, scaleY: 1 }
window.onload = run
A DisplayContainer is an object that can hold other graphical objects. These graphical objects can be nested in eachother. Just like <div>‘s in <div>’s.
The x and y position of graphical objects are relative and are translated to canvas x and y positions during the rendering process. This rendering process can be triggered by calling the draw function on any displaycontainer.
Nesting objects:
obj = new CanvasLibrary.Shape() obj.x = 10 obj.y = 10 otherObj = new CanvasLibrary.Shape() otherObj.x = 0 otherObj.y = 0 obj.addChild otherObj yetAnotherObj = new CanvasLibrary.Shape() yetAnotherObj.x = 0 yetAnotherObj.y = 0 otherObj.addChild yetAnotherObj stage.render
Note: The stage is the main screen. This object also acts as an DisplayContainer.
The drawing API is almost the same as the Canvas drawing API. If you want to draw paths to the canvas, use the Shape class.
Drawing rectangles:
stage = new CanvasLibrary.Stage("the_screen"); rect = new CanvasLibrary.Shape() rect.x = 0 rect.y = 0 rect.fillStyle "rgb(255, 0, 0, 1)" rect.fillRect 0, 0, 25, 25 rect.fillStyle "rgb(0, 255, 0, 0.5)" rect.fillRect 10, 10, 25, 25 stage.addChild rect stage.render
Bitmaps can easily be loaded with the canavaslib.StackedLoader class. The StackedLoader manages all your assets so you can preload images or audio assets before rendering all your stuff.
screen = new CanvasLibrary.Stage("the_screen")
CanvasLibrary.StackedLoader.add "image_id", "image", "logo.png"
CanvasLibrary.StackedLoader.add "another_image", "image", "foo.png"
CanvasLibrary.StackedLoader.add "and_another_one", "image", "bar.png"
CanvasLibrary.StackedLoader.load =>
bitmap = CanvasLibrary.StackedLoader.get "image_id"
screen.addChild bitmap
screen.render
The load function adds an asset to the loadstack. The start function triggers the StackedLoader to load all assets that are placed in the load stack.
You can use the Tween class to tween objects between two points.
...
renderer = new CanvasLibrary.Renderer(stage);
renderer.run 25
...
Tween.to someShape, 5000, { x: 100, y: 100 }
The above example will tween the x & y property of object someShape to coordinate 100 in 5 secs.
Note: to use the tween engine, you’ll need to set up a renderer with Renderer or call the Tween update method yourself:
Tween.update()
You have a couple of mouse events to your disposal:
-
onMouseOver
-
onMouseOut
Example of tween and mouse interaction:
shape.onMouseOver = =>
Tween.to shape, 500, { alpha: .5 }
shape.onMouseOut = =>
Tween.to shape, 500, { alpha: 1 }
pixels = new CanvasLibrary.PixelSprite() pixels.drawPixel 0, 0, 'rgba(128, 128, 128, 1)' pixels.drawPixel 1, 0, 'rgba(128, 128, 128, 1)' pixels.drawPixel 2, 0, 'rgba(128, 128, 128, 1)' pixels.drawPixel 0, 1, 'rgba(128, 128, 128, 1)' pixels.drawPixel 0, 2, 'rgba(128, 128, 128, 1)' pixels.drawPixel 0, 3, 'rgba(128, 128, 128, 1)' pixels.submitPixel() screen.addChild pixels
Or even better, load a retro sprite file!
CanvasLibrary.StackedLoader.add 'logo', 'sprite', 'logo.spr' CanvasLibrary.StackedLoader.load => logo = CanvasLibrary.StackedLoader.get 'logo' screen.addChild logo
Want to extend the library? If you are using rvm that should be a breeze!
bundle install guard
Use it and have fun with it! Comments, cakes and hugs are welcome! Just stick to the license!
Copyright 2010 - 2011, Diederick Lawson - Altovista. Released under the FreeBSD license.