added jshint grunt task

.gitignore

@@ -0,0 +1,27 @@
+.idea/
+
+# Logs
+logs
+*.log
+
+# Runtime data
+pids
+*.pid
+*.seed
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directory
+# Deployed apps should consider commenting this line out:
+# see https://npmjs.org/doc/faq.html#Should-I-check-my-node_modules-folder-into-git
+node_modules

Gruntfile.js

@@ -0,0 +1,13 @@
+module.exports = function(grunt) {
+  grunt.initConfig({
+      jshint: {
+          options: {
+              reporter: require('jshint-stylish')
+          },
+          target: ['ribbon.js']
+      }
+  });
+
+  grunt.loadNpmTasks('grunt-contrib-jshint');
+  grunt.registerTask('default', ['jshint']);
+};

package.json

@@ -0,0 +1,16 @@
+{
+  "name": "canvas-realistic-pen",
+  "version": "0.0.1",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/apedyashev/canvas-realistic-pen"
+  },
+  "devDependencies": {
+    "grunt": "~0.4.1",
+    "grunt-contrib-jshint": "~0.10.0",
+    "jshint-stylish": "~0.1.3"
+  },
+  "engines": {
+    "node": ">=0.10.28"
+  }
+}

ribbon.js

@@ -18,7 +18,6 @@ ribbon.prototype = {
     init: function( canvas ) {
         var scope = this, 
             container = canvas.parentNode;
-        console.log(container.offsetHeight);
 
         canvas.width    = container.offsetWidth ? container.offsetWidth : this.canvasDefWidth;
         canvas.height   = container.offsetHeight ? container.offsetHeight : this.canvasDefHeight;
@@ -33,15 +32,21 @@ ribbon.prototype = {
         this.mouseY = this.canvas.height / 2;
         this.painters = [];
         for (var i = 0; i < 50; i++) {
-            this.painters.push({ dx: this.canvas.width / 2, dy: this.canvas.height / 2, ax: 0, ay: 0, div: 0.1, ease: 0.5});//Math.random() * 0.1 + 0.2});
+            this.painters.push({ 
+                dx: this.canvas.width / 2, 
+                dy: this.canvas.height / 2, 
+                ax: 0, 
+                ay: 0, 
+                div: 0.1, 
+                ease: 0.5
+            });//Math.random() * 0.1 + 0.2});
         }
         this.interval = setInterval(update, 1000/60);
         function update() {
             var i;
             scope.context.lineWidth = scope.brushSize;            
             scope.context.strokeStyle =  "rgba(" + scope.penColor[0] + ", " + scope.penColor[1] + ", " + scope.penColor[2] + ", " + 0.05 * scope.brushPressure + ")";
-            for (i = 0; i < scope.painters.length; i++)
-            {
+            for (i = 0; i < scope.painters.length; i++) {
                 scope.context.beginPath();
                 scope.context.moveTo(scope.painters[i].dx, scope.painters[i].dy);        
                 scope.painters[i].dx -= scope.painters[i].ax = (scope.painters[i].ax + (scope.painters[i].dx - scope.mouseX) * scope.painters[i].div) * scope.painters[i].ease;
@@ -58,7 +63,7 @@ ribbon.prototype = {
 
     strokeStart: function(mouseX, mouseY) {
         this.mouseX = mouseX;
-        this.mouseY = mouseY
+        this.mouseY = mouseY;
         for (var i = 0; i < this.painters.length; i++) {
             this.painters[i].dx = mouseX;
             this.painters[i].dy = mouseY;
@@ -83,17 +88,14 @@ ribbon.prototype = {
                 window.addEventListener('mousemove', onCanvasMouseMove, false);
                 window.addEventListener('mouseup',   onCanvasMouseUp, false);
             },
-
             onCanvasMouseMove = function(event) {    
                 scope.stroke(event.clientX, event.clientY);
             },
-
             onCanvasMouseUp = function() {
                 scope.strokeEnd();
                 window.removeEventListener('mousemove', onCanvasMouseMove, false);
                 window.removeEventListener('mouseup',   onCanvasMouseUp,   false);
             },
-
             onCanvasTouchStart = function(event) {
                 if(event.touches.length == 1) {
                     event.preventDefault();
@@ -104,24 +106,22 @@ ribbon.prototype = {
                     window.addEventListener('touchend', onCanvasTouchEnd, false);
                 }
             },
-
             onCanvasTouchMove = function(event) {
                 if(event.touches.length == 1) {
                     event.preventDefault();
                     scope.stroke( event.touches[0].pageX, event.touches[0].pageY );
                 }
             },
-
             onCanvasTouchEnd = function(event) {
-                if(event.touches.length == 0) {
+                if(event.touches.length === 0) {
                     event.preventDefault();
 
                     scope.strokeEnd();
 
                     window.removeEventListener('touchmove', onCanvasTouchMove, false);
                     window.removeEventListener('touchend', onCanvasTouchEnd, false);
                 }
-            }
+            };
 
         this.canvas.addEventListener('mousedown', onCanvasMouseDown, false);
         this.canvas.addEventListener('touchstart', onCanvasTouchStart, false);