fixing text to account for nostroke and nofill

Author: lauren mccarthy

examples/addons/p5.dom/input_button/sketch.js

@@ -1,31 +1,35 @@
-var canvas, input, button, greeting;
+var input, button, greeting;
 
 function setup() {
 
   // create canvas
-  canvas = createCanvas(400, 150);
-  canvas.position(0, 0);
+  createCanvas(710, 400);
 
-  input = createInput('enter your name');
-  input.position(10, 10);
+  input = createInput();
+  input.position(20, 65);
 
   button = createButton('submit');
-  button.position(140, 10);
+  button.position(150, 65);
   button.mousePressed(greet);
 
-  greeting = createElement('h1');
-  greeting.position(10, 15);
-  greeting.size(380, 300);
-  noStroke();
+  greeting = createElement('h2', 'what is your name?');
+  greeting.position(20, 5);
 
+  textAlign(CENTER)
+  textSize(50);
 }
 
 function greet() {
   var name = input.value();
   greeting.html('hello '+name+'!');
-
-  background(random(255), random(255), random(255));
-  for (var i=0; i<name.length; i++) {
-    ellipse(random(width), random(height), 20, 20);
+  input.value('');
+
+  for (var i=0; i<200; i++) {
+    push();
+    fill(random(255), 255, 255);
+    translate(random(width), random(height));
+    rotate(random(2*PI));
+    text(name, 0, 0);
+    pop();
   }
 }

lib/p5.js

@@ -4198,8 +4198,12 @@ var typographyloading_displaying = function (require, core, canvas) {
     p5.prototype.text = function () {
       this.canvas.getContext('2d').font = this._textStyle + ' ' + this._textSize + 'px ' + this._textFont;
       if (arguments.length === 3) {
-        this.canvas.getContext('2d').fillText(arguments[0], arguments[1], arguments[2]);
-        this.canvas.getContext('2d').strokeText(arguments[0], arguments[1], arguments[2]);
+        if (this._doFill) {
+          this.canvas.getContext('2d').fillText(arguments[0], arguments[1], arguments[2]);
+        }
+        if (this._doStroke) {
+          this.canvas.getContext('2d').strokeText(arguments[0], arguments[1], arguments[2]);
+        }
       } else if (arguments.length === 5) {
         var words = arguments[0].split(' ');
         var line = '';
@@ -4212,17 +4216,25 @@ var typographyloading_displaying = function (require, core, canvas) {
           if (vals.y > vals.h) {
             break;
           } else if (testWidth > vals.w && n > 0) {
-            this.canvas.getContext('2d').fillText(line, vals.x, vals.y);
-            this.canvas.getContext('2d').strokeText(line, vals.x, vals.y);
+            if (this._doFill) {
+              this.canvas.getContext('2d').fillText(line, vals.x, vals.y);
+            }
+            if (this._doStroke) {
+              this.canvas.getContext('2d').strokeText(line, vals.x, vals.y);
+            }
             line = words[n] + ' ';
             vals.y += this._textLeading;
           } else {
             line = testLine;
           }
         }
         if (vals.y <= vals.h) {
-          this.canvas.getContext('2d').fillText(line, vals.x, vals.y);
-          this.canvas.getContext('2d').strokeText(line, vals.x, vals.y);
+          if (this._doFill) {
+            this.canvas.getContext('2d').fillText(line, vals.x, vals.y);
+          }
+          if (this._doStroke) {
+            this.canvas.getContext('2d').strokeText(line, vals.x, vals.y);
+          }
         }
       }
     };

lib/p5.min.js

@@ -63,16 +63,20 @@ define(function (require) {
 
     if (arguments.length === 3) {
 
-      this.canvas.getContext('2d').fillText(
-        arguments[0],
-        arguments[1],
-        arguments[2]
-      );
-      this.canvas.getContext('2d').strokeText(
-        arguments[0],
-        arguments[1],
-        arguments[2]
-      );
+      if (this._doFill) {
+        this.canvas.getContext('2d').fillText(
+          arguments[0],
+          arguments[1],
+          arguments[2]
+        );
+      }
+      if (this._doStroke) {
+        this.canvas.getContext('2d').strokeText(
+          arguments[0],
+          arguments[1],
+          arguments[2]
+        );
+      }
 
     } else if (arguments.length === 5) {
 
@@ -100,8 +104,12 @@ define(function (require) {
 
         } else if (testWidth > vals.w && n > 0) {
 
-          this.canvas.getContext('2d').fillText(line, vals.x, vals.y);
-          this.canvas.getContext('2d').strokeText(line, vals.x, vals.y);
+          if (this._doFill) {
+            this.canvas.getContext('2d').fillText(line, vals.x, vals.y);
+          }
+          if (this._doStroke) {
+            this.canvas.getContext('2d').strokeText(line, vals.x, vals.y);
+          }
           line = words[n] + ' ';
           vals.y += this._textLeading;
 
@@ -113,9 +121,12 @@ define(function (require) {
       }
 
       if (vals.y <= vals.h) {
-
-        this.canvas.getContext('2d').fillText(line, vals.x, vals.y);
-        this.canvas.getContext('2d').strokeText(line, vals.x, vals.y);
+        if (this._doFill) {
+          this.canvas.getContext('2d').fillText(line, vals.x, vals.y);
+        }
+        if (this._doStroke) {
+          this.canvas.getContext('2d').strokeText(line, vals.x, vals.y);
+        }
       }
     }
   };