Skip to content
This repository

HTML 5 Canvas library (a flash alternative) written in Coffeescript

branch: master
README.rdoc

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:

<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

About DisplayContainer's

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.

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.

Something went wrong with that request. Please try again.