init

.gitignore

@@ -0,0 +1,4 @@
+components
+build
+node_modules
+.DS_Store

Makefile

@@ -0,0 +1,16 @@
+all: build/build.js
+
+build/build.js: index.js lib/*.js
+	# rebuild
+	@component build --dev -s GCanvas
+
+components: component.json
+	@component install --dev
+
+test:
+	@mocha -R list
+
+clean:
+	rm -fr build components template.js
+
+.PHONY: clean test

component.json

@@ -0,0 +1,23 @@
+{
+  "name": "gcanvas",
+  "repo": "em/gcanvas",
+  "description": "",
+  "version": "0.0.1",
+  "keywords": [],
+  "locals": ["../three"],
+  "development": {},
+  "license": "MIT",
+  "scripts": [
+    "index.js",
+    "lib/three.custom.js",
+    "lib/clipper.js",
+    "lib/gcanvas.js",
+    "lib/motion.js",
+    "lib/parsefont.js",
+    "lib/utils.js",
+    "lib/drivers/gcode.js",
+    "lib/drivers/filter.js",
+    "lib/drivers/simulator.js",
+    "lib/fonts/helvetiker_regular.typeface.js"
+  ]
+}

examples/arc.js

@@ -0,0 +1,11 @@
+example('arcs', function(ctx) {
+  ctx.arc(100, 100, 80, 0, Math.PI * 1.5);
+  ctx.arc(100, 100, 60, 0, Math.PI * 1.5, true);
+  ctx.arc(100, 100, 40, 0, Math.PI * 1.5, true);
+  ctx.stroke();
+
+  // Isolated circle with beginPath
+  ctx.beginPath();
+  ctx.arc(100, 100, 20, 0, Math.PI * 2);
+  ctx.stroke();
+});

examples/index.html

@@ -0,0 +1,115 @@
+<style>
+body {
+  background: #fff;
+  font-family: "helvetica neue";
+}
+
+h1 {
+  margin: 20px;
+  font-weight: 300;
+}
+
+h2 {
+  margin: 20px;
+  font-weight: 300;
+}
+.example {
+  /* border-bottom: 1px solid gray; */
+  position: relative;
+  height: 300px;
+}
+
+.real {
+  background: white;
+  position: absolute;
+  left: 20px;
+  border: 1px solid #ddd;
+}
+
+.sim {
+  background: white;
+  position: absolute;
+  left: 240px;
+  border: 1px solid #ddd;
+}
+
+.gcode {
+  position: absolute;
+  left: 460px;
+  right: 20px;
+  top: 33px;
+  /* background: white; */
+  border: 1px solid #ddd;
+  height: 200px;
+  overflow-y: auto;
+}
+
+.rows {
+  height: 20px;
+}
+
+.th-real {
+  position: absolute;
+  left: 30px;
+}
+
+.th-sim {
+  position: absolute;
+  left: 250px;
+}
+
+.th-gcode {
+  position: absolute;
+  left: 470px;
+}
+
+</style>
+
+<h1>GCanvas Examples</h1>
+<div class="rows">
+  <div class="th th-real">HTML5 Canvas</div>
+  <div class="th th-sim">Simulation Driver</div>
+  <div class="th th-gcode">Gcode Driver</div>
+</div>
+
+<div id="examples"></div>
+<script>
+function example(name, fn) {
+  var html = '';
+  html += '<h2>'+name+'</h2>'
+  html += '<canvas class="real" width=200 height=200></canvas>'
+  html += '<canvas class="sim" width=200 height=200></canvas>'
+  html += '<ul class="gcode"></ul>'
+  var ex = document.createElement('div');
+  ex.className = 'example';
+  ex.innerHTML = html;
+  document.getElementById('examples').appendChild(ex);
+
+  var ctx = ex.getElementsByClassName('real')[0].getContext('2d');
+  var simtarget = ex.getElementsByClassName('sim')[0].getContext('2d');
+
+  var simdriver = new GCanvas.Simulator(simtarget);
+  var simctx = new GCanvas(simdriver, 200, 200);
+  var gcodectx = new GCanvas(null, 200, 200);
+
+  var gcodeElem = ex.getElementsByClassName('gcode')[0];
+  gcodectx.driver.stream.write = function(cmd) {
+    var line = document.createElement('li');
+    line.innerText = cmd;
+    gcodeElem.appendChild(line);
+  };
+
+  fn(ctx);
+  fn(simctx);
+  fn(gcodectx);
+
+  simtarget.stroke();
+}
+
+</script>
+
+<script src="../build/build.js"></script>
+<script src="arc.js"></script>
+<script src="star.js"></script>
+<script src="text.js"></script>
+<script src="portal2.js"></script>

