Adjust rendering for crisp pixels

- Adjust the rotation center of the cursor so that its single pixel is
  gets rendered onto a single stage pixel instead of being split across
  2-4 stage pixels.
- Add canvas CSS to make most browsers scale the canvases without
  interpolation.

src/playground/queryPlayground.html

@@ -12,6 +12,14 @@
         }
         canvas {
             border: 3px dashed black;
+
+            /* https://stackoverflow.com/a/7665647 */
+            image-rendering: optimizeSpeed; /* Older versions of FF */
+            image-rendering: -moz-crisp-edges; /* FF 6.0+ */
+            image-rendering: -webkit-optimize-contrast; /* Safari */
+            image-rendering: -o-crisp-edges; /* OS X & Windows Opera (12.02+) */
+            image-rendering: pixelated; /* Awesome future-browsers */
+            -ms-interpolation-mode: nearest-neighbor; /* IE */
         }
     </style>
 </head>

src/playground/queryPlayground.js

@@ -155,27 +155,30 @@ const makeTestPatternImage = () => {
     return canvas;
 };
 
-const makeBitmapDrawable = function (group, image) {
+const makeTestPatternDrawable = function (group) {
+    const image = makeTestPatternImage();
     const skinId = renderer.createBitmapSkin(image, 1);
     const drawableId = renderer.createDrawable(group);
     renderer.updateDrawableProperties(drawableId, {skinId});
     return drawableId;
 };
 
+const makeCursorDrawable = function (group) {
+    const image = makeCursorImage();
+    const skinId = renderer.createBitmapSkin(image, 1, [0, 0]);
+    const drawableId = renderer.createDrawable(group);
+    renderer.updateDrawableProperties(drawableId, {skinId});
+    return drawableId;
+};
+
 const initRendering = () => {
     const layerGroup = {
         testPattern: 'testPattern',
         cursor: 'cursor'
     };
     renderer.setLayerGroupOrdering([layerGroup.testPattern, layerGroup.cursor]);
-
-    const images = {
-        testPattern: makeTestPatternImage(),
-        cursor: makeCursorImage()
-    };
-
-    drawables.testPattern = makeBitmapDrawable(layerGroup.testPattern, images.testPattern);
-    drawables.cursor = makeBitmapDrawable(layerGroup.cursor, images.cursor);
+    drawables.testPattern = makeTestPatternDrawable(layerGroup.testPattern);
+    drawables.cursor = makeCursorDrawable(layerGroup.cursor);
 };
 
 initRendering();