diff --git a/.eslintignore b/.eslintignore
index 03380294..0cbd4879 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -1,3 +1,3 @@
node_modules/*
-build/*
+dist/*
playground/
\ No newline at end of file
diff --git a/package.json b/package.json
index be5f585d..c8d81796 100644
--- a/package.json
+++ b/package.json
@@ -41,6 +41,7 @@
"lodash.defaultsdeep": "4.6.0",
"minilog": "3.1.0",
"mkdirp": "^0.5.1",
+ "paper": "^0.11.4",
"postcss-import": "^10.0.0",
"postcss-loader": "^2.0.5",
"postcss-simple-vars": "^4.0.0",
diff --git a/src/components/paint-editor.jsx b/src/components/paint-editor.jsx
index 0ca019f9..16a9c877 100644
--- a/src/components/paint-editor.jsx
+++ b/src/components/paint-editor.jsx
@@ -1,11 +1,10 @@
import React from 'react';
+import PaperCanvas from './paper-canvas.jsx';
export default class PaintEditorComponent extends React.Component {
render () {
return (
-
- BANANAS
-
+
);
}
}
diff --git a/src/components/paper-canvas.jsx b/src/components/paper-canvas.jsx
new file mode 100644
index 00000000..398da80b
--- /dev/null
+++ b/src/components/paper-canvas.jsx
@@ -0,0 +1,36 @@
+import React from 'react';
+import paper from 'paper';
+
+class PaperCanvas extends React.Component {
+ constructor (props) {
+ super(props);
+ this.state = {
+ };
+ }
+ componentDidMount () {
+ paper.setup('paper-canvas');
+ // Create a Paper.js Path to draw a line into it:
+ var path = new paper.Path();
+ // Give the stroke a color
+ path.strokeColor = 'black';
+ var start = new paper.Point(100, 100);
+ // Move to start and draw a line from there
+ path.moveTo(start);
+ // Note that the plus operator on Point objects does not work
+ // in JavaScript. Instead, we need to call the add() function:
+ path.lineTo(start.add([200, -50]));
+ // Draw the view now:
+ paper.view.draw();
+ }
+ componentWillUnmount () {
+ }
+ render () {
+ return (
+
+ );
+ }
+}
+
+PaperCanvas.propTypes = {};
+
+module.exports = PaperCanvas;