It seems you use an obsolete browser. Update it to start drawing.
\"\n};\n\n\nDrawingBoard.Board.prototype = {\n\n /**\n * Canvas reset/resize methods: put back the canvas to its default values\n *\n * depending on options, can set color, size, background back to default values\n * and store the reseted canvas in webstorage and history queue\n *\n * resize values depend on the `enlargeYourContainer` option\n */\n\n reset: function (opts) {\n opts = $.extend({\n color: this.opts.color,\n size: this.opts.size,\n webStorage: true,\n history: true,\n background: false\n }, opts);\n\n this.setMode('pencil');\n\n if (opts.background) this.resetBackground(this.opts.background, false);\n\n if (opts.color) this.setColor(opts.color);\n if (opts.size) this.ctx.lineWidth = opts.size;\n\n this.ctx.lineCap = \"round\";\n this.ctx.lineJoin = \"round\";\n // this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.width);\n\n if (opts.webStorage) this.saveWebStorage();\n\n if (opts.history) this.saveHistory();\n\n this.blankCanvas = this.getImg();\n\n this.ev.trigger('board:reset', opts);\n },\n\n resetBackground: function (background, historize) {\n background = background || this.opts.background;\n historize = typeof historize !== \"undefined\" ? historize : true;\n var bgIsColor = DrawingBoard.Utils.isColor(background);\n var prevMode = this.getMode();\n this.setMode('pencil');\n this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.width);\n if (bgIsColor) {\n this.ctx.fillStyle = background;\n this.ctx.fillRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height);\n } else if (background)\n this.setImg(background);\n this.setMode(prevMode);\n if (historize) this.saveHistory();\n },\n\n resize: function () {\n this.dom.$controls.toggleClass('drawing-board-controls-hidden', (!this.controls || !this.controls.length));\n\n var canvasWidth, canvasHeight;\n var widths = [\n this.$el.width(),\n DrawingBoard.Utils.boxBorderWidth(this.$el),\n DrawingBoard.Utils.boxBorderWidth(this.dom.$canvasWrapper, true, true)\n ];\n var heights = [\n this.$el.height(),\n DrawingBoard.Utils.boxBorderHeight(this.$el),\n this.dom.$controls.height(),\n DrawingBoard.Utils.boxBorderHeight(this.dom.$controls, false, true),\n DrawingBoard.Utils.boxBorderHeight(this.dom.$canvasWrapper, true, true)\n ];\n var that = this;\n var sum = function (values, multiplier) { //make the sum of all array values\n multiplier = multiplier || 1;\n var res = values[0];\n for (var i = 1; i < values.length; i++) {\n res = res + (values[i] * multiplier);\n }\n return res;\n };\n var sub = function (values) {\n return sum(values, -1);\n }; //substract all array values from the first one\n\n if (this.opts.enlargeYourContainer) {\n canvasWidth = this.$el.width();\n canvasHeight = this.$el.height();\n\n this.$el.width(sum(widths));\n this.$el.height(sum(heights));\n } else {\n canvasWidth = sub(widths);\n canvasHeight = sub(heights);\n }\n\n this.dom.$canvasWrapper.css('width', canvasWidth + 'px');\n this.dom.$canvasWrapper.css('height', canvasHeight + 'px');\n\n this.dom.$canvas.css('width', canvasWidth + 'px');\n this.dom.$canvas.css('height', canvasHeight + 'px');\n\n this.canvas.width = canvasWidth;\n this.canvas.height = canvasHeight;\n },\n\n\n /**\n * Controls:\n * the drawing board can has various UI elements to control it.\n * one control is represented by a class in the namespace DrawingBoard.Control\n * it must have a $el property (jQuery object), representing the html element to append on the drawing board at initialization.\n *\n */\n\n initControls: function () {\n this.controls = [];\n if (!this.opts.controls.length || !DrawingBoard.Control) return false;\n for (var i = 0; i < this.opts.controls.length; i++) {\n var c = null;\n if (typeof this.opts.controls[i] == \"string\")\n c = new window['DrawingBoard']['Control'][this.opts.controls[i]](this);\n else if (typeof this.opts.controls[i] == \"object\") {\n for (var controlName in this.opts.controls[i]) break;\n c = new window['DrawingBoard']['Control'][controlName](this, this.opts.controls[i][controlName]);\n }\n if (c) {\n this.addControl(c);\n }\n }\n },\n\n //add a new control or an existing one at the position you want in the UI\n //to add a totally new control, you can pass a string with the js class as 1st parameter and control options as 2nd ie \"addControl('Navigation', { reset: false }\"\n //the last parameter (2nd or 3rd depending on the situation) is always the position you want to place the control at\n addControl: function (control, optsOrPos, pos) {\n if (typeof control !== \"string\" && (typeof control !== \"object\" || !control instanceof DrawingBoard.Control))\n return false;\n\n var opts = typeof optsOrPos == \"object\" ? optsOrPos : {};\n pos = pos ? pos * 1 : (typeof optsOrPos == \"number\" ? optsOrPos : null);\n\n if (typeof control == \"string\")\n control = new window['DrawingBoard']['Control'][control](this, opts);\n\n if (pos)\n this.dom.$controls.children().eq(pos).before(control.$el);\n else\n this.dom.$controls.append(control.$el);\n\n if (!this.controls)\n this.controls = [];\n this.controls.push(control);\n this.dom.$controls.removeClass('drawing-board-controls-hidden');\n },\n\n\n /**\n * History methods: undo and redo drawed lines\n */\n\n initHistory: function () {\n this.history = {\n values: [],\n position: 0\n };\n },\n\n saveHistory: function () {\n while (this.history.values.length > 30) {\n this.history.values.shift();\n this.history.position--;\n }\n if (this.history.position !== 0 && this.history.position < this.history.values.length) {\n this.history.values = this.history.values.slice(0, this.history.position);\n this.history.position++;\n } else {\n this.history.position = this.history.values.length + 1;\n }\n this.history.values.push(this.getImg());\n this.ev.trigger('historyNavigation', this.history.position);\n },\n\n _goThroughHistory: function (goForth) {\n if ((goForth && this.history.position == this.history.values.length) ||\n (!goForth && this.history.position == 1))\n return;\n var pos = goForth ? this.history.position + 1 : this.history.position - 1;\n if (this.history.values.length && this.history.values[pos - 1] !== undefined) {\n this.history.position = pos;\n this.setImg(this.history.values[pos - 1]);\n }\n this.ev.trigger('historyNavigation', pos);\n this.saveWebStorage();\n },\n\n goBackInHistory: function () {\n this._goThroughHistory(false);\n },\n\n goForthInHistory: function () {\n this._goThroughHistory(true);\n },\n\n\n /**\n * Image methods: you can directly put an image on the canvas, get it in base64 data url or start a download\n */\n\n setImg: function (src) {\n var ctx = this.ctx;\n var img = new Image();\n var oldGCO = ctx.globalCompositeOperation;\n img.onload = function () {\n ctx.globalCompositeOperation = \"source-over\";\n ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.width);\n ctx.drawImage(img, 0, 0);\n ctx.globalCompositeOperation = oldGCO;\n };\n img.src = src;\n },\n\n getImg: function () {\n return this.canvas.toDataURL(\"image/png\");\n },\n\n downloadImg: function () {\n var img = this.getImg();\n img = img.replace(\"image/png\", \"image/octet-stream\");\n window.location.href = img;\n },\n\n\n /**\n * WebStorage handling : save and restore to local or session storage\n */\n\n saveWebStorage: function () {\n if (window[this.storage]) {\n window[this.storage].setItem('drawing-board-' + this.id, this.getImg());\n this.ev.trigger('board:save' + this.storage.charAt(0).toUpperCase() + this.storage.slice(1), this.getImg());\n }\n },\n\n restoreWebStorage: function () {\n if (window[this.storage] && window[this.storage].getItem('drawing-board-' + this.id) !== null) {\n this.setImg(window[this.storage].getItem('drawing-board-' + this.id));\n this.ev.trigger('board:restore' + this.storage.charAt(0).toUpperCase() + this.storage.slice(1), window[this.storage].getItem('drawing-board-' + this.id));\n }\n },\n\n clearWebStorage: function () {\n if (window[this.storage] && window[this.storage].getItem('drawing-board-' + this.id) !== null) {\n window[this.storage].removeItem('drawing-board-' + this.id);\n this.ev.trigger('board:clear' + this.storage.charAt(0).toUpperCase() + this.storage.slice(1));\n }\n },\n\n _getStorage: function () {\n if (!this.opts.webStorage || !(this.opts.webStorage === 'session' || this.opts.webStorage === 'local')) return false;\n return this.opts.webStorage + 'Storage';\n },\n\n\n /**\n * Drop an image on the canvas to draw on it\n */\n\n initDropEvents: function () {\n if (!this.opts.droppable)\n return false;\n\n this.dom.$canvas.on('dragover dragenter drop', function (e) {\n e.stopPropagation();\n e.preventDefault();\n });\n\n this.dom.$canvas.on('drop', $.proxy(this._onCanvasDrop, this));\n },\n\n _onCanvasDrop: function (e) {\n e = e.originalEvent ? e.originalEvent : e;\n var files = e.dataTransfer.files;\n if (!files || !files.length || files[0].type.indexOf('image') == -1 || !window.FileReader)\n return false;\n var fr = new FileReader();\n fr.readAsDataURL(files[0]);\n fr.onload = $.proxy(function (ev) {\n this.setImg(ev.target.result);\n this.ev.trigger('board:imageDropped', ev.target.result);\n this.ev.trigger('board:userAction');\n this.saveHistory();\n }, this);\n },\n\n\n /**\n * set and get current drawing mode\n *\n * possible modes are \"pencil\" (draw normally), \"eraser\" (draw transparent, like, erase, you know), \"filler\" (paint can)\n */\n\n setMode: function (newMode, silent) {\n silent = silent || false;\n newMode = newMode || 'pencil';\n\n this.ev.unbind('board:startDrawing', $.proxy(this.fill, this));\n\n if (this.opts.eraserColor === \"transparent\")\n this.ctx.globalCompositeOperation = newMode === \"eraser\" ? \"destination-out\" : \"source-over\";\n else {\n if (newMode === \"eraser\") {\n if (this.opts.eraserColor === \"background\" && DrawingBoard.Utils.isColor(this.opts.background))\n this.ctx.strokeStyle = this.opts.background;\n else if (DrawingBoard.Utils.isColor(this.opts.eraserColor))\n this.ctx.strokeStyle = this.opts.eraserColor;\n } else if (!this.mode || this.mode === \"eraser\") {\n this.ctx.strokeStyle = this.color;\n }\n\n if (newMode === \"filler\")\n this.ev.bind('board:startDrawing', $.proxy(this.fill, this));\n }\n this.mode = newMode;\n if (!silent)\n this.ev.trigger('board:mode', this.mode);\n },\n\n getMode: function () {\n return this.mode || \"pencil\";\n },\n\n setColor: function (color) {\n var that = this;\n color = color || this.color;\n if (!DrawingBoard.Utils.isColor(color))\n return false;\n this.color = color;\n if (this.opts.eraserColor !== \"transparent\" && this.mode === \"eraser\") {\n var setStrokeStyle = function (mode) {\n if (mode !== \"eraser\")\n that.strokeStyle = that.color;\n that.ev.unbind('board:mode', setStrokeStyle);\n };\n this.ev.bind('board:mode', setStrokeStyle);\n } else\n this.ctx.strokeStyle = this.color;\n },\n\n /**\n * Fills an area with the current stroke color.\n */\n fill: function (e) {\n if (this.getImg() === this.blankCanvas) {\n this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.width);\n this.ctx.fillStyle = this.color;\n this.ctx.fillRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height);\n return;\n }\n\n var img = this.ctx.getImageData(0, 0, this.canvas.width, this.canvas.height);\n\n // constants identifying pixels components\n var INDEX = 0, X = 1, Y = 2, COLOR = 3;\n\n // target color components\n var stroke = this.ctx.strokeStyle;\n var r = parseInt(stroke.substr(1, 2), 16);\n var g = parseInt(stroke.substr(3, 2), 16);\n var b = parseInt(stroke.substr(5, 2), 16);\n\n // starting point\n var start = DrawingBoard.Utils.pixelAt(img, parseInt(e.coords.x, 10), parseInt(e.coords.y, 10));\n\n // no need to continue if starting and target colors are the same\n if (start[COLOR] === DrawingBoard.Utils.RGBToInt(r, g, b))\n return;\n\n // pixels to evaluate\n var queue = [start];\n\n // loop vars\n var pixel, x, y;\n var maxX = img.width - 1;\n var maxY = img.height - 1;\n\n while ((pixel = queue.pop())) {\n if (pixel[COLOR] === start[COLOR]) {\n img.data[pixel[INDEX]] = r;\n img.data[pixel[INDEX] + 1] = g;\n img.data[pixel[INDEX] + 2] = b;\n if (pixel[X] > 0) // west\n queue.push(DrawingBoard.Utils.pixelAt(img, pixel[X] - 1, pixel[Y]));\n if (pixel[X] < maxX) // east\n queue.push(DrawingBoard.Utils.pixelAt(img, pixel[X] + 1, pixel[Y]));\n if (pixel[Y] > 0) // north\n queue.push(DrawingBoard.Utils.pixelAt(img, pixel[X], pixel[Y] - 1));\n if (pixel[Y] < maxY) // south\n queue.push(DrawingBoard.Utils.pixelAt(img, pixel[X], pixel[Y] + 1));\n }\n }\n\n this.ctx.putImageData(img, 0, 0);\n },\n\n\n /**\n * Drawing handling, with mouse or touch\n */\n\n initDrawEvents: function () {\n this.isDrawing = false;\n this.isMouseHovering = false;\n this.coords = {};\n this.coords.old = this.coords.current = this.coords.oldMid = {x: 0, y: 0};\n\n this.dom.$canvas.on('mousedown touchstart', $.proxy(function (e) {\n this._onInputStart(e, this._getInputCoords(e));\n }, this));\n\n this.dom.$canvas.on('mousemove touchmove', $.proxy(function (e) {\n this._onInputMove(e, this._getInputCoords(e));\n }, this));\n\n this.dom.$canvas.on('mousemove', $.proxy(function (e) {\n\n }, this));\n\n this.dom.$canvas.on('mouseup touchend', $.proxy(function (e) {\n this._onInputStop(e, this._getInputCoords(e));\n }, this));\n\n this.dom.$canvas.on('mouseover', $.proxy(function (e) {\n this._onMouseOver(e, this._getInputCoords(e));\n }, this));\n\n this.dom.$canvas.on('mouseout', $.proxy(function (e) {\n this._onMouseOut(e, this._getInputCoords(e));\n\n }, this));\n\n $('body').on('mouseup touchend', $.proxy(function (e) {\n this.isDrawing = false;\n }, this));\n\n if (window.requestAnimationFrame) requestAnimationFrame($.proxy(this.draw, this));\n },\n\n draw: function () {\n //if the pencil size is big (>10), the small crosshair makes a friend: a circle of the size of the pencil\n //todo: have the circle works on every browser - it currently should be added only when CSS pointer-events are supported\n //we assume that if requestAnimationFrame is supported, pointer-events is too, but this is terribad.\n if (window.requestAnimationFrame && this.ctx.lineWidth > 10 && this.isMouseHovering) {\n this.dom.$cursor.css({width: this.ctx.lineWidth + 'px', height: this.ctx.lineWidth + 'px'});\n var transform = DrawingBoard.Utils.tpl(\"translateX({{x}}px) translateY({{y}}px)\", {\n x: this.coords.current.x - (this.ctx.lineWidth / 2),\n y: this.coords.current.y - (this.ctx.lineWidth / 2)\n });\n this.dom.$cursor.css({'transform': transform, '-webkit-transform': transform, '-ms-transform': transform});\n this.dom.$cursor.removeClass('drawing-board-utils-hidden');\n } else {\n this.dom.$cursor.addClass('drawing-board-utils-hidden');\n }\n\n if (this.isDrawing) {\n var currentMid = this._getMidInputCoords(this.coords.current);\n this.ctx.beginPath();\n this.ctx.moveTo(currentMid.x, currentMid.y);\n this.ctx.quadraticCurveTo(this.coords.old.x, this.coords.old.y, this.coords.oldMid.x, this.coords.oldMid.y);\n this.ctx.stroke();\n\n this.coords.old = this.coords.current;\n this.coords.oldMid = currentMid;\n }\n\n if (window.requestAnimationFrame) requestAnimationFrame($.proxy(function () {\n this.draw();\n }, this));\n },\n\n _onInputStart: function (e, coords) {\n this.coords.current = this.coords.old = coords;\n this.coords.oldMid = this._getMidInputCoords(coords);\n this.isDrawing = true;\n\n if (!window.requestAnimationFrame) this.draw();\n\n this.ev.trigger('board:startDrawing', {e: e, coords: coords});\n e.preventDefault();\n },\n\n _onInputMove: function (e, coords) {\n this.coords.current = coords;\n this.ev.trigger('board:drawing', {e: e, coords: coords});\n\n if (!window.requestAnimationFrame) this.draw();\n\n e.preventDefault();\n },\n\n _onInputStop: function (e, coords) {\n if (this.isDrawing && (!e.touches || e.touches.length === 0)) {\n this.isDrawing = false;\n\n this.saveWebStorage();\n this.saveHistory();\n\n this.ev.trigger('board:stopDrawing', {e: e, coords: coords});\n this.ev.trigger('board:userAction');\n e.preventDefault();\n }\n },\n\n _onMouseOver: function (e, coords) {\n this.isMouseHovering = true;\n this.coords.old = this._getInputCoords(e);\n this.coords.oldMid = this._getMidInputCoords(this.coords.old);\n\n this.ev.trigger('board:mouseOver', {e: e, coords: coords});\n },\n\n _onMouseOut: function (e, coords) {\n this.isMouseHovering = false;\n\n this.ev.trigger('board:mouseOut', {e: e, coords: coords});\n },\n\n _getInputCoords: function (e) {\n e = e.originalEvent ? e.originalEvent : e;\n var x, y;\n if (e.touches && e.touches.length == 1) {\n x = e.touches[0].pageX;\n y = e.touches[0].pageY;\n } else {\n x = e.pageX;\n y = e.pageY;\n }\n return {\n x: x - this.dom.$canvas.offset().left,\n y: y - this.dom.$canvas.offset().top\n };\n },\n\n _getMidInputCoords: function (coords) {\n return {\n x: this.coords.old.x + coords.x >> 1,\n y: this.coords.old.y + coords.y >> 1\n };\n }\n};\n\nDrawingBoard.Control = function (drawingBoard, opts) {\n this.board = drawingBoard;\n this.opts = $.extend({}, this.defaults, opts);\n\n this.$el = $(document.createElement('div')).addClass('drawing-board-control');\n if (this.name)\n this.$el.addClass('drawing-board-control-' + this.name);\n\n this.board.ev.bind('board:reset', $.proxy(this.onBoardReset, this));\n\n this.initialize.apply(this, arguments);\n return this;\n};\n\nDrawingBoard.Control.prototype = {\n\n name: '',\n\n defaults: {},\n\n initialize: function () {\n\n },\n\n addToBoard: function () {\n this.board.addControl(this);\n },\n\n onBoardReset: function (opts) {\n\n }\n\n};\n\n//extend directly taken from backbone.js\nDrawingBoard.Control.extend = function (protoProps, staticProps) {\n var parent = this;\n var child;\n if (protoProps && protoProps.hasOwnProperty('constructor')) {\n child = protoProps.constructor;\n } else {\n child = function () {\n return parent.apply(this, arguments);\n };\n }\n $.extend(child, parent, staticProps);\n var Surrogate = function () {\n this.constructor = child;\n };\n Surrogate.prototype = parent.prototype;\n child.prototype = new Surrogate();\n if (protoProps) $.extend(child.prototype, protoProps);\n child.__super__ = parent.prototype;\n return child;\n};\nDrawingBoard.Control.Color = DrawingBoard.Control.extend({\n name: 'colors',\n\n initialize: function () {\n this.initTemplate();\n\n var that = this;\n this.$el.on('click', '.drawing-board-control-colors-picker', function (e) {\n var color = $(this).attr('data-color');\n that.board.setColor(color);\n that.$el.find('.drawing-board-control-colors-current')\n .css('background-color', color)\n .attr('data-color', color);\n\n that.board.ev.trigger('color:changed', color);\n that.$el.find('.drawing-board-control-colors-rainbows').addClass('drawing-board-utils-hidden');\n\n e.preventDefault();\n });\n\n this.$el.on('click', '.drawing-board-control-colors-current', function (e) {\n that.$el.find('.drawing-board-control-colors-rainbows').toggleClass('drawing-board-utils-hidden');\n e.preventDefault();\n });\n\n $('body').on('click', function (e) {\n var $target = $(e.target);\n var $relatedButton = $target.hasClass('drawing-board-control-colors-current') ? $target : $target.closest('.drawing-board-control-colors-current');\n var $myButton = that.$el.find('.drawing-board-control-colors-current');\n var $popup = that.$el.find('.drawing-board-control-colors-rainbows');\n if ((!$relatedButton.length || $relatedButton.get(0) !== $myButton.get(0)) && !$popup.hasClass('drawing-board-utils-hidden'))\n $popup.addClass('drawing-board-utils-hidden');\n });\n },\n\n initTemplate: function () {\n var tpl = '