diff --git a/src/components/costume-canvas/costume-canvas.jsx b/src/components/costume-canvas/costume-canvas.jsx
index a142e8d27e642fbd4225d2e8f7a87ab6cf1ab34f..72bccae5eb05e3379f2ccc944d8a48bebbe86c62 100644
--- a/src/components/costume-canvas/costume-canvas.jsx
+++ b/src/components/costume-canvas/costume-canvas.jsx
@@ -105,8 +105,12 @@ class CostumeCanvas extends React.Component {
         return (
             <canvas
                 className={this.props.className}
-                height={this.props.height}
-                width={this.props.width}
+                height={this.props.height * window.devicePixelRatio}
+                style={{
+                    height: `${this.props.height}px`,
+                    width: `${this.props.width}px`
+                }}
+                width={this.props.width * window.devicePixelRatio}
                 ref={c => (this.canvas = c)} // eslint-disable-line react/jsx-sort-props
             />
         );