Specify canvas size by using CSS width/height.

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

Index: ui/file_manager/gallery/js/image_editor/image_view.js
diff --git a/ui/file_manager/gallery/js/image_editor/image_view.js b/ui/file_manager/gallery/js/image_editor/image_view.js
index 61dd50ee0908394854e201c772ebfd385388cd28..2a7148a4bc2808416edc99a17592d463039db9c1 100644
--- a/ui/file_manager/gallery/js/image_editor/image_view.js
+++ b/ui/file_manager/gallery/js/image_editor/image_view.js
@@ -101,16 +101,7 @@ ImageView.prototype.getZIndex = function() { return -1; };
 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');
@@ -215,18 +206,26 @@ ImageView.prototype.createOverlayCanvas = function() {
 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();

[fukino, 2014/07/22 05:32:18]

nit: imageBounds?

[hirono, 2014/07/22 06:51:28]

Yes, renamed.

   canvas.style.left = imageBoudns.left + 'px';
   canvas.style.top = imageBoudns.top + 'px';
+  canvas.style.width = imageBoudns.width + 'px';
+  canvas.style.height = imageBoudns.height + 'px';
 
-  // Scale the canvas down to screen pixels.
   this.setTransform(canvas);
+
+  return needRepaint;

[fukino, 2014/07/22 05:32:18]

nit: Please write a comment for return value.

[hirono, 2014/07/22 06:51:28]

Done.

 };
 
 /**
@@ -827,8 +826,7 @@ ImageView.Effect.prototype.transform = function(element, viewport) {
 };
 
 /**
- * Default effect. It is not a no-op as it needs to adjust a canvas scale
- * for devicePixelRatio.
+ * Default effect.
  *
  * @constructor
  * @extends {ImageView.Effect}
@@ -888,8 +886,7 @@ ImageView.Effect.Slide.prototype.transform = function(element, viewport) {
 /**
  * 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.