examples/portal2.js

@@ -0,0 +1,91 @@
+// Good example of a bunch of different canvas features.
+// http://www.codeproject.com/Articles/237065/Introduction-to-HTML5-Canvas-Part-2-Example
+example('portal2', function(ctx) {
+  ctx.scale(0.6,0.6);
+  portal2(ctx);
+});
+
+function portal2(ctx) {
+	//function to convert deg to radian
+    var acDegToRad = function(deg){
+			return deg* (-(Math.PI / 180.0));    
+		}
+
+	//save the initial state of the context
+	ctx.save();		
+	//set fill color to gray
+	ctx.fillStyle = "rgb(110,110,110)";
+	//save the current state with fillcolor
+	ctx.save();
+
+	//draw 2's base rectangle
+	ctx.fillRect(20,200,120,35);
+	//bring origin to 2's base
+	ctx.translate(20,200);
+	//rotate the canvas 35 deg anti-clockwise
+	ctx.rotate(acDegToRad(35));
+	//draw 2's slant rectangle
+	ctx.fillRect(0,0,100,35);
+	//restore the canvas to reset transforms
+	ctx.restore();
+	//set stroke color width and draw the 2's top semi circle
+	ctx.strokeStyle = "rgb(110,110,110)";
+	ctx.lineWidth = 35;
+	ctx.beginPath();
+	ctx.arc(77,135,40,acDegToRad(-40),acDegToRad(180),true);
+	ctx.stroke();
+
+	//reset canvas transforms
+	ctx.restore();
+
+	//change color to blue
+	ctx.fillStyle = "rgb(0,160,212)";
+	//save current state of canvas
+	ctx.save();
+	//draw long dividing rectangle 
+	ctx.fillRect(162,20,8,300);
+	//draw player head circle
+	ctx.beginPath();
+	ctx.arc(225,80,35,acDegToRad(0),acDegToRad(360));
+	ctx.fill();
+
+	//start new path for tummy :)
+	ctx.beginPath();
+	ctx.moveTo(170,90);
+	ctx.lineTo(230,140);
+	ctx.lineTo(170,210);
+	ctx.fill();
+
+	//start new path for hand
+	//set lineCap and lineJoin to "round", blue color 
+	//for stroke, and width of 25px
+	ctx.lineWidth = 25;
+	ctx.lineCap = "round";
+	ctx.strokeStyle = "rgb(0,160,212)";
+	ctx.lineJoin = "round";
+	ctx.beginPath();
+	ctx.moveTo(222,150);
+	ctx.lineTo(230,190);
+	ctx.lineTo(270,220);
+	ctx.stroke();
+
+	ctx.beginPath();
+	ctx.moveTo(170, 200);
+	ctx.lineTo(250, 260);
+	ctx.lineTo(170,320);
+	ctx.clip();	
+
+	//begin new path for drawing leg
+	ctx.beginPath();
+	ctx.moveTo(160,210);
+	ctx.lineTo(195,260);
+	ctx.lineTo(160,290);
+	ctx.stroke();
+
+	//restore the <code class="prettyprint">context</code> 
+         //back to its initial state
+	ctx.restore();
+  // body...
+}
+
+

examples/star.js

@@ -0,0 +1,19 @@
+example('star', function(ctx) {
+  star(ctx, 100, 100, 90, 5, 0.5);
+});
+
+function star(ctx, x, y, r, p, m)
+{
+    ctx.translate(x, y);
+    ctx.moveTo(0,0-r);
+    for (var i = 0; i < p; i++)
+    {
+        ctx.rotate(Math.PI / p);
+        ctx.lineTo(0, 0 - (r*m));
+        ctx.rotate(Math.PI / p);
+        ctx.lineTo(0, 0 - r);
+    }
+    ctx.fill();
+}
+
+