resize working

Author: lauren mccarthy

lib/p5.js

@@ -116,7 +116,8 @@ var core = function (require, shim, constants) {
         'keypress': null,
         'touchstart': null,
         'touchmove': null,
-        'touchend': null
+        'touchend': null,
+        'resize': null
       };
       this._start = function () {
         if (this._userNode) {
@@ -585,6 +586,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) {
@@ -1998,10 +2007,18 @@ var environment = function (require, core, constants) {
     p5.prototype.displayHeight = screen.height;
     p5.prototype.windowWidth = window.innerWidth;
     p5.prototype.windowHeight = window.innerHeight;
-    window.addEventListener('resize', function (e) {
-      this.windowWidth = window.innerWidth;
-      this.windowHeight = window.innerHeight;
-    });
+    p5.prototype.onresize = function (e) {
+      this._setProperty('windowWidth', window.innerWidth);
+      this._setProperty('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;
     p5.prototype.fullscreen = function (val) {
@@ -3911,13 +3928,27 @@ var renderingrendering = function (require, core, constants) {
       } else {
         document.body.appendChild(c);
       }
-      var pg = new p5.Graphics(c, this);
-      if (isDefault) {
+      var 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 pg = this._defaultGraphics;
+      if (pg) {
+        pg.resize(w * this._pixelDensity, h * this._pixelDensity);
+        pg.elt.setAttribute('width', w * this._pixelDensity);
+        pg.elt.setAttribute('height', h * this._pixelDensity);
+        pg.elt.setAttribute('style', 'width:' + w + 'px !important; height:' + h + 'px !important;');
+        this.scale(this._pixelDensity, this._pixelDensity);
+      }
+    };
     p5.prototype.noCanvas = function () {
       var c = document.getElementById('defaultCanvas');
       if (c) {

lib/p5.min.js

@@ -164,7 +164,8 @@ define(function (require) {
       'keypress': null,
       'touchstart': null,
       'touchmove': null,
-      'touchend': null
+      'touchend': null,
+      'resize': null
     };
 
     this._start = function () {

src/core/core.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>
    */
@@ -225,11 +225,40 @@ define(function(require) {
    * </code></div>
    */
   p5.prototype.windowHeight = window.innerHeight;
-  window.addEventListener('resize', function (e) {
-    // remap the window width and height on resize
-    this.windowWidth = window.innerWidth;
-    this.windowHeight = window.innerHeight;
-  });
+
+  /**
+   * The windowResized() function is called once every time the browser window
+   * is resized. This is a good place to resize the canvas or do any other 
+   * adjustements to accomodate the new window size.
+   *
+   * @property windowResized
+   * @example
+   * <div class="norender"><code>
+   * function setup() {
+   *   createCanvas(windowWidth, windowHeight);
+   * }
+   *
+   * function draw() {
+   *  background(0, 100, 200);
+   * }
+   *
+   * function windowResized() {
+   *   resizeCanvas(windowWidth, windowHeight);
+   * }
+   * </code></div>
+   */
+  p5.prototype.onresize = function(e){
+    this._setProperty('windowWidth', window.innerWidth);
+    this._setProperty('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();
+      }
+    }
+  };
 
   /**
    * System variable that stores the width of the drawing canvas. This value
@@ -255,7 +284,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 +355,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;
 });