Merge branch 'georeith-true-resize-canvas'

src/view/CanvasView.js

@@ -68,13 +68,17 @@ var CanvasView = View.extend(/** @lends CanvasView# */{
         // Upscale the canvas if the two ratios don't match.
         element.width = width * pixelRatio;
         element.height = height * pixelRatio;
-        if (pixelRatio !== 1) {
+    		if (pixelRatio !== 1) {
-            style.width = width + 'px';
+          // If the canvas is resizable then don't override it otherwise
-            style.height = height + 'px';
+          // give it fixed dimensions so it doesn't get resized.
-            // Now scale the context to counter the fact that we've manually
+    			if (this._resizable === false) {
-            // scaled our canvas element.
+    				style.width = width + 'px';
-            this._context.scale(pixelRatio, pixelRatio);
+    				style.height = height + 'px';
-        }
+    			}
+          // Now scale the context to counter the fact that we've manually
+          // scaled our canvas element.
+    			this._context.scale(pixelRatio, pixelRatio);
+    		}
     },
 
     /**

src/view/View.js

@@ -52,48 +52,43 @@ var View = Base.extend(Emitter, /** @lends View# */{
             userDrag: none,
             tapHighlightColor: 'rgba(0,0,0,0)'
         });
-        // If the element has the resize attribute, resize the it to fill the
+
-        // window and resize it again whenever the user resizes the window.
+    		var getCanvasSize = function() {
-        if (PaperScope.hasAttribute(element, 'resize')) {
+          // Try visible size first, since that will help handling previously
-            // Subtract element' viewport offset from the total size, to
+          // scaled canvases (e.g. when dealing with pixel-ratio)
-            // stretch it in
+    			size = DomElement.getSize(element);
-            var offset = DomElement.getOffset(element, true),
+    			if (size.isNaN() || size.isZero()) {
-                that = this;
+            // If the element is invisible, we cannot directly access
-            size = DomElement.getViewportBounds(element)
+            // element.width / height, because they would appear 0.
-                    .getSize().subtract(offset);
+            // Reading the attributes should still work.
-            this._windowEvents = {
+    				var getSize = function(name) {
-                resize: function() {
+    					return element[name]
-                    // Only update element offset if it's not invisible, as
+    							|| parseInt(element.getAttribute(name), 10);
-                    // otherwise the offset would be wrong.
+    				};
-                    if (!DomElement.isInvisible(element))
+    				size = new Size(getSize('width'), getSize('height'));
-                        offset = DomElement.getOffset(element, true);
+    			}
-                    // Set the size now, which internally calls onResize
+    			return size;
-                    // and redraws the view
+    		};
-                    that.setViewSize(DomElement.getViewportBounds(element)
+
-                            .getSize().subtract(offset));
+        // If the element has the resize attribute, listen to resize events and
-                }
+        // update its coordinate space accordingly
-            };
+    		this._resizable = PaperScope.hasAttribute(element, 'resize');
-            DomEvent.add(window, this._windowEvents);
+    		if (this._resizable) {
-        } else {
+    			var that = this;
-            // Try visible size first, since that will help handling previously
+    			this._windowEvents = {
-            // scaled canvases (e.g. when dealing with pixel-ratio)
+    				resize: function() {
-            size = DomElement.getSize(element);
+              // setViewSize is aware of a resizable canvas and only updates the
-            if (size.isNaN() || size.isZero()) {
+              // coordinate space based on the physical dimensions and pixel ratio
-                // If the element is invisible, we cannot directly access
+    					that.setViewSize(getCanvasSize());
-                // element.width / height, because they would appear 0.
+    				}
-                // Reading the attributes should still work.
+    			};
-                var getSize = function(name) {
+    			DomEvent.add(window, this._windowEvents);
-                    return element[name]
+    		}
-                            || parseInt(element.getAttribute(name), 10);
-                };
-                size = new Size(getSize('width'), getSize('height'));
-            }
-        }
         // Set canvas size even if we just deterined the size from it, since
         // it might have been set to a % size, in which case it would use some
         // default internal size (300x150 on WebKit) and scale up the pixels.
         // We also need this call here for HiDPI support.
-        this._setViewSize(size);
+    		this._setViewSize(getCanvasSize());
         // TODO: Test this on IE:
         if (PaperScope.hasAttribute(element, 'stats')
                 && typeof Stats !== 'undefined') {