Canvas Engne

by Peter Johnson

HTML

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>Play</title>
    <script type="text/javascript" src="coffeescript.js"></script>
  </head>
  <body>
  </body>
</html>

CoffeeScript

# ---------------------

    class Library

      @assets = {}

      @create: (name,props) =>

        canvas = Library.createCanvas props
        Library.assets[name] = canvas

        return canvas

      @copy: (name) =>
        asset = Library.get name
        throw new Error 'Cannot copy, invalid asset' unless asset?
        canvas = Library.createCanvas asset
        canvas.getContext('2d').drawImage asset, 0, 0
        return canvas

      @get: (name) => return Library.assets[name]

      @createCanvas: (props) ->
        throw new Error 'Invalid Props' unless props.width? and props.height?
        canvas = document.createElement 'canvas'
        canvas.width = props.width
        canvas.height = props.height
        return canvas

  # ---------------------

    class View

      constructor: (props) ->

        @x = 0
        @y = 0

        @setCanvas Library.createCanvas props

      setCanvas: (canvas) =>

        @canvas = canvas
        @stage = @canvas.getContext '2d'

      onEnterFrame: () =>
      render: () =>
      clear: () => @stage.clearRect -(@canvas.width/2), -(@canvas.height/2),
                                     (@canvas.width*2),  (@canvas.height*2)

  # ---------------------

    class CompositeView extends View

      constructor: (props) ->

        super(props)
        @children = {}

      appendChild: (name,view) =>

        if view? then @children[name] = view
        return @children[name] if @children[name]?

      render: =>

        @clear()

        for name, view of @children
          view.render()
          @stage.drawImage view.canvas, view.x-(view.canvas.width/2), view.y-(view.canvas.height/2)

      onEnterFrame: =>

        for name, view of @children
          view.onEnterFrame()

  # ---------------------

    class RotationSprite extends View

      render: () =>

        asset = Library.copy 'shape'
        console.log asset.width, asset.height
        console.log @canvas.width, @canvas.height

       ...