Very basic canvas displaylist

gistfile1.coffee

class Node
  
  constructor: (@renderer) ->
    @customMatrix = null
    @rotation = 0
    @scaleX = 1
    @scaleY = 1
    @x = 0
    @y = 0
    @children = []
    
  addChild: (node) ->
    @children.push(node)
    
  render: (g) ->
    g.save()
    
    if @x != 0 or @y != 0
      g.transform(1, 0, 0, 1, @x, @y)
    
    if @rotation != 0
      ca = Math.cos @rotation
      sa = Math.sin @rotation
      g.transform(ca, sa, -sa, ca, 0, 0)
      
    if @scaleX != 1 or @scaleY != 1
      g.transform(@scaleX, 0, 0, @scaleY, 0, 0)
    
    @renderer?(g)
    
    for child in @children
      child.render(g)
    
    g.restore()
    

# g should be a canvas 2d context
renderTestScene = (g) ->

  boxRenderer = (g) ->
    g.fillStyle = "#fff"
    g.fillRect(0, 0, 50, 50)

  root = new Node()
  
  box1 = new Node(boxRenderer )
  box1.x = 50
  box1.y = 50
  box1.rotation = Math.PI / 4
  root.addChild(box1)
  
  box2 = new Node(boxRenderer)
  box2.x = 50
  box2.y = 0
  box2.rotation = -Math.PI / 4
  box2.scaleX = 2
  box2.scaleY = 2
  box1.addChild(box2)
  
  root.render(g)