Fix #3709 and fix #3669, remove oversampling of canvas

server/src/pages/shot/editor.js

@@ -33,7 +33,7 @@ exports.Editor = class Editor extends React.Component {
       </div>
       <div className="main-container">
         <div className="canvas-container" id="canvas-container" ref={(canvasContainer) => this.canvasContainer = canvasContainer}>
-          <canvas className="image-holder centered" id="image-holder" ref={(image) => { this.imageCanvas = image }} height={ 2 * canvasHeight } width={ 2 * canvasWidth } style={{height: canvasHeight, width: canvasWidth}}></canvas>
+          <canvas className="image-holder centered" id="image-holder" ref={(image) => { this.imageCanvas = image }} height={ canvasHeight } width={ canvasWidth } style={{height: canvasHeight, width: canvasWidth}}></canvas>
           <canvas className="highlighter centered" id="highlighter" ref={(highlighter) => { this.highlighter = highlighter }} height={canvasHeight} width={canvasWidth}></canvas>
           <canvas className={"editor centered " + this.state.tool} id="editor" ref={(editor) => { this.editor = editor }} height={canvasHeight} width={canvasWidth}></canvas>
         </div>
@@ -78,12 +78,10 @@ exports.Editor = class Editor extends React.Component {
     this.highlightContext = this.highlighter.getContext('2d');
     let imageContext = this.imageCanvas.getContext('2d');
     this.imageContext = imageContext;
-    // From https://blog.headspin.com/?p=464, we oversample the canvas for improved image quality
     let img = new Image();
     img.src = this.props.clip.image.url;
     let width = this.props.clip.image.dimensions.x;
     let height = this.props.clip.image.dimensions.y;
-    this.imageContext.scale(2, 2);
     this.imageContext.drawImage(img, 0, 0, width, height);
     this.edit();
   }