diff --git a/index.html b/index.html
index c8ae89d..a8868e1 100644
--- a/index.html
+++ b/index.html
@@ -37,7 +37,9 @@
     <div class="container-fluid">
       <div class="col-xs-4">
         <div id="Detector" ng-controller="DetectorController as dc">
-          <img ng-click="dc.click()" src="assets/detector.png" alt="Your detector. Click on it to generate events.">
+          <canvas ng-click="dc.click()" id="detector" width="200" height="200">
+            Your detector. Click on it to generate events.
+          </canvas>
         </div>
 
         <div id="Lab" ng-controller="LabController as lc">
@@ -70,5 +72,6 @@
     <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
     <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.17/angular.min.js"></script>
     <script src="js/game.js"></script>
+    <script src="js/detector.js"></script>
   </body>
 </html>
diff --git a/js/detector.js b/js/detector.js
new file mode 100644
index 0000000..71148a1
--- /dev/null
+++ b/js/detector.js
@@ -0,0 +1,207 @@
+'use strict';
+(function () {
+  var detector =
+  {
+      canvas: {},
+      ctx: {},
+
+      colors: 
+      {
+          siliconRing: '#FFF371',
+          siliconRingLine: '#EAC918',
+          ecal: '#C5FF82',
+          ecalLine: '#9EFF28',
+          hcal: '#E1FF79',
+          hcalLine: '#C9FF2D',
+          lightRing: '#A0B3FF',
+          lightRingLine: '#A0B3FF',
+          darkRing: '#7280B8',
+          darkRingLine: '#7280B8',
+
+          mucalLight: '#FFDFB7',
+          mucalLightLine: '#FFDFB7',
+          mucalDark: '#EA301F',
+          mucalDarkLine: '#C5291A'
+      },
+
+      radius:
+      {
+          siliconInner: 10,
+          silicon: 30,
+          siliconSpace: 35,
+          ecal: 50,
+          hcal: 80,
+          darkRing1: 83,
+          darkRing1Space: 88,
+          lightRing: 100,
+          lightRingSpace: 102,
+          darkRing2: 105,
+
+          mucal: 120,
+          mucalLight: 10,
+          mucalDark: 20
+      },
+
+      init: function()
+      {
+          detector.canvas = document.getElementById('detector');
+          detector.ctx = detector.canvas.getContext('2d');
+
+          var devicePixelRatio = window.devicePixelRatio || 1;
+          var backingStoreRatio = detector.ctx.webkitBackingStorePixelRatio ||
+                                  detector.ctx.mozBackingStorePixelRatio ||
+                                  detector.ctx.msBackingStorePixelRatio ||
+                                  detector.ctx.oBackingStorePixelRatio ||
+                                  detector.ctx.backingStorePixelRatio || 1;
+
+          var ratio = devicePixelRatio / backingStoreRatio;
+
+          if (devicePixelRatio !== backingStoreRatio) {
+              var oldWidth = detector.canvas.width;
+              var oldHeight = detector.canvas.height;
+
+              detector.canvas.width = oldWidth * ratio;
+              detector.canvas.height = oldHeight * ratio;
+
+              detector.canvas.style.width = oldWidth + 'px';
+              detector.canvas.style.height = oldHeight + 'px';
+
+              // now scale the context to counter
+              // the fact that we've manually scaled
+              // our canvas element
+              detector.ctx.scale(ratio, ratio);
+          }
+
+          detector.draw();
+      },
+
+      draw: function()
+      {
+          var ctx = detector.ctx;
+          var cx = 250;
+          var cy = 250;
+
+          //ctx.scale(2,2);
+
+          ctx.strokeRect(0,0,500,500);
+
+          var muSplit = 2/12;
+          for (var k = 3; k >= 1; k--) {
+              ctx.strokeStyle = detector.colors.mucalDarkLine;
+              ctx.fillStyle = detector.colors.mucalDark;
+              
+              ctx.beginPath();
+              ctx.moveTo(cx + (detector.radius.mucal + k * detector.radius.mucalLight + k * detector.radius.mucalDark) * Math.cos(Math.PI * muSplit), cx + (detector.radius.mucal + k * detector.radius.mucalLight + k * detector.radius.mucalDark) * Math.sin(Math.PI * muSplit));
+              for (var i = 1; i <= 13; i++) {
+                  ctx.lineTo(cx + (detector.radius.mucal + k * detector.radius.mucalLight + k * detector.radius.mucalDark) * Math.cos(Math.PI * i * muSplit), cx + (detector.radius.mucal + k * detector.radius.mucalLight + k * detector.radius.mucalDark) * Math.sin(Math.PI * i * muSplit));
+              }
+              ctx.stroke();
+              ctx.fill();
+
+              ctx.beginPath();
+              ctx.moveTo(cx + (detector.radius.mucal + k * detector.radius.mucalLight + (k-1) * detector.radius.mucalDark) * Math.cos(Math.PI * muSplit), cx + (detector.radius.mucal + k * detector.radius.mucalLight + (k-1) * detector.radius.mucalDark) * Math.sin(Math.PI * muSplit));
+              for (var i = 1; i <= 13; i++) {
+                  ctx.lineTo(cx + (detector.radius.mucal + k * detector.radius.mucalLight + (k-1) * detector.radius.mucalDark) * Math.cos(Math.PI * i * muSplit), cx + (detector.radius.mucal + k * detector.radius.mucalLight + (k-1) * detector.radius.mucalDark) * Math.sin(Math.PI * i * muSplit));
+              }
+              ctx.stroke();
+              ctx.fillStyle = detector.colors.mucalLight;
+              ctx.fill();
+          }
+
+          ctx.strokeStyle = detector.colors.mucalDarkLine;
+          ctx.beginPath();
+          ctx.moveTo(cx + detector.radius.mucal * Math.cos(Math.PI * muSplit), cx + detector.radius.mucal * Math.sin(Math.PI * muSplit));
+          for (var i = 1; i <= 13; i++) {
+              ctx.lineTo(cx + detector.radius.mucal * Math.cos(Math.PI * i * muSplit), cx + detector.radius.mucal * Math.sin(Math.PI * i * muSplit));
+          }
+          ctx.stroke();
+          ctx.globalCompositeOperation = 'destination-out';
+          ctx.fill();
+          ctx.globalCompositeOperation = 'source-over';
+
+
+          ctx.beginPath();
+          ctx.strokeStyle = detector.colors.darkRingLine;
+          ctx.fillStyle = detector.colors.darkRing;
+          ctx.arc(cx, cy, detector.radius.darkRing2, 0, Math.PI * 2, true);
+          ctx.fill();
+          ctx.stroke();
+
+          ctx.beginPath();
+          ctx.globalCompositeOperation = 'destination-out';
+          ctx.arc(cx, cy, detector.radius.lightRingSpace, 0, Math.PI * 2, true);
+          ctx.fill();
+          ctx.globalCompositeOperation = 'source-over';
+
+          ctx.beginPath();
+          ctx.strokeStyle = detector.colors.lightRingLine;
+          ctx.fillStyle = detector.colors.lightRing;
+          ctx.arc(cx, cy, detector.radius.lightRing, 0, Math.PI * 2, true);
+          ctx.fill();
+          ctx.stroke();
+
+          ctx.beginPath();
+          ctx.globalCompositeOperation = 'destination-out';
+          ctx.arc(cx, cy, detector.radius.darkRing1Space, 0, Math.PI * 2, true);
+          ctx.fill();
+          ctx.globalCompositeOperation = 'source-over';
+
+          ctx.beginPath();
+          ctx.strokeStyle = detector.colors.darkRingLine
+          ctx.fillStyle = detector.colors.darkRing;
+          ctx.arc(cx, cy, detector.radius.darkRing1, 0, Math.PI * 2, true);
+          ctx.fill();
+          ctx.stroke();
+
+          ctx.beginPath();
+          ctx.globalCompositeOperation = 'destination-out';
+          ctx.arc(cx, cy, detector.radius.ecal, 0, Math.PI * 2, true);
+          ctx.fill();
+          ctx.globalCompositeOperation = 'source-over';
+
+
+          ctx.strokeStyle = detector.colors.hcalLine;
+          ctx.fillStyle = detector.colors.hcal;
+          var calSplit = 20/2;
+          for (var i = 0; i < 20; i++) {
+              ctx.beginPath();
+              ctx.moveTo(cx + detector.radius.ecal * Math.cos(Math.PI * i / calSplit), cx + detector.radius.ecal * Math.sin(Math.PI * i / calSplit));
+              ctx.lineTo(cx + detector.radius.hcal * Math.cos(Math.PI * i / calSplit), cx + detector.radius.hcal * Math.sin(Math.PI * i / calSplit));
+              ctx.arc(cx, cy, detector.radius.hcal, Math.PI * i / calSplit, Math.PI * (i+1) / calSplit, false);
+              ctx.lineTo(cx + detector.radius.ecal * Math.cos(Math.PI * (i+1) / calSplit), cx + detector.radius.ecal * Math.sin(Math.PI * (i+1) / calSplit));
+              ctx.closePath();
+              ctx.fill();
+              ctx.stroke();
+          }
+
+          ctx.strokeStyle = detector.colors.ecalLine;
+          ctx.fillStyle = detector.colors.ecal;
+          var calSplit = 20/2;
+          for (var i = 0; i < 20; i++) {
+              ctx.beginPath();
+              ctx.moveTo(cx + detector.radius.siliconSpace * Math.cos(Math.PI * i / calSplit), cx + detector.radius.siliconSpace * Math.sin(Math.PI * i / calSplit));
+              ctx.lineTo(cx + detector.radius.ecal * Math.cos(Math.PI * i / calSplit), cx + detector.radius.ecal * Math.sin(Math.PI * i / calSplit));
+              ctx.lineTo(cx + detector.radius.ecal * Math.cos(Math.PI * (i+1) / calSplit), cx + detector.radius.ecal * Math.sin(Math.PI * (i+1) / calSplit));
+              ctx.lineTo(cx + detector.radius.siliconSpace * Math.cos(Math.PI * (i+1) / calSplit), cx + detector.radius.siliconSpace * Math.sin(Math.PI * (i+1) / calSplit));
+              ctx.closePath();
+              ctx.fill();
+              ctx.stroke();
+          }
+
+          ctx.beginPath();
+          ctx.strokeStyle = detector.colors.siliconRingLine;
+          ctx.fillStyle = detector.colors.siliconRing;
+          ctx.arc(cx, cy, detector.radius.silicon, 0, Math.PI * 2, true);
+          ctx.fill();
+          ctx.stroke();
+
+          ctx.beginPath();
+          ctx.strokeStyle = detector.colors.siliconRingLine;
+          ctx.fillStyle = detector.colors.siliconRing;
+          ctx.arc(cx, cy, detector.radius.siliconInner, 0, Math.PI * 2, true);
+          ctx.fill();
+          ctx.stroke();
+      }
+  }
+  detector.init();
+})();