From 3c4c5a6dea1bfa527d4b713cd2d4965ba1ec8a02 Mon Sep 17 00:00:00 2001
From: Paul Kaplan <pkaplan@media.mit.edu>
Date: Thu, 11 Jan 2018 11:31:16 -0500
Subject: [PATCH] Use style sizing to fix issues with Edge + flex + canvas.
Additionally render the canvas at a multiplier of the device pixel
ratio, so we get hidpi images for supported screens. The fixed CSS
sizing allows us to do that.
The problem was that on Edge, flexbox apparently can grow canvas
elements, whereas on Chrome/FF the canvas width/height is respected. No
problem, we can set the width/height in CSS to fix it, which
conveniently allows us to also fix the low-res-on-retina-screens problem
at the same time.
---
src/components/costume-canvas/costume-canvas.jsx | 8 ++++++--
1 file changed, 6 insertions(+), 2 deletions(-)
diff --git a/src/components/costume-canvas/costume-canvas.jsx b/src/components/costume-canvas/costume-canvas.jsx
index a142e8d27..72bccae5e 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
/>
);
--
GitLab