Shapes

Ideas

@@ -0,0 +1,19 @@
+Current
+=======
+Eraser
+Shapes
+Fill
+Pen
+Chalk
+Board Size
+Import Images
+
+Server
+======
+Board Themes
+Share
+
+Later
+=====
+KB Shortcuts
+Zoom

Mobile/js/functions.js

@@ -3,7 +3,7 @@
 
 function sizeAndPos() {
 
-  var data = window.points.history[window.points.history.last].data || c.getImageData(0,0, $c.width(), $c.height());
+  var data = c.getImageData(0,0, $c.width(), $c.height());
   var w = $(window).width(),
       h = $(window).height() - 53;
   $c.attr('width', w * window.devicePixelRatio);
@@ -16,10 +16,11 @@ function sizeAndPos() {
   c.putImageData(data, 0, 0);
 }
 
-function relative(x,y) {
+function relative(x,y, el) {
+  var el = el || $c[0];
   return {
-    x : x*window.devicePixelRatio,
+    x : x*window.devicePixelRatio - el.offset().left,
-    y : (y - 53) * window.devicePixelRatio
+    y : (y - 53) * window.devicePixelRatio - el.offset().top
   }
 }
 
@@ -47,6 +48,38 @@ function draw(x1, y1, x2, y2, opts, overlay) {
   if( opts.fill ) c.fill();
 }
 
+function shape(opts, overlay) {
+  if(overlay) var c = window.o;
+  else var c = window.c;
+  c.beginPath();
+  c.fillStyle = opts.color || settings.color;
+  switch(opts.type) {
+  
+    case 'circle': {
+      c.arc(opts.x, opts.y, opts.radius, 0, 2*Math.PI);
+      break;
+    }
+    case 'rectangle': {
+      c.rect(opts.x, opts.y, opts.width, opts.height);
+      break;
+    }
+    case 'square': {
+      c.rect(opts.x, opts.y, opts.width, opts.width);
+      break;
+    }
+    case 'triangle': {
+      c.fillStyle = opts
+      c.moveTo(opts.x1, opts.y1);
+      c.lineTo(opts.x2, opts.y2);
+      c.lineTo(opts.x3, opts.y3);
+      c.lineTo(opts.x1, opts.y1);
+    }
+  
+  }
+  c.fill();
+}
+
+
 function undo() {
   var history = window.points.history;
   if( history.last > 1 ) {
@@ -106,6 +139,7 @@ function startPoint(x, y) {
         start : old.start || {x: x, y: y},
         type : settings.type
       }
+  // Line
   if( old.type !== 'line' && current.type == 'line' ) {
     window.o.beginPath();
     window.o.fillStyle = 'red';
@@ -121,6 +155,12 @@ function startPoint(x, y) {
       draw(old.x, old.y, x, y);
   }
 
+  // Shapes
+
+  if( old.type !== 'shape' && current.type == 'shape' ) {
+    settings.shape.
+  }
+
   var thresholds = window.mobile ? [10, 5] : [5, 2];
   if( points.length > 1 && ((start && threshold(start.x, start.y, x, y, thresholds[0])) || threshold(old.x, old.y, x, y, thresholds[1])) ) {
     window.active = false;

Web/index.html

@@ -71,6 +71,13 @@
               </div>
             </div>
           </div>
+          
+          <div class='shape hidden'>
+            <p class='icon-settings'>Shape</p>
+            <button id='setshape'>Type<span>Circle</span></button>
+          <div>
+        </div>
+        </div>
       </div>
       <div class='bottom'>
         <button id='clear' class='icon-clear'>Clear</button>
@@ -85,10 +92,11 @@
       <section class='scrollable'>
         <h1>Brush Type</h1>
         <ol role='listbox'>
-          <li aria-selected='true'><label><span>Sketch</span></label></li>
+          <li aria-selected='true' data-target='sketch'><label><span>Sketch</span></label></li>
-          <li><label><span>Fur</span></label></li>
+          <li data-target='fur'><label><span>Fur</span></label></li>
-          <li><label><span>Pen</span></label></li>
+          <li data-target='pencil'><label><span>Pencil</span></label></li>
-          <li><label><span>Line</span></label></li>
+          <li data-target='line'><label><span>Line</span></label></li>
+          <li data-target='shape'><label><span>Shape</span></label></li>
           <!--<li><label><span>Eraser</span></label></li>-->
         </ol>
       </section>
@@ -125,6 +133,22 @@
       </menu>
     </form>
 
+    <form role='dialog' data-type='value-selector' id='shape' class='hidden single'>
+      <section class='scrollable'>
+        <h1>Shape Type</h1>
+        <ol role='listbox'>
+          <li aria-selected='true' data-target='shape'><label><span>Circle</span></label></li>
+          <li data-target='shape'><label><span>Rectangle</span></label></li>
+          <li data-target='shape'><label><span>Square</span></label></li>
+          <li data-target='shape'><label><span>Triangle</span></label></li>
+          <li data-target='shape'><label><span>Custom</span></label></li>
+        </ol>
+        <menu>
+          <button class='affirmative full'>Cancel</button>
+        </menu>
+      </section>
+    </form>
+
     <form role='dialog' data-type='value-selector' id='save' class='hidden confirm'>
       <section class='scrollable'>
         <h1>Save</h1>

Web/js/desktop.js

@@ -87,12 +87,13 @@ $(window).resize(sizeAndPos);
     $(this).parent().find('li[aria-selected]').removeAttr('aria-selected');
     $(this).attr('aria-selected', 'true');
     var key = $(this).parents('form').attr('id'),
-        value  = $(this).find('label span').html().toLowerCase();
+        value  = $(this).find('label span').html().toLowerCase(),
+        target = $(this).attr('data-target');
     window.settings[key] = value;
 
     $('button[id="set' + key + '"] span').html(value[0].toUpperCase() + value.substr(1));
     $('#menu div.options > div').addClass('hidden');
-    $('#menu div.options > .general, #menu div.options > .'+value).removeClass('hidden');
+    $('#menu div.options > .general, #menu div.options > .'+target).removeClass('hidden');
 
     $(this).parents('form').addClass('hidden');
   })
@@ -184,8 +185,10 @@ $(window).resize(sizeAndPos);
   // Bottom
 
   $('#clear').click(function() {
-    c.clearRect(0, 0, width(), height());
+    c.clear();
+    var h = window.points.history;
     window.points = [];
+    window.points.history = h;
     if(window.points.history.last < window.points.history.length-1) {
       window.points.history.splice(window.points.history.last+1);
     }

Web/js/functions.js

@@ -3,7 +3,7 @@
 
 function sizeAndPos() {
 
-  var data = window.points.history[window.points.history.last].data || c.getImageData(0,0, $c.width(), $c.height());
+  var data = c.getImageData(0,0, $c.width(), $c.height());
   var w = $(window).width(),
       h = $(window).height() - 53;
   $c.attr('width', w * window.devicePixelRatio);
@@ -12,14 +12,16 @@ function sizeAndPos() {
     'width' : w,
     'height' : h
   });
-  c.clearRect(0,0, width(), height());
+  c.clear();
   c.putImageData(data, 0, 0);
 }
 
-function relative(x,y) {
+function relative(x,y, el) {
+  var el = el || $c,
+      offset = el.offset();
   return {
-    x : x*window.devicePixelRatio,
+    x : (x - offset.left) *window.devicePixelRatio,
-    y : (y - 53) * window.devicePixelRatio
+    y : (y - offset.top) * window.devicePixelRatio
   }
 }
 
@@ -31,8 +33,8 @@ function threshold(x1, y1, x2, y2, threshold) {
 
 function draw(x1, y1, x2, y2, opts, overlay) {
   opts = opts || {};
-  var c = window.c;
   if( overlay ) var c = window.o;
+  else var c = window.c;
   c.beginPath();
   if( settings.type == 'eraser' ) c.globalCompositeOperation = 'destination-out';
   else c.globalCompositeOperation = opts.composite || settings.composite;
@@ -47,6 +49,42 @@ function draw(x1, y1, x2, y2, opts, overlay) {
   if( opts.fill ) c.fill();
 }
 
+function shape(opts, overlay) {
+  if(overlay || opts.type == 'mark') var c = window.o;
+  else var c = window.c;
+  c.beginPath();
+  c.fillStyle = opts.color || settings.color;
+  var type = opts.type || settings.shape;
+  switch(type) {
+    case 'mark': {
+      c.fillStyle = 'red';
+      c.arc(opts.x, opts.y, 3, 0, 2*Math.PI);
+      break;
+    }
+    case 'circle': {
+      c.arc(opts.x, opts.y, opts.radius, 0, 2*Math.PI);
+      break;
+    }
+    case 'rectangle': {
+      c.rect(opts.x, opts.y, opts.width, opts.height);
+      break;
+    }
+    case 'square': {
+      c.rect(opts.x, opts.y, opts.width, opts.width);
+      break;
+    }
+    case 'triangle': {
+      c.fillStyle = opts
+      c.moveTo(opts.x1, opts.y1);
+      c.lineTo(opts.x2, opts.y2);
+      c.lineTo(opts.x3, opts.y3);
+      c.lineTo(opts.x1, opts.y1);
+      break;
+    }
+  }
+  c.fill();
+}
+
 function undo() {
   var history = window.points.history;
   if( history.last > 1 ) {
@@ -56,7 +94,7 @@ function undo() {
     window.points.history = history;
     window.points.history.last = history.last-1;
   } else {
-    c.clearRect(0,0, width(), height());
+    c.clear();
     window.points = [];
     window.points.history = history;
     window.points.history.last = 0;
@@ -106,21 +144,171 @@ function startPoint(x, y) {
         start : old.start || {x: x, y: y},
         type : settings.type
       }
+
+  // Line
   if( old.type !== 'line' && current.type == 'line' ) {
-    window.o.beginPath();
+    shape({
-    window.o.fillStyle = 'red';
+      type: 'mark',
-    window.o.arc(x,y, 3, 0, 2*Math.PI);
+      x: x,
-    window.o.fill();
+      y: y
+    })
   }
 
   if( old.type == 'line' && current.type == 'line' ) {
     if( points[points.indexOf(old)-1].type !== 'line' ) {
-      o.clearRect(old.x-3, old.y-3, 6, 6, true);
+      o.clear();
       draw(old.x, old.y, x, y);
     } else
       draw(old.x, old.y, x, y);
   }
 
+  // Shapes
+
+  if( current.type == 'shape' ) {
+    switch(settings.shape) {
+      case 'circle': {
+        switch(settings.shapePoints.length) {
+          case 0: {
+            settings.shapePoints.push({
+              x: x,
+              y: y
+            })
+            shape({
+              type: 'mark',
+              x: x,
+              y: y
+            })
+            break;
+          } 
+          case 1: {
+            var radius = Math.abs(settings.shapePoints[0].x - x);
+            o.clear();
+            shape({
+              type: 'circle',
+              x: settings.shapePoints[0].x,
+              y: settings.shapePoints[0].y,
+              radius: radius
+            })
+            settings.shapePoints = [];
+            break;
+          }
+        }
+        break;
+      }
+      case 'rectangle': {
+        switch(settings.shapePoints.length) {
+          case 0: {
+            settings.shapePoints.push({
+              x: x,
+              y: y
+            })
+            shape({
+              type: 'mark',
+              x: x,
+              y: y
+            })
+            break;
+          }
+          case 1: {
+            settings.shapePoints.push({
+              x: x,
+              y: old.y
+            })
+            shape({
+              type: 'mark',
+              x: x,
+              y: old.y
+            })
+            break;
+          }
+          case 2: {
+            o.clear();
+            shape({
+              type: 'rectangle',
+              x: settings.shapePoints[0].x,
+              y: settings.shapePoints[0].y,
+              width: settings.shapePoints[1].x - settings.shapePoints[0].x,
+              height: y - settings.shapePoints[0].y
+            })
+            settings.shapePoints = [];
+            break;
+          }
+        }
+        break;
+      }
+      case 'square': {
+        switch(settings.shapePoints.length) {
+          case 0: {
+            settings.shapePoints.push({
+              x: x,
+              y: y
+            })
+            shape({
+              type: 'mark',
+              x: x,
+              y: y
+            })
+            break;
+          }
+          case 1: {
+            window.o.clear();
+            shape({
+              type: 'square',
+              x: old.x,
+              y: old.y,
+              width: x - old.x
+            }) 
+            settings.shapePoints = [];
+            break;
+          }
+        }
+        break;
+      }
+      case 'triangle': {
+        switch(settings.shapePoints.length) {
+          case 0: {
+            settings.shapePoints.push({
+              x: x,
+              y: y
+            })
+            shape({
+              type: 'mark',
+              x: x,
+              y: y
+            })
+            break;
+          }
+          case 1: {
+            settings.shapePoints.push({
+              x: x,
+              y: y
+            })
+            shape({
+              type: 'mark',
+              x: x,
+              y: y
+            })
+            break;
+          }
+          case 2: {
+            window.o.clear();
+            shape({
+              type: 'triangle',
+              x1: settings.shapePoints[0].x,
+              y1: settings.shapePoints[0].y,
+              x2: settings.shapePoints[1].x,
+              y2: settings.shapePoints[1].y,
+              x3: x,
+              y3: y
+            })
+            settings.shapePoints = [];
+            break;
+          }
+        }
+      }
+    }
+  }
+
   var thresholds = window.mobile ? [10, 5] : [5, 2];
   if( points.length > 1 && ((start && threshold(start.x, start.y, x, y, thresholds[0])) || threshold(old.x, old.y, x, y, thresholds[1])) ) {
     window.active = false;

Web/js/main.js

@@ -3,6 +3,9 @@
 $(document).ready(function() {
   window.c = $('canvas')[0].getContext('2d');
   window.o = $('canvas')[1].getContext('2d');
+  window.c.clear = window.o.clear = function() {
+    this.clearRect(0, 0, width(), height());
+  }
 
   window.settings = {
     lineWidth : 2,
@@ -12,7 +15,9 @@ $(document).ready(function() {
     lineJoin: 'round',
     furLength: 5,
     connectTelorance: 40,
-    composite: 'source-over'
+    composite: 'source-over',
+    shape: 'circle',
+    shapePoints: []
   };
   window.points = [];
   window.$c = $('canvas');