diff --git a/src/components/costume-canvas/costume-canvas.jsx b/src/components/costume-canvas/costume-canvas.jsx
index 72bccae5eb05e3379f2ccc944d8a48bebbe86c62..4375572c1e28f102d758370c83637f26ca113dbe 100644
--- a/src/components/costume-canvas/costume-canvas.jsx
+++ b/src/components/costume-canvas/costume-canvas.jsx
@@ -105,12 +105,12 @@ class CostumeCanvas extends React.Component {
         return (
             <canvas
                 className={this.props.className}
-                height={this.props.height * window.devicePixelRatio}
+                height={this.props.height * (window.devicePixelRatio || 1)}
                 style={{
                     height: `${this.props.height}px`,
                     width: `${this.props.width}px`
                 }}
-                width={this.props.width * window.devicePixelRatio}
+                width={this.props.width * (window.devicePixelRatio || 1)}
                 ref={c => (this.canvas = c)} // eslint-disable-line react/jsx-sort-props
             />
         );
diff --git a/test/unit/components/__snapshots__/sprite-selector-item.test.jsx.snap b/test/unit/components/__snapshots__/sprite-selector-item.test.jsx.snap
index 62c177e38ba2b9fee6808cb0d5ee37a75bf37a6a..19abc2a16d378f0cc2a9dbe1dbf93fe4748b2c45 100644
--- a/test/unit/components/__snapshots__/sprite-selector-item.test.jsx.snap
+++ b/test/unit/components/__snapshots__/sprite-selector-item.test.jsx.snap
@@ -26,6 +26,12 @@ exports[`SpriteSelectorItemComponent matches snapshot when selected 1`] = `
   <canvas
     className={undefined}
     height={32}
+    style={
+      Object {
+        "height": "32px",
+        "width": "32px",
+      }
+    }
     width={32}
   />
   <div