Dependency Versions

This post was built with Ember.js 1.0.0pre4, handlebars RC2, and jQuery 1.9.1

Understand The Goal

What is Happening Here ?

We are going to use Ember.View to wrap an HTML5 <canvas> element. This will allow us to use the canvas API to draw shapes/data/whatever while utilizing Ember’s data structures, route handlers, and other bells/whistles that make it so great.

See Into the Future !

Cheat and check out this Completed Fiddle Or build your Own Fiddle as you learn.

Write Minimally Viable Ember Application (that does something)

1
2
3

<script type="text/x-handlebars">
  Text to demonstrate App is functioning
</script>

1

window.App = Em.Application.create()

Where’s the Router ? :-/

Ember generates a default router for us. We are not changing routes so no need to explicitly declare it ourselves.

Why Define The Template ? :-/

Primarily, we demonstrate our app’s validity. Secondarily, we are going to modify this to be more useful in the next section.

Construct Canvas View, Modify application Template, Add CSS Border

1
2
3
4
5
6
7
8
9
10

window.App = Em.Application.create()

App.Canvas = Em.View.extend
  #attributes used to define and render the canvas 
  tagName: "canvas"
  attributeBindings: ['height', 'width']
  height: 300
  width: 300
  color1: "blue"
  color2: "orange"

1
2
3
4

<script type="text/x-handlebars">
  Text to demonstrate App is functioning
  {{ view 'App.Canvas' }}
</script>

1
2
3

canvas {
  border: 5px solid black;
}

What is the Meaning of “view App.Canvas” ? :-/

This will create a new instance of the view App.Canvas and render it into the application template. The view has the same context as the current template (in this case Ember has automagically generated applicationController).

And the Attributes ? :-|

AttributeBindings is an array of strings that references other attributes on the view. It creates HTML attributes by those attribute names with the values stored in each attribute. If the attributes change on the view, they will also change in the HTML. We are using height and width in this manner and the resulting output is shown below.

1

<canvas height="300" width="300"></canvas>

Attributes color1 and color2 are going to be used by our application to determine what colors to paint our canvas. More on that to come…

Hook Into DOM Insertion and Design a Fill Method

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

window.App = Em.Application.create()

App.Canvas = Em.View.extend
  #attributes used to define and render the canvas
  tagName: "canvas"
  attributeBindings: ['height', 'width']
  height: 300
  width: 300
  color1: "blue"
  color2: "orange"

  #this method is fired when this view's element is inserted in the DOM
  didInsertElement: () ->
    @_super()
    @fill()

  fill: () ->
    #local variables for clarity
    halfHeight = @get('height') / 2
    width = @get "width"
    c1 = @get "color1"
    c2 = @get "color2"

    #draw canvas parameters and methods (basic canvas api)
    ctx = el.getContext "2d"
    ctx.fillStyle = c1
    ctx.fillRect 0, 0, width, halfHeight
    ctx.fillStyle = c2
    ctx.fillRect 0, halfHeight, width, halfHeight

What Are These New Methods ? (╯°□°)╯︵ ┻━┻

didInsertElement is a method baked into Ember.View that fires when the view’s element (in our case, canvas) is inserted into the DOM. This method may be overridden to call our fill method initially.

fill is a method that we have defined that uses the low-level canvas drawing API to color half the canvas orange and half the canvas blue. You can easily read about these methods on MDN or a number of other references.

Draw Using Any Canvas API You Prefer ! ┬─┬ ノ(゜-゜ノ)

You could easily load one of many, many Canvas 2d Libraries and use them to draw whatever you want in reaction to DOM events, user interaction, or even animations.

Tell Me More About this…Event Handling ! :-)

We can easily use the browser’s events such as click, doubleClick, mouseEnter etc to bind functions on our view to those events. Ember provides method hooks for these events with obvious names. A complete list of these is found Here.

I Hold Tight To Your Hand As We Step Into This Brave New World

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

window.App = Em.Application.create()

App.Canvas = Em.View.extend
  #attributes used to define and render the canvas
  tagName: "canvas"
  attributeBindings: ['height', 'width']
  height: 300
  width: 300
  color1: "blue"
  color2: "orange"

  #this method is fired when this view's element is inserted in the DOM
  didInsertElement: () ->
    @_super()
    @fill()

  fill: () ->
    #local variables for clarity
    halfHeight = @get('height') / 2
    width = @get "width"
    c1 = @get "color1"
    c2 = @get "color2"

    #draw canvas parameters and methods (basic canvas api)
    ctx = el.getContext "2d"
    ctx.fillStyle = c1
    ctx.fillRect 0, 0, width, halfHeight
    ctx.fillStyle = c2
    ctx.fillRect 0, halfHeight, width, halfHeight

    #click event handler
    click: (event)->
      c1 = @get "color1"
      c2 = @get "color2"
      @set "color1", c2
      @set "color2", c1
      @fill()

Click the Box Repeatedly To Feel that Illini Pride

Our click event handles all browser click events that target our canvas and swaps the colors before calling fill again.
Consider what else you might do with such an event handler:
mouseMove could be used to capture mouse coordinates and draw directly onto the canvas
keyDown could be used to capture keys and output printed text in the canvas
etc etc etc
If you make an interesting feature and would like to share your fiddle, shoot me a tweet and I’ll append your fiddle to this blog post for others to learn from.

En Futuro

Explore Options for Nested Canvas Elements

Nested canvas elements may be used as overlays on top of classical HTML elements which allows you to blend per-pixel drawing with standard HTML/CSS skills.

Explore Options for Using Advanced Canvas APIs

Advaned canvas APIs offer greater flexibility and higher-level abstractions useful for quickly producing impressive results.

Explore Options for Rendering Using WebGL (2d/3d)

WebGL is the bees knees and Ember.js has potential to weave together the rendering power of WebGL with Ember’s data management systems. Ermagerd…werb GR ER