Handle resize events and allow canvas resizing

* Added windowResized callback
* Made the createCanvas keep an id around so we can find user created canvases later
* Changed createCanvas to resize the graphics object if it already exists
* Added a resizeCanvas method
* Added resize to the p5.Graphics object
* (Minor) My editor stripped whitespace on some lines. It was only a small subset so I believe your standard is to strip them so I left it in.

Author: Gareth Lewin

lib/p5.js

@@ -583,6 +583,14 @@ var p5Graphics = function (require, core, constants) {
       this.drawingContext.lineCap = constants.ROUND;
     };
     p5.Graphics.prototype = Object.create(p5.Element.prototype);
+    p5.Graphics.prototype.resize = function (w, h) {
+      this.width = w;
+      this.height = h;
+      if (this._pInst) {
+        this._pInst._setProperty('width', this.width);
+        this._pInst._setProperty('height', this.height);
+      }
+    };
     return p5.Graphics;
   }({}, core, constants);
 var filters = function (require) {
@@ -1999,6 +2007,14 @@ var environment = function (require, core, constants) {
     window.addEventListener('resize', function (e) {
       this.windowWidth = window.innerWidth;
       this.windowHeight = window.innerHeight;
+      var context = this._isGlobal ? window : this;
+      var executeDefault;
+      if (typeof context.windowResized === 'function') {
+        executeDefault = context.windowResized(e);
+        if (executeDefault !== undefined && !executeDefault) {
+          e.preventDefault();
+        }
+      }
     });
     p5.prototype.width = 0;
     p5.prototype.height = 0;
@@ -3884,7 +3900,7 @@ var renderingrendering = function (require, core, constants) {
       } else {
         c = document.getElementById('defaultCanvas');
         if (c) {
-          c.id = '';
+          c.id = 'userCanvas';
         } else {
           var warn = 'Warning: createCanvas more than once NOT recommended.';
           warn += ' Very unpredictable behavior may result.';
@@ -3903,13 +3919,32 @@ var renderingrendering = function (require, core, constants) {
       } else {
         document.body.appendChild(c);
       }
-      var pg = new p5.Graphics(c, this);
-      if (isDefault) {
+      var pg;
+      pg = this._defaultGraphics;
+      if (!pg) {
+        pg = new p5.Graphics(c, this);
         this._elements.push(pg);
+        this._defaultGraphics = pg;
+      } else {
+        pg.resize(w * this._pixelDensity, h * this._pixelDensity);
       }
       this.scale(this._pixelDensity, this._pixelDensity);
       return pg;
     };
+    p5.prototype.resizeCanvas = function (w, h) {
+      var c = document.getElementById('defaultCanvas');
+      if (!c) {
+        c = document.getElementById('userCanvas');
+      }
+      c.setAttribute('width', w * this._pixelDensity);
+      c.setAttribute('height', h * this._pixelDensity);
+      c.setAttribute('style', 'width:' + w + 'px !important; height:' + h + 'px !important;');
+      var pg = this._defaultGraphics;
+      if (pg) {
+        pg.resize(w * this._pixelDensity, h * this._pixelDensity);
+      }
+      this.scale(this._pixelDensity, this._pixelDensity);
+    };
     p5.prototype.noCanvas = function () {
       var c = document.getElementById('defaultCanvas');
       if (c) {

lib/p5.min.js

@@ -55,14 +55,14 @@ define(function(require) {
    *   </code></div>
    */
   p5.prototype.focused = true;
-  
+
   /**
    * Sets the cursor to a predefined symbol or an image, or makes it visible
    * if already hidden. If you are trying to set an image as the cursor, the
    * recommended size is 16x16 or 32x32 pixels. It is not possible to load an
    * image as the cursor if you are exporting your program for the Web, and not
    * all MODES work with all browsers. The values for parameters x and y must
-   * be less than the dimensions of the image. 
+   * be less than the dimensions of the image.
    *
    * @method cursor
    * @param {Number/Constant} type either ARROW, CROSS, HAND, MOVE, TEXT, or
@@ -74,7 +74,7 @@ define(function(require) {
    * // Move the mouse left and right across the image
    * // to see the cursor change from a cross to a hand
    * function draw() {
-   *   line(width/2, 0, width/2, height); 
+   *   line(width/2, 0, width/2, height);
    *   if (mouseX < 50) {
    *     cursor(CROSS);
    *   } else {
@@ -159,8 +159,8 @@ define(function(require) {
   };
 
   /**
-   * Hides the cursor from view. 
-   * 
+   * Hides the cursor from view.
+   *
    * @method noCursor
    * @example
    * <div><code>
@@ -170,7 +170,7 @@ define(function(require) {
    *
    * function draw() {
    *   background(200);
-   *   ellipse(mouseX, mouseY, 10, 10); 
+   *   ellipse(mouseX, mouseY, 10, 10);
    * }
    * </code></div>
    */
@@ -229,6 +229,16 @@ define(function(require) {
     // remap the window width and height on resize
     this.windowWidth = window.innerWidth;
     this.windowHeight = window.innerHeight;
+
+    var context = this._isGlobal ? window : this;
+    var executeDefault;
+    if (typeof context.windowResized === 'function') {
+      executeDefault = context.windowResized(e);
+      if(executeDefault !== undefined && !executeDefault) {
+        e.preventDefault();
+      }
+    }
+
   });
 
   /**
@@ -255,7 +265,7 @@ define(function(require) {
 
   /**
    * If argument is given, sets the sketch to fullscreen or not based on the
-   * value of the argument. If no argument is given, returns the current 
+   * value of the argument. If no argument is given, returns the current
    * fullscreen state. Note that due to browser restrictions this can only
    * be called on user input, for example, on mouse press like the example
    * below.
@@ -326,4 +336,4 @@ define(function(require) {
 
   return p5;
 
-});
+});

src/environment/environment.js

@@ -9,12 +9,12 @@ define(function(require) {
   var constants = require('constants');
 
   /**
-   * Main graphics and rendering context, as well as the base API 
-   * implementation for p5.js "core". Use this class if you need to draw into 
-   * an off-screen graphics buffer. A p5.Graphics object can be constructed 
-   * with the <code>createGraphics()</code> function. The fields and methods 
+   * Main graphics and rendering context, as well as the base API
+   * implementation for p5.js "core". Use this class if you need to draw into
+   * an off-screen graphics buffer. A p5.Graphics object can be constructed
+   * with the <code>createGraphics()</code> function. The fields and methods
    * for this class are extensive, but mirror the normal drawing API for p5.
-   * 
+   *
    * @class p5.Graphics
    * @constructor
    * @extends p5.Element
@@ -33,7 +33,7 @@ define(function(require) {
    *   pg.background(100);
    *   pg.noStroke();
    *   pg.ellipse(pg.width/2, pg.height/2, 50, 50);
-   *   image(pg, 9, 30); 
+   *   image(pg, 9, 30);
    *   image(pg, 51, 30);
    * }
    * </code>
@@ -53,14 +53,22 @@ define(function(require) {
     } else { // hide if offscreen buffer
       this.canvas.style.display = 'none';
     }
-    
+
     this.drawingContext.fillStyle = '#FFFFFF';
     this.drawingContext.strokeStyle = '#000000';
     this.drawingContext.lineCap = constants.ROUND;
   };
 
   p5.Graphics.prototype = Object.create(p5.Element.prototype);
 
+  p5.Graphics.prototype.resize = function(w, h) {
+    this.width = w;
+    this.height = h;
+    if (this._pInst) {
+      this._pInst._setProperty('width', this.width);
+      this._pInst._setProperty('height', this.height);
+    }
+  };
 
   return p5.Graphics;
 });

src/objects/p5.Graphics.js

@@ -13,15 +13,15 @@ define(function(require) {
    * Creates a canvas element in the document, and sets the dimensions of it
    * in pixels. This method should be called only once at the start of setup.
    * <br>
-   * The system variables width and height are set by the parameters passed 
-   * to this function. If createCanvas() is not used, the window will be 
-   * given a default size of 100x100 pixels. 
+   * The system variables width and height are set by the parameters passed
+   * to this function. If createCanvas() is not used, the window will be
+   * given a default size of 100x100 pixels.
    *
    * @method createCanvas
    * @param  {Number} w width of the canvas
    * @param  {Number} h height of the canvas
    * @return {Object} canvas generated
-   * @example 
+   * @example
    * <div>
    * <code>
    * function setup() {
@@ -40,7 +40,7 @@ define(function(require) {
     } else { // resize the default canvas if new one is created
       c = document.getElementById('defaultCanvas');
       if (c) {
-        c.id = ''; // remove default id
+        c.id = 'userCanvas'; // remove default id
       } else { // probably user calling createCanvas more than once... uhoh
         // c = document.createElement('canvas');
 
@@ -53,11 +53,11 @@ define(function(require) {
       }
     }
 
+
     c.setAttribute('width', w*this._pixelDensity);
     c.setAttribute('height', h*this._pixelDensity);
     c.setAttribute('style',
       'width:'+w+'px !important; height:'+h+'px !important;');
-
     // set to invisible if still in setup (to prevent flashing with manipulate)
     if (!this._setupDone) {
       c.className += ' p5_hidden'; // tag to show later
@@ -70,21 +70,49 @@ define(function(require) {
       document.body.appendChild(c);
     }
 
-    var pg = new p5.Graphics(c, this);
-    if (isDefault) {
-      // store in elements array
+    var pg;
+    pg = this._defaultGraphics;
+    if (!pg) {
+      pg = new p5.Graphics(c, this);
       this._elements.push(pg);
+      this._defaultGraphics = pg;
+    }
+    else
+    {
+      pg.resize (w*this._pixelDensity, h*this._pixelDensity);
     }
+
     this.scale(this._pixelDensity, this._pixelDensity);
     return pg;
   };
 
+  p5.prototype.resizeCanvas = function(w, h) {
+    // What do we do if we have two canvases due to userNode
+
+    var c = document.getElementById('defaultCanvas');
+    if (!c) {
+      c = document.getElementById('userCanvas');
+    }
+
+    c.setAttribute('width', w*this._pixelDensity);
+    c.setAttribute('height', h*this._pixelDensity);
+    c.setAttribute('style',
+      'width:'+w+'px !important; height:'+h+'px !important;');
+
+    var pg = this._defaultGraphics;
+    if (pg) {
+      pg.resize (w*this._pixelDensity, h*this._pixelDensity);
+    }
+    this.scale(this._pixelDensity, this._pixelDensity);
+
+  };
+
 
   /**
-   * Removes the default canvas for a p5 sketch that doesn't 
+   * Removes the default canvas for a p5 sketch that doesn't
    * require a canvas
    * @method noCanvas
-   * @example 
+   * @example
    * <div>
    * <code>
    * function setup() {
@@ -101,10 +129,10 @@ define(function(require) {
   };
 
   /**
-   * Creates and returns a new p5.Graphics object. Use this class if you need 
+   * Creates and returns a new p5.Graphics object. Use this class if you need
    * to draw into an off-screen graphics buffer. The two parameters define the
    * width and height in pixels.
-   * 
+   *
    * @method createGraphics
    * @param  {Number} w width of the offscreen graphics buffer
    * @param  {Number} h height of the offscreen graphics buffer
@@ -122,7 +150,7 @@ define(function(require) {
    *   pg.background(100);
    *   pg.noStroke();
    *   pg.ellipse(pg.width/2, pg.height/2, 50, 50);
-   *   image(pg, 50, 50); 
+   *   image(pg, 50, 50);
    *   image(pg, 0, 0, 50, 50);
    * }
    * </code>
@@ -137,7 +165,7 @@ define(function(require) {
     //c.style.visibility='hidden';
     var node = this._userNode || document.body;
     node.appendChild(c);
-    
+
     var pg = new p5.Graphics(c);
     // store in elements array
     this._elements.push(pg);
@@ -156,39 +184,39 @@ define(function(require) {
   };
 
   /**
-   * Blends the pixels in the display window according to the defined mode. 
-   * There is a choice of the following modes to blend the source pixels (A) 
+   * Blends the pixels in the display window according to the defined mode.
+   * There is a choice of the following modes to blend the source pixels (A)
    * with the ones of pixels already in the display window (B):
    * <ul>
-   * <li><code>BLEND</code> - linear interpolation of colours: C = 
+   * <li><code>BLEND</code> - linear interpolation of colours: C =
    * A*factor + B. This is the default blending mode.</li>
    * <li><code>ADD</code> - sum of A and B</li>
-   * <li><code>DARKEST</code> - only the darkest colour succeeds: C = 
+   * <li><code>DARKEST</code> - only the darkest colour succeeds: C =
    * min(A*factor, B).</li>
-   * <li><code>LIGHTEST</code> - only the lightest colour succeeds: C = 
+   * <li><code>LIGHTEST</code> - only the lightest colour succeeds: C =
    * max(A*factor, B).</li>
    * <li><code>DIFFERENCE</code> - subtract colors from underlying image.</li>
    * <li><code>EXCLUSION</code> - similar to <code>DIFFERENCE</code>, but less
    * extreme.</li>
-   * <li><code>MULTIPLY</code> - multiply the colors, result will always be 
+   * <li><code>MULTIPLY</code> - multiply the colors, result will always be
    * darker.</li>
-   * <li><code>SCREEN</code> - opposite multiply, uses inverse values of the 
+   * <li><code>SCREEN</code> - opposite multiply, uses inverse values of the
    * colors.</li>
    * <li><code>REPLACE</code> - the pixels entirely replace the others and
    * don't utilize alpha (transparency) values.</li>
    * <li><code>OVERLAY</code> - mix of <code>MULTIPLY</code> and <code>SCREEN
    * </code>. Multiplies dark values, and screens light values.</li>
-   * <li><code>HARD_LIGHT</code> - <code>SCREEN</code> when greater than 50% 
+   * <li><code>HARD_LIGHT</code> - <code>SCREEN</code> when greater than 50%
    * gray, <code>MULTIPLY</code> when lower.</li>
-   * <li><code>SOFT_LIGHT</code> - mix of <code>DARKEST</code> and 
+   * <li><code>SOFT_LIGHT</code> - mix of <code>DARKEST</code> and
    * <code>LIGHTEST</code>. Works like <code>OVERLAY</code>, but not as harsh.
    * </li>
-   * <li><code>DODGE</code> - lightens light tones and increases contrast, 
+   * <li><code>DODGE</code> - lightens light tones and increases contrast,
    * ignores darks.</li>
    * <li><code>BURN</code> - darker areas are applied, increasing contrast,
    * ignores lights.</li>
    * </ul>
-   * 
+   *
    * @method blendMode
    * @param  {String/Constant} mode blend mode to set for canvas
    * @example