Changing the rules, again. Refactoring canvas operations.

 * Stick to a strict order of how we perform canvas operations.
 * Define a naming convention.
 * Separate `draw` and `paint` where I can.
 * Move screen translation outside of grid's `paint`.

HACKING.md

@@ -63,5 +63,14 @@ or perhaps simply to skip the intro and jump right into a specific level.
 The HTML5 canvas has a fair amount of state variables. This is the place to document the
 pecularities of how ArashiJS deals with these variables.
 
-* When using the drawing state stack, always `restore` **before** a `stroke` or `fill` operation.
+* All `draw*` methods only ever draw paths. Other methods (usually called `paint`) will do an
+actual `stroke` or `fill` operation.
+
 * Always reset `globalAlpha` to 1.0 when you're done using it.
+
+* Always use stack methods (`save` and `restore`) and painting methods (`beginPath` and `stroke` or
+`fill`) in a block or hierarchy fashion. There should be no partial overlaps in their scope.
+
+* Indent the above like a block, too.
+
+* Set the stroke or fill parameters *before* starting a path.

src/enemies/plasma.js

@@ -18,12 +18,11 @@ Plasma.prototype.update = function() {
   }
 };
 
-Plasma.prototype.draw = function() {
+Plasma.prototype.paint = function() {
   var angle = this.depth * 63,
       i, dx, dy;
 
   c.save();
-    grid.screenTranslation();
     grid.laneTranslation(this.lane, this.depth)
 
     c.lineWidth = 0.02;

src/engine.js

@@ -103,14 +103,15 @@ Engine.render = function() {
   // Draw frame render time in ms
   if (window.arashi_devmode) {
     var d = new Date() - s;
-    c.beginPath();
-      c.save();
-        c.translate(0.5, 0.5); // Pixel align
-        c.scale(3,3); c.translate(1,1);
+    c.save();
+      c.translate(0.5, 0.5); // Pixel align
+      c.scale(3,3); c.translate(1,1);
+
+      c.lineWidth = 0.3;
+      c.strokeStyle = 'white';
+      c.beginPath();
         Dig7Segment.drawNumber(d);
-      c.restore();
-    c.lineWidth = 1;
-    c.strokeStyle = 'white';
-    c.stroke();
+      c.stroke();
+    c.restore();
   }
 };

src/gamestates/game.js

@@ -29,7 +29,10 @@ GameMachine = {
     }
 
     Starfield.ride();
-    grid.draw();
+    c.save();
+      grid.screenTranslation();
+      grid.paint();
+    c.restore();
   },
 
   enter_main: function() {

src/grid.js

@@ -144,15 +144,10 @@ Grid.prototype.setDistance = function(distance) {
   }
 };
 
-Grid.prototype.draw = function() {
-  var style = 'rgb('+this.color[0]+','+this.color[1]+','+this.color[2]+')';
+// Draw a polygon around the solid area of the grid.
+Grid.prototype.drawArea = function() {
   var i, corner;
 
-  c.save();
-  this.screenTranslation();
-
-  // Fill the grid area
-  c.beginPath();
   c.moveTo(this.scoords[0].sx, this.scoords[0].sy);
   for (i = 1; i < this.scoords.length; i++) {
     corner = this.scoords[i];
@@ -163,38 +158,52 @@ Grid.prototype.draw = function() {
     c.lineTo(corner.ex, corner.ey);
   }
   c.closePath();
+};
 
-  c.globalAlpha = 0.03 * this.alphaFactor;
-  c.fillStyle = style;
-  c.fill();
+// Draw the lane borders.
+Grid.prototype.drawLanes = function() {
+  var i, corner;
 
-  c.beginPath();
-  // Draw lanes
+  // Draw the borders between lanes.
   for (i = 0; i < this.scoords.length; i++) {
     corner = this.scoords[i];
     c.moveTo(corner.sx, corner.sy);
     c.lineTo(corner.ex, corner.ey);
   }
-  // Draw front edge
+
+  // Draw front edge all around.
   c.moveTo(this.scoords[0].sx, this.scoords[0].sy);
   for (i = 1; i < this.scoords.length; i++) {
     corner = this.scoords[i];
     if (corner.close) { c.closePath(); break; }
     c.lineTo(corner.sx, corner.sy);
   }
-  // Draw back edge
+
+  // Draw back edge.
   c.moveTo(this.scoords[0].ex, this.scoords[0].ey);
   for (i = 1; i < this.scoords.length; i++) {
     corner = this.scoords[i];
     if (corner.close) { c.closePath(); break; }
     c.lineTo(corner.ex, corner.ey);
   }
+};
+
+// Paint all of the grid.
+// The caller is responsible for applying the screen translation first.
+Grid.prototype.paint = function() {
+  var style = 'rgb('+this.color[0]+','+this.color[1]+','+this.color[2]+')';
+  c.fillStyle = style;
+  c.strokeStyle = style;
+  c.lineWidth = 0.01;
 
-  c.restore();
+  c.globalAlpha = 0.03 * this.alphaFactor;
+  c.beginPath();
+    this.drawArea();
+  c.fill();
 
   c.globalAlpha = this.alphaFactor;
-  c.lineWidth = 1;
-  c.strokeStyle = style;
+  c.beginPath();
+    this.drawLanes();
   c.stroke();
 
   c.globalAlpha = 1.0;

src/vakit/lightning.js

@@ -109,8 +109,9 @@ Lightning.draw = function(start, end) {
 };
 
 // Returns true when the animation is finished.
-Lightning.animate = function() {
+Lightning.update = function() {
   if (this.flashIntensity <= 1 && this.drawStart >= frame.h) { return true; }
+  this.flashIntensity = Math.round(this.flashIntensity * 2 / 3);
 
   if (!this.lightningHit) {
     if (this.drawEnd < frame.h) {
@@ -125,17 +126,25 @@ Lightning.animate = function() {
     this.drawStart += this.drawSpeed;
   }
 
+  return false;
+};
+
+Lightning.paint = function() {
   var full = this.flashIntensity,
       half = Math.round(full / 2);
   c.fillStyle = 'rgb(' + half + ',' + half + ',' + full + ')';
   c.fillRect(0, 0, frame.w, frame.h);
-  this.flashIntensity = Math.round(full * 2 / 3);
 
-  c.beginPath();
-    this.draw(this.drawStart, this.drawEnd);
   c.lineWidth = 3;
   c.strokeStyle = 'white';
+  c.beginPath();
+    this.draw(this.drawStart, this.drawEnd);
   c.stroke();
+};
 
+// Convenience function, because we always pair #update + #paint any way.
+Lightning.animate = function() {
+  if (this.update()) { return true; }
+  this.paint();
   return false;
 };

src/vakit/logo.js

@@ -44,19 +44,19 @@ VectorLogo.prototype.animate = function() {
       break;
     case true:
       done = false;
-      c.beginPath();
-      SizzlingLine.draw(line[0], line[1], line[2], line[3],
-          1 + Math.pow(2, 8 - (line.timer / 2)), 3);
       c.strokeStyle = 'blue';
+      c.beginPath();
+        SizzlingLine.draw(line[0], line[1], line[2], line[3],
+            1 + Math.pow(2, 8 - (line.timer / 2)), 3);
       c.stroke();
       line.timer -= 1;
       if (line.timer === 0) { line.state = undefined; }
       break;
     case undefined:
-      c.beginPath();
-      c.moveTo(line[0], line[1]);
-      c.lineTo(line[2], line[3]);
       c.strokeStyle = 'yellow';
+      c.beginPath();
+        c.moveTo(line[0], line[1]);
+        c.lineTo(line[2], line[3]);
       c.stroke();
       break;
     }