Specify canvas size by using CSS width/height.

ui/file_manager/gallery/js/image_editor/image_view.js

 // Copyright 2014 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 'use strict';
 
 /**
  * The overlay displaying the image.
  *
  * @param {HTMLElement} container The container element.
@@ skipping 83 matching lines @@
  * @override
  */
 ImageView.prototype.getZIndex = function() { return -1; };
 
 /**
  * @override
  */
 ImageView.prototype.draw = function() {
   if (!this.contentCanvas_)  // Do nothing if the image content is not set.
     return;
-
-  var forceRepaint = false;
-  var deviceBounds = this.viewport_.getDeviceBounds();
-  if (deviceBounds.width != this.screenImage_.width ||
-      deviceBounds.height != this.screenImage_.height) {
-    this.setupDeviceBuffer(this.screenImage_);
-    forceRepaint = true;
-  }
-
-  if (forceRepaint ||
+  if (this.setupDeviceBuffer(this.screenImage_) ||
       this.displayedContentGeneration_ !== this.contentGeneration_) {
     this.displayedContentGeneration_ = this.contentGeneration_;
     ImageUtil.trace.resetTimer('paint');
     this.paintDeviceRect(this.contentCanvas_, new Rect(this.contentCanvas_));
     ImageUtil.trace.reportTimer('paint');
   }
 };
 
 /**
  * Applies the viewport change that does not affect the screen cache size (zoom
@@ skipping 80 matching lines @@
   var canvas = this.document_.createElement('canvas');
   canvas.className = 'image';
   this.container_.appendChild(canvas);
   return canvas;
 };
 
 /**
  * Sets up the canvas as a buffer in the device resolution.
  *
  * @param {HTMLCanvasElement} canvas The buffer canvas.
+ * @return {boolean} True if the canvas needs to be rendered.
  */
 ImageView.prototype.setupDeviceBuffer = function(canvas) {
   // Set the canvas position and size in device pixels.
   var deviceRect = this.viewport_.getDeviceBounds();
-  if (canvas.width !== deviceRect.width)
+  var needRepaint = false;
+  if (canvas.width !== deviceRect.width) {
     canvas.width = deviceRect.width;
-  if (canvas.height !== deviceRect.height)
+    needRepaint = true;
+  }
+  if (canvas.height !== deviceRect.height) {
     canvas.height = deviceRect.height;
+    needRepaint = true;
+  }
 
   // Center the image.
-  var imageBoudns = this.viewport_.getImageElementBoundsOnScreen();
-  canvas.style.left = imageBoudns.left + 'px';
-  canvas.style.top = imageBoudns.top + 'px';
+  var imageBounds = this.viewport_.getImageElementBoundsOnScreen();
+  canvas.style.left = imageBounds.left + 'px';
+  canvas.style.top = imageBounds.top + 'px';
+  canvas.style.width = imageBounds.width + 'px';
+  canvas.style.height = imageBounds.height + 'px';
 
-  // Scale the canvas down to screen pixels.
   this.setTransform(canvas);
+
+  return needRepaint;
 };
 
 /**
  * @return {ImageData} A new ImageData object with a copy of the content.
  */
 ImageView.prototype.copyScreenImageData = function() {
   return this.screenImage_.getContext('2d').getImageData(
       0, 0, this.screenImage_.width, this.screenImage_.height);
 };
 
@@ skipping 580 matching lines @@
  * Obtains the CSS transformation string of the effect.
  * @param {DOMCanvas} element Canvas element to be applied the transforamtion.
  * @param {Viewport} viewport Current viewport.
  * @return CSS transformation description.
  */
 ImageView.Effect.prototype.transform = function(element, viewport) {
   throw new Error('Not implemented.');
 };
 
 /**
- * Default effect. It is not a no-op as it needs to adjust a canvas scale
- * for devicePixelRatio.
+ * Default effect.
  *
  * @constructor
  * @extends {ImageView.Effect}
  */
 ImageView.Effect.None = function() {
   ImageView.Effect.call(this, 0, 'easy-out');
 };
 
 /**
  * Inherits from ImageView.Effect.
@@ skipping 39 matching lines @@
 /**
  * @override
  */
 ImageView.Effect.Slide.prototype.transform = function(element, viewport) {
   return viewport.getShiftTransformation(this.shift_);
 };
 
 /**
  * Zoom effect.
  *
- * Animates the original rectangle to the target rectangle. Both parameters
- * should be given in device coordinates (accounting for devicePixelRatio).
+ * Animates the original rectangle to the target rectangle.
  *
  * @param {number} previousImageWidth Width of the full resolution image.
  * @param {number} previousImageHeight Hieght of the full resolution image.
  * @param {Rect} imageCropRect Crop rectangle in the full resolution image.
  * @param {number=} opt_duration Duration of the effect.
  * @constructor
  * @extends {ImageView.Effect}
  */
 ImageView.Effect.Zoom = function(
     previousImageWidth, previousImageHeight, imageCropRect, opt_duration) {
@@ skipping 53 matching lines @@
 };
 
 ImageView.Effect.Rotate.prototype = { __proto__: ImageView.Effect.prototype };
 
 /**
  * @override
  */
 ImageView.Effect.Rotate.prototype.transform = function(element, viewport) {
   return viewport.getInverseTransformForRotatedImage(this.orientation_);
 };