diff --git a/playground/playground.js b/playground/playground.js
index 19107cdf3..a17792bba 100644
--- a/playground/playground.js
+++ b/playground/playground.js
@@ -161,17 +161,35 @@ window.onload = function() {
     document.addEventListener('mousemove', function (e) {
         var rect = canvas.getBoundingClientRect();
         var coordinates = {
-            x: e.clientX - rect.left - rect.width / 2,
-            y: e.clientY - rect.top - rect.height / 2
+            x: e.clientX - rect.left,
+            y: e.clientY - rect.top,
+            canvasWidth: rect.width,
+            canvasHeight: rect.height
         };
         window.vm.postIOData('mouse', coordinates);
     });
     canvas.addEventListener('mousedown', function (e) {
-        window.vm.postIOData('mouse', {isDown: true});
+        var rect = canvas.getBoundingClientRect();
+        var data = {
+            isDown: true,
+            x: e.clientX - rect.left,
+            y: e.clientY - rect.top,
+            canvasWidth: rect.width,
+            canvasHeight: rect.height
+        };
+        window.vm.postIOData('mouse', data);
         e.preventDefault();
     });
     canvas.addEventListener('mouseup', function (e) {
-        window.vm.postIOData('mouse', {isDown: false});
+        var rect = canvas.getBoundingClientRect();
+        var data = {
+            isDown: false,
+            x: e.clientX - rect.left,
+            y: e.clientY - rect.top,
+            canvasWidth: rect.width,
+            canvasHeight: rect.height
+        };
+        window.vm.postIOData('mouse', data);
         e.preventDefault();
     });
 
diff --git a/src/engine/runtime.js b/src/engine/runtime.js
index 473227ba8..6c5f36eb1 100644
--- a/src/engine/runtime.js
+++ b/src/engine/runtime.js
@@ -55,7 +55,7 @@ function Runtime () {
     this.ioDevices = {
         'clock': new Clock(),
         'keyboard': new Keyboard(this),
-        'mouse': new Mouse()
+        'mouse': new Mouse(this)
     };
 
     this._scriptGlowsPreviousFrame = [];
diff --git a/src/io/mouse.js b/src/io/mouse.js
index 7432c4358..990ba96f1 100644
--- a/src/io/mouse.js
+++ b/src/io/mouse.js
@@ -1,20 +1,47 @@
 var MathUtil = require('../util/math-util');
 
-function Mouse () {
+function Mouse (runtime) {
     this._x = 0;
     this._y = 0;
     this._isDown = false;
+    /**
+     * Reference to the owning Runtime.
+     * Can be used, for example, to activate hats.
+     * @type{!Runtime}
+     */
+    this.runtime = runtime;
 }
 
 Mouse.prototype.postData = function(data) {
     if (data.x) {
-        this._x = data.x;
+        this._x = data.x - data.canvasWidth / 2;
     }
     if (data.y) {
-        this._y = data.y;
+        this._y = data.y - data.canvasHeight / 2;
     }
     if (typeof data.isDown !== 'undefined') {
         this._isDown = data.isDown;
+        if (this._isDown) {
+            this._activateClickHats(data.x, data.y);
+        }
+    }
+};
+
+Mouse.prototype._activateClickHats = function (x, y) {
+    if (self.renderer) {
+        var pickPromise = self.renderer.pick(x, y);
+        var instance = this;
+        pickPromise.then(function(drawableID) {
+            for (var i = 0; i < instance.runtime.targets.length; i++) {
+                var target = instance.runtime.targets[i];
+                if (target.hasOwnProperty('drawableID') &&
+                    target.drawableID == drawableID) {
+                    instance.runtime.startHats('event_whenthisspriteclicked',
+                        null, target);
+                    return;
+                }
+            }
+        });
     }
 };