opt_522_1.diff

diff --git a/processing.js b/processing.js
index de6bdf3..e584f45 100644
--- a/processing.js
+++ b/processing.js
@@ -682,8 +682,10 @@
     var online = true,
       doFill = true,
       fillStyle = "rgba( 255, 255, 255, 1 )",
+      isFillDirty = true,
       doStroke = true,
       strokeStyle = "rgba( 204, 204, 204, 1 )",
+      isStrokeDirty = true,
       lineWidth = 1,
       loopStarted = false,
       hasBackground = false,
@@ -4427,9 +4429,16 @@
         fillStyle = p.color.apply(this, arguments);
       }
       else {
-        curContext.fillStyle = p.color.apply(this, arguments);
+        var oldStyle = fillStyle;
+        fillStyle = p.color.apply(this, arguments);
+        isFillDirty = oldStyle !== fillStyle;
       }
     };
+    
+    function setFillStyle() {
+      curContext.fillStyle = fillStyle;
+      isFillDirty = false;
+    }
 
     p.noFill = function noFill() {
       doFill = false;
@@ -4441,10 +4450,17 @@
         strokeStyle = p.color.apply(this, arguments);
       }
       else {
-        curContext.strokeStyle = p.color.apply(this, arguments);
+        var oldStyle = strokeStyle;
+        strokeStyle = p.color.apply(this, arguments);
+        isStrokeDirty = oldStyle !== strokeStyle;
       }
     };
 
+    function setStrokeStyle() {
+      curContext.strokeStyle = strokeStyle;
+      isStrokeDirty = false;
+    }
+
     p.noStroke = function noStroke() {
       doStroke = false;
     };
@@ -4514,10 +4530,9 @@
           curContext.drawArrays(curContext.POINTS, 0, 1);
         }
       } else {
-        var oldFill = curContext.fillStyle;
-        curContext.fillStyle = curContext.strokeStyle;
-        curContext.fillRect(Math.round(x), Math.round(y), 1, 1);
-        curContext.fillStyle = oldFill;
+        curContext.fillStyle = strokeStyle;
+        curContext.fillRect(Math.round(x), Math.round(y), 1, 1); // ~~
+        isFillDirty = true;
       }
     };
 
@@ -4535,9 +4550,11 @@
           curContext.lineTo(firstX, firstY);
         }
         if (doFill) {
+          if(isFillDirty) { setFillStyle(); }
           curContext.fill();
         }
         if (doStroke) {
+          if(isStrokeDirty) { setStrokeStyle(); }
           curContext.stroke();
         }
 
@@ -4550,9 +4567,11 @@
       if (pathOpen) {
 
         if (doFill) {
+          if(isFillDirty) { setFillStyle(); }
           curContext.fill();
         }
         if (doStroke) {
+          if(isStrokeDirty) { setStrokeStyle(); }
           curContext.stroke();
         }
 
@@ -4923,11 +4942,13 @@
       curContext.arc(x, y, curEllipseMode === p.CENTER_RADIUS ? width : width / 2, start, stop, false);
 
       if (doStroke) {
+        if(isStrokeDirty) { setStrokeStyle(); }
         curContext.stroke();
       }
       curContext.lineTo(x, y);
 
       if (doFill) {
+        if(isFillDirty) { setFillStyle(); }
         curContext.fill();
       }
       curContext.closePath();
@@ -4988,6 +5009,7 @@
         curContext.beginPath();
         curContext.moveTo(x1 || 0, y1 || 0);
         curContext.lineTo(x2 || 0, y2 || 0);
+        if(isStrokeDirty) { setStrokeStyle(); }
         curContext.stroke();
         curContext.closePath();
       }
@@ -4997,6 +5019,7 @@
       curContext.beginPath();
       curContext.moveTo(x1, y1);
       curContext.bezierCurveTo(x2, y2, x3, y3, x4, y4);
+      if(isStrokeDirty) { setStrokeStyle(); }
       curContext.stroke();
       curContext.closePath();
     };
@@ -5065,9 +5088,11 @@
       Math.round(x) - offsetStart, Math.round(y) - offsetStart, Math.round(width) + offsetEnd, Math.round(height) + offsetEnd);
 
       if (doFill) {
+        if(isFillDirty) { setFillStyle(); }
         curContext.fill();
       }
       if (doStroke) {
+        if(isStrokeDirty) { setStrokeStyle(); }
         curContext.stroke();
       }
 
@@ -5126,9 +5151,11 @@
       }
 
       if (doFill) {
+        if(isFillDirty) { setFillStyle(); }
         curContext.fill();
       }
       if (doStroke) {
+        if(isStrokeDirty) { setStrokeStyle(); }
         curContext.stroke();
       }
 
@@ -5449,20 +5476,18 @@
           // it was a color
           // use canvas method to fill pixel with color
           // we need a color.toString prototype to convert ints to rgb(r,g,b) strings for canvas
-          oldFill = curContext.fillStyle;
           color = obj;
           curContext.fillStyle = p.color.toString(color);
           curContext.fillRect(Math.round(x), Math.round(y), 1, 1);
-          curContext.fillStyle = oldFill;
+          isFillDirty = true;
         } else if (typeof obj === "string"){
           // it was a color
           // use canvas method to fill pixel with color
           // we need a color.toString prototype to convert ints to rgb(r,g,b) strings for canvas
-          oldFill = curContext.fillStyle;
           color = obj;
           curContext.fillStyle = color;
           curContext.fillRect(Math.round(x), Math.round(y), 1, 1);
-          curContext.fillStyle = oldFill;
+          isFillDirty = true;
         } else if (obj instanceof PImage) {
           p.image(x,y,obj);
         }
@@ -5578,10 +5603,9 @@
           }
         } else if (arguments.length > 0) {
           curBackground = p.color.apply(this, arguments);
-          var oldFill = curContext.fillStyle;
           curContext.fillStyle = curBackground + "";
           curContext.fillRect(0, 0, p.width, p.height);
-          curContext.fillStyle = oldFill;
+          isFillDirty = true;
         }
       }
       hasBackground = true;
@@ -6019,6 +6043,9 @@
             curContext.save();
             curContext.translate(x, y + curTextSize);
 
+            if(isFillDirty && doFill) { setFillStyle(); }
+            if(isStrokeDirty && doStroke) { setStrokeStyle(); }
+
             var upem = font.units_per_em,
                 newScale = 1 / upem * curTextSize;