rendered paste bodydefine([ 'constants', 'components', 'text!templates/spritesheet.tpl'], function(c, components, template) { var Spritesheet = Backbone.View.extend({ template: _.template(template), prepared: false, events: { }, initialize: function() { pubsub.on("filereader.loaded", this._changeFile, this); this.model.bind('change:file', this.render, this); }, prepareElements: function() { this.playground = this.$el.find("#playground").get(0); this.canvas = this.$el.find("#canvas").get(0); this.context = this.canvas.getContext('2d'); this.cwidth = this.canvas.width; this.cheight = this.canvas.height; this.buffer = null; this.bctx = null; this.spritesheet = null; this.prepared = true; }, render: function() { this.$el.html( this.template() ); return this; }, prepareBuffers: function(file) { var self = this; var spritesheet = new Image(); spritesheet.src = file; spritesheet.onload = function() { self.cwidth = self.canvas.width = this.width; self.cheight = self.canvas.height = this.height; self.buffer = document.createElement('canvas'); self.bctx = self.buffer.getContext('2d'); self.buffer.width = self.cwidth; self.buffer.height = self.cheight; self.bctx.drawImage(this, 0, 0); self._displayFile(); } }, _changeFile: function(event) { var file = event.target.result; this.model.set({ 'file': file }); if (!this.prepared) this.prepareElements(); this.prepareBuffers(file); }, _displayFile: function() { this.context.clearRect( 0, 0, this.cwidth, this.cheight ); this.context.drawImage( this.buffer, 0, 0 ); } }); return Spritesheet;});