make it 640 by 360

README.md

@@ -90,7 +90,7 @@ import PaintEditor from 'scratch-paint';
 ```
 
 `image`: may either be nothing, an SVG string or a base64 data URI)
-SVGs of up to size 480 x 360 will fit into the view window of the paint editor, while bitmaps of size up to 960 x 720 will fit into the paint editor. One unit of an SVG will appear twice as tall and wide as one unit of a bitmap. This quirky import behavior comes from needing to support legacy projects in Scratch.
+SVGs of up to size 640 x 360 will fit into the view window of the paint editor, while bitmaps of size up to 1280 x 720 will fit into the paint editor. One unit of an SVG will appear twice as tall and wide as one unit of a bitmap. This quirky import behavior comes from needing to support legacy projects in Scratch.
 
 `imageId`: If this parameter changes, then the paint editor will be cleared, the undo stack reset, and the image re-imported.
 

src/components/paint-editor/paint-editor.css

@@ -115,7 +115,7 @@ $border-radius: 0.25rem;
 }
 
 .canvas-container {
-    width: 480px;
+    width: 640px;
     height: 360px;
     box-sizing: content-box;
     border: 1px solid #e8edf1;

src/containers/paint-editor.jsx

@@ -43,8 +43,8 @@ import bindAll from 'lodash.bindall';
  * />
  *
  * `image`: may either be nothing, an SVG string or a base64 data URI)
- * SVGs of up to size 480 x 360 will fit into the view window of the paint editor,
- * while bitmaps of size up to 960 x 720 will fit into the paint editor. One unit
+ * SVGs of up to size 640 x 360 will fit into the view window of the paint editor,
+ * while bitmaps of size up to 1280 x 720 will fit into the paint editor. One unit
  * of an SVG will appear twice as tall and wide as one unit of a bitmap. This quirky
  * import behavior comes from needing to support legacy projects in Scratch.
  *

src/containers/paper-canvas.css

@@ -1,5 +1,5 @@
 .paper-canvas {
-    width: 480px;
+    width: 640px;
     height: 360px;
     margin: auto;
     position: absolute;

src/containers/paper-canvas.jsx

@@ -268,7 +268,7 @@ class PaperCanvas extends React.Component {
                 height="360px"
                 ref={this.setCanvas}
                 style={{cursor: this.props.cursor}}
-                width="480px"
+                width="640px"
             />
         );
     }

src/helper/layer.js

@@ -31,7 +31,7 @@ const createCanvas = function (width, height) {
 const clearRaster = function () {
     const layer = _getLayer('isRasterLayer');
     layer.removeChildren();
-    
+
     // Generate blank raster
     const raster = new paper.Raster(createCanvas());
     raster.canvas.getContext('2d').imageSmoothingEnabled = false;
@@ -167,7 +167,7 @@ const _makeBackgroundGuideLayer = function () {
     const guideLayer = new paper.Layer();
     guideLayer.locked = true;
 
-    const vBackground = _makeBackgroundPaper(120, 90, '#E5E5E5');
+    const vBackground = _makeBackgroundPaper(160, 90, '#E5E5E5');
     vBackground.position = new paper.Point(ART_BOARD_WIDTH / 2, ART_BOARD_HEIGHT / 2);
     vBackground.scaling = new paper.Point(8, 8);
     vBackground.guide = true;

src/helper/view.js

@@ -6,9 +6,9 @@ import {getHitBounds} from './bitmap';
 // Vectors are imported and exported at SVG_ART_BOARD size.
 // Once they are imported however, both SVGs and bitmaps are on
 // canvases of ART_BOARD size.
-const SVG_ART_BOARD_WIDTH = 480;
+const SVG_ART_BOARD_WIDTH = 640;
 const SVG_ART_BOARD_HEIGHT = 360;
-const ART_BOARD_WIDTH = 480 * 2;
+const ART_BOARD_WIDTH = 640 * 2;
 const ART_BOARD_HEIGHT = 360 * 2;
 const PADDING_PERCENT = 25; // Padding as a percent of the max of width/height of the sprite
 const MIN_RATIO = .125; // Zoom in to at least 1/8 of the screen. This way you don't end up incredibly