From: Misty De Meo <mistydemeo@github.com>
Date: Sun, 29 Jan 2017 13:26:50 +0000 (-0800)
Subject: Fix avatar scaling on high-DPI displays (#573)
X-Git-Url: https://git.xn--scling-oua.cat.family/?a=commitdiff_plain;h=a30e669df24e680fa94fc954144d2fa9b04fcf4f;p=mastodon.git

Fix avatar scaling on high-DPI displays (#573)
---

diff --git a/app/assets/javascripts/components/components/avatar.jsx b/app/assets/javascripts/components/components/avatar.jsx
index b8420014b..8d5c90b33 100644
--- a/app/assets/javascripts/components/components/avatar.jsx
+++ b/app/assets/javascripts/components/components/avatar.jsx
@@ -25,7 +25,7 @@ const Avatar = React.createClass({
   },
 
   handleLoad () {
-    this.canvas.getContext('2d').drawImage(this.image, 0, 0, this.props.size, this.props.size);
+    this.canvas.getContext('2d').drawImage(this.image, 0, 0, this.props.size * window.devicePixelRatio, this.props.size * window.devicePixelRatio);
   },
 
   setImageRef (c) {
@@ -42,7 +42,7 @@ const Avatar = React.createClass({
     return (
       <div onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave} style={{ ...this.props.style, width: `${this.props.size}px`, height: `${this.props.size}px`, position: 'relative' }}>
         <img ref={this.setImageRef} onLoad={this.handleLoad} src={this.props.src} width={this.props.size} height={this.props.size} alt='' style={{ position: 'absolute', top: '0', left: '0', visibility: hovering ? 'visible' : 'hidden', borderRadius: '4px' }} />
-        <canvas ref={this.setCanvasRef} width={this.props.size} height={this.props.size} style={{ borderRadius: '4px' }} />
+        <canvas ref={this.setCanvasRef} width={this.props.size * window.devicePixelRatio} height={this.props.size * window.devicePixelRatio} style={{ borderRadius: '4px', width: this.props.size, height: this.props.size }} />
       </div>
     );
   }