diff --git a/components/Graphic.jsx b/components/Graphic.jsx
index 5b8b272a..a8fd12df 100644
--- a/components/Graphic.jsx
+++ b/components/Graphic.jsx
@@ -10,10 +10,12 @@ var fix = function(e) {
   e.offsetY = e.clientY - rect.top;
 };
 
-var defaultWidth = 275;
-var defaultHeight = 275;
 
 var Graphic = React.createClass({
+
+  defaultWidth: 275,
+  defaultHeight: 275,
+
   Bezier: require("bezier-js"),
   curve: false,
   mx:0,
@@ -63,8 +65,8 @@ var Graphic = React.createClass({
 
   componentDidMount: function() {
     var cvs = this.refs.canvas;
-    cvs.width = defaultWidth;
-    cvs.height = defaultHeight;
+    cvs.width = this.defaultWidth;
+    cvs.height = this.defaultHeight;
     this.cvs = cvs;
     var ctx = cvs.getContext("2d");
     this.ctx = ctx;
@@ -199,18 +201,18 @@ var Graphic = React.createClass({
   },
 
   setSize: function(w,h) {
-    defaultWidth = w;
-    defaultHeight = h;
+    this.defaultWidth = w;
+    this.defaultHeight = h;
     this.refs.canvas.width = w;
     this.refs.canvas.height = h;
   },
 
   getPanelWidth: function() {
-    return defaultWidth;
+    return this.defaultWidth;
   },
 
   getPanelHeight: function() {
-    return defaultHeight;
+    return this.defaultHeight;
   },
 
   getDefaultQuadratic: function() {
@@ -230,7 +232,7 @@ var Graphic = React.createClass({
 
   setPanelCount: function(c) {
     var cvs = this.refs.canvas;
-    cvs.width = c*defaultWidth;
+    cvs.width = c * this.defaultWidth;
   },
 
   setCurve: function(c) {
diff --git a/components/sections/canonical/index.js b/components/sections/canonical/index.js
index d0686f23..87958b17 100644
--- a/components/sections/canonical/index.js
+++ b/components/sections/canonical/index.js
@@ -16,13 +16,15 @@ var Canonical = React.createClass({
   },
 
   draw: function(api, curve) {
+    var w = 400,
+        h = w,
+        unit = this.unit,
+        center = {x:w/2, y:h/2};
+
+    api.setSize(w,h);
     api.setPanelCount(2);
     api.reset();
 
-    var w = api.getPanelWidth(),
-        h = api.getPanelHeight(),
-        unit = this.unit;
-
     api.drawSkeleton(curve);
     api.drawCurve(curve);
 
@@ -38,7 +40,6 @@ var Canonical = React.createClass({
     ];
 
     var canonical = new api.Bezier(npts);
-    var center = {x:w/2, y:h/2};
     api.setColor("blue");
     api.drawCurve(canonical, center);
     api.drawCircle(npts[3], 3, center);
@@ -65,6 +66,7 @@ var Canonical = React.createClass({
         h = w,
         unit = this.unit = w/5,
         center = {x:w/2, y:h/2};
+
     api.setSize(w,h);
 
     // axes + gridlines