html 5 canvas flash,GitHub - dkln/canvas_library: HTML 5 Canvas library (a flash alternative) writte...

HTML Canvas Javascript Library

About canvas_library

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.

Getting started

A very simple demo:

HTML:

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

About DisplayContainer's

A DisplayContainer is an object that can hold other graphical objects. These graphical objects can be nested in eachother. Just like

's in

'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.

Drawing shapes

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

Loading and drawing bitmaps

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.

Animating objects

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()

Mouse interaction

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 }

Pixel fun

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

Development

Want to extend the library? If you are using rvm that should be a breeze!

bundle install

guard

License and credits

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.