Rewrite the Screen module to use ImageData instead of fillRect

Author: leocassarani

README.md

@@ -27,5 +27,5 @@ Running Pong.hack at http://0.0.0.0:4225
 
 This will launch a local web server on port 4225 ("HACK" on a phone
 keypad). Navigating to http://0.0.0.0:4225 in a reasonably recent
-browser will run the Hack program and display its output in a 256x512
+browser will run the Hack program and display its output in a 512x256
 HTML5 canvas element.

src/screen.js

@@ -1,9 +1,10 @@
 (function() {
-  var X_MASK   = (1 << 9) - 1,
-      MSB_MASK = 1 << 15;
+  var WIDTH  = 512,
+      HEIGHT = 256;
 
   function Screen(elem) {
     this.canvas = elem.getContext('2d');
+    this.image  = this.canvas.createImageData(WIDTH, HEIGHT);
     this.store  = {};
   }
 
@@ -18,50 +19,24 @@
 
   Screen.prototype.redrawPixels = function (addr, bits) {
     var offset = 16 * addr,  // Each address corresponds to 16 horizontal pixels.
-        x = offset & X_MASK, // Modulo: offset & (COLUMNS - 1) = offset % COLUMNS
-        y = offset >> 9,     // Integer division: offset >> log2(COLUMNS) == Math.floor(offset / COLUMNS)
-        run = 1,             // run will hold how many contiguous pixels with the same colour we've seen.
-        prev,                // prev will hold the colour of the previous pixel in the loop.
-        colour;              // colour will hold the current pixel's colour.
+        idx = offset << 2,   // Multiply offset by 4 because each pixel has RGBA components.
+        colour;
 
-    // Initialise prev to be the colour corresponding to the MSB.
-    // This way we can skip the first iteration of the loop below.
-    prev = (bits & MSB_MASK) ? 'black' : 'white';
+    // We need to loop over all 16 bits stored at addr.
+    for (var i = 0; i < 16; i++) {
+      // Examine the ith bit: true means black, false means white.
+      colour = bits & (1 << i) ? 0 : 255;
 
-    // We need to loop over 16 bits, but as we've already peeked
-    // at the first one, this loop can start from 15 instead.
-    //
-    // Note that this loop runs from the MSB (rightmost pixel)
-    // to the LSB (leftmost pixel). Having a decrementing loop
-    // with no bounds checking gives us a tiny speed boost, but
-    // more importantly it makes our drawing code easier below.
-    for (var i = 15; i--;) {
-      colour = (bits & (1 << i)) ? 'black' : 'white';
+      // Set the RGB components of the pixel.
+      this.image.data[idx++] = colour;
+      this.image.data[idx++] = colour;
+      this.image.data[idx++] = colour;
 
-      // If this pixel's colour is the same as the previous pixel's
-      // colour, increase the length of the current "run" and move
-      // on to the next pixel before we do any drawing.
-      if (prev == colour) {
-        run++;
-        continue;
-      }
-
-      // If the run has ended, we need to draw the block of pixels
-      // up to, but excluding, the current one. As we're iterating
-      // from right to left, we can draw a rectangle starting at
-      // the previous pixel (x + i + 1), with length run.
-      this.canvas.fillStyle = prev;
-      this.canvas.fillRect(x + i + 1, y, run, 1);
-
-      // Start a new run of length 1 for the current pixel's colour.
-      prev = colour;
-      run = 1;
+      // Always set alpha to 255 (opaque).
+      this.image.data[idx++] = 255;
     }
 
-    // Now that we've processed all the pixels, we can draw the last
-    // (leftmost) run of pixels, which may have length from 1 to 16.
-    this.canvas.fillStyle = colour;
-    this.canvas.fillRect(x, y, run, 1);
+    this.canvas.putImageData(this.image, 0, 0);
   };
 
   window.Screen = Screen;