diff --git a/examples/Games/Paperoids.html b/examples/Games/Paperoids.html
index 2a37c5f1..d5970e2a 100644
--- a/examples/Games/Paperoids.html
+++ b/examples/Games/Paperoids.html
@@ -491,10 +491,20 @@
}
-
-
+
+
diff --git a/examples/css/style.css b/examples/css/style.css
index d6954bb5..14e9026c 100644
--- a/examples/css/style.css
+++ b/examples/css/style.css
@@ -1,4 +1,12 @@
+html,
body {
margin: 0;
overflow: hidden;
-}
\ No newline at end of file
+ height: 100%;
+}
+
+/* Scale canvas with resize attribute to full size */
+canvas[resize] {
+ width: 100%;
+ height: 100%;
+}
diff --git a/src/view/CanvasView.js b/src/view/CanvasView.js
index ba7ad09d..59e23368 100644
--- a/src/view/CanvasView.js
+++ b/src/view/CanvasView.js
@@ -60,25 +60,16 @@ var CanvasView = View.extend(/** @lends CanvasView# */{
},
_setViewSize: function(size) {
- var width = size.width,
- height = size.height,
- pixelRatio = this._pixelRatio,
- element = this._element,
- style = element.style;
- // Upscale the canvas if the two ratios don't match.
- element.width = width * pixelRatio;
- element.height = height * pixelRatio;
- if (pixelRatio !== 1) {
- // If the canvas is resizable then don't override it otherwise
- // give it fixed dimensions so it doesn't get resized.
- if (this._resizable === false) {
- style.width = width + 'px';
- 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);
- }
+ var element = this._element,
+ pixelRatio = this._pixelRatio;
+ // Upscale the canvas if the pixel ratio is more than 1.
+ element.width = size.width * pixelRatio;
+ element.height = size.height * pixelRatio;
+ if (pixelRatio !== 1) {
+ // Scale the context to counter the fact that we've manually scaled
+ // our canvas element.
+ this._context.scale(pixelRatio, pixelRatio);
+ }
},
/**
diff --git a/src/view/View.js b/src/view/View.js
index a5981580..c6c3f8f4 100644
--- a/src/view/View.js
+++ b/src/view/View.js
@@ -53,42 +53,37 @@ var View = Base.extend(Emitter, /** @lends View# */{
tapHighlightColor: 'rgba(0,0,0,0)'
});
- var getCanvasSize = function() {
- // Try visible size first, since that will help handling previously
- // scaled canvases (e.g. when dealing with pixel-ratio)
- size = DomElement.getSize(element);
- if (size.isNaN() || size.isZero()) {
- // If the element is invisible, we cannot directly access
- // element.width / height, because they would appear 0.
- // Reading the attributes should still work.
- var getSize = function(name) {
- return element[name]
- || parseInt(element.getAttribute(name), 10);
- };
- size = new Size(getSize('width'), getSize('height'));
- }
- return size;
- };
+ function getSize(name) {
+ return element[name] || parseInt(element.getAttribute(name), 10);
+ };
+
+ function getCanvasSize() {
+ // Try visible size first, since that will help handling previously
+ // scaled canvases (e.g. when dealing with pixel-ratio)
+ var size = DomElement.getSize(element);
+ return size.isNaN() || size.isZero()
+ // If the element is invisible, we cannot directly access
+ // element.width / height, because they would appear 0.
+ // Reading the attributes should still work.
+ ? new Size(getSize('width'), getSize('height'))
+ : size;
+ };
// If the element has the resize attribute, listen to resize events and
// update its coordinate space accordingly
- this._resizable = PaperScope.hasAttribute(element, 'resize');
- if (this._resizable) {
- var that = this;
- this._windowEvents = {
- resize: function() {
- // setViewSize is aware of a resizable canvas and only updates the
- // coordinate space based on the physical dimensions and pixel ratio
- that.setViewSize(getCanvasSize());
- }
- };
- DomEvent.add(window, this._windowEvents);
- }
- // Set canvas size even if we just deterined the size from it, since
+ if (PaperScope.hasAttribute(element, 'resize')) {
+ var that = this;
+ DomEvent.add(window, this._windowEvents = {
+ resize: function() {
+ that.setViewSize(getCanvasSize());
+ }
+ });
+ }
+ // Set canvas size even if we just determined 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(getCanvasSize());
+ this._setViewSize(size = getCanvasSize());
// TODO: Test this on IE:
if (PaperScope.hasAttribute(element, 'stats')
&& typeof Stats !== 'undefined') {