Add Canvas Render.

res/app/components/stf/screen/image-render/canvas/index.js

@@ -0,0 +1,16 @@
+function CanvasRender(options, canvasElement) {
+  this.options = options
+  this.context = canvasElement.getContext('2d')
+}
+
+CanvasRender.prototype.draw = function (image) {
+  this.context.drawImage(image, 0, 0)
+}
+
+CanvasRender.prototype.clear = function () {
+  var width = 300
+  var height = 300
+  ctx.clearRect(0, 0, width, height)
+}
+
+module.exports = CanvasRender

res/app/components/stf/screen/image-render/index.js

@@ -0,0 +1,18 @@
+var canvasRender = require('./canvas')
+var webGLRender = require('./webgl')
+var canvasElement;
+
+function ImageRender(options) {
+  this.options = options
+  this.render = new canvasRender();
+}
+
+ImageRender.prototype.draw = function (image) {
+  this.render.draw(image)
+}
+
+ImageRender.prototype.clear = function () {
+  this.render.clear()
+}
+
+module.exports = ImageRender

res/app/components/stf/screen/image-render/webgl/index.js

@@ -0,0 +1,15 @@
+// Based on http://jsperf.com/canvas-drawimage-vs-webgl-drawarrays
+
+function WebGLRender(options) {
+  this.options = options
+}
+
+WebGLRender.prototype.draw = function (image) {
+
+}
+
+WebGLRender.prototype.clear = function () {
+
+}
+
+module.exports = WebGLRender

res/app/components/stf/screen/screen-directive.js

@@ -1,3 +1,5 @@
+var imageRender = require('./image-render')
+
 module.exports = function DeviceScreenDirective($document, ScalingService, $rootScope) {
   return {
     restrict: 'E',