diff --git a/src/components/app/index.tsx b/src/components/app/index.tsx
index f2155d32..8f42d0ae 100644
--- a/src/components/app/index.tsx
+++ b/src/components/app/index.tsx
@@ -11,6 +11,8 @@ type AppState = {
 };
 
 class App extends Component<{}, AppState> {
+  private canvasRef = React.createRef<HTMLCanvasElement>();
+
   constructor(props: {}) {
     super(props);
 
@@ -50,7 +52,16 @@ class App extends Component<{}, AppState> {
     event.preventDefault();
     const { userSession } = this.state;
 
-    userSession.putFile('painting.bmp', '', {});
+    userSession.putFile(
+      'painting.json',
+      JSON.stringify({
+        data: '',
+        createdAt: Date.now(),
+      }),
+      {
+        encrypt: false,
+      },
+    );
   };
 
   UNSAFE_componentWillMount() {
@@ -71,9 +82,10 @@ class App extends Component<{}, AppState> {
       <div className="app">
         {userSession.isUserSignedIn() ? (
           <Workspace
+            canvasRef={this.canvasRef}
             person={new Person(userSession.loadUserData().profile)}
-            signOut={this.signOut}
             savePainting={this.savePainting}
+            signOut={this.signOut}
           />
         ) : (
           <Splash signIn={this.signIn} />
diff --git a/src/components/canvas/index.tsx b/src/components/canvas/index.tsx
index 9453909f..92ffa1a7 100644
--- a/src/components/canvas/index.tsx
+++ b/src/components/canvas/index.tsx
@@ -1,8 +1,11 @@
-import React, { Component, MouseEvent, TouchEvent } from 'react';
+import React, { Component, MouseEvent, RefObject, TouchEvent } from 'react';
 
 import './style.css';
 
-type CanvasProps = {};
+type CanvasProps = {
+  canvasRef: RefObject<HTMLCanvasElement>;
+};
+
 type CanvasState = {
   canvasContext: CanvasRenderingContext2D | null;
   canvasRect: ClientRect | DOMRect | null;
@@ -20,10 +23,10 @@ class Canvas extends Component<CanvasProps, CanvasState> {
     prevY: -1,
   };
 
-  private el = React.createRef<HTMLCanvasElement>();
-
   public componentDidMount() {
-    const { current } = this.el;
+    const {
+      canvasRef: { current },
+    } = this.props;
 
     if (!current) {
       return;
@@ -36,9 +39,11 @@ class Canvas extends Component<CanvasProps, CanvasState> {
   }
 
   public render() {
+    const { canvasRef } = this.props;
+
     return (
       <canvas
-        ref={this.el}
+        ref={canvasRef}
         className="canvas"
         width="1080"
         height="1080"
@@ -108,7 +113,9 @@ class Canvas extends Component<CanvasProps, CanvasState> {
   };
 
   private paint = (clientX: number, clientY: number) => {
-    const { current } = this.el;
+    const {
+      canvasRef: { current },
+    } = this.props;
     const { canvasContext, canvasRect, isPainting, prevX, prevY } = this.state;
 
     if (!(current && canvasContext && canvasRect && isPainting)) {
diff --git a/src/components/canvas/tests.tsx b/src/components/canvas/tests.tsx
index a3543940..79ab044c 100644
--- a/src/components/canvas/tests.tsx
+++ b/src/components/canvas/tests.tsx
@@ -6,6 +6,8 @@ import Canvas from '.';
 it('renders without crashing', () => {
   const div = document.createElement('div');
 
-  ReactDOM.render(<Canvas />, div);
+  const mockCanvasRef = React.createRef<HTMLCanvasElement>();
+
+  ReactDOM.render(<Canvas canvasRef={mockCanvasRef} />, div);
   ReactDOM.unmountComponentAtNode(div);
 });
diff --git a/src/components/workspace/index.tsx b/src/components/workspace/index.tsx
index 5c2ca1f4..cccb144b 100644
--- a/src/components/workspace/index.tsx
+++ b/src/components/workspace/index.tsx
@@ -1,4 +1,4 @@
-import React, { FC, MouseEvent } from 'react';
+import React, { FC, MouseEvent, RefObject } from 'react';
 import { Person } from 'blockstack';
 
 import Canvas from '../canvas';
@@ -7,12 +7,18 @@ import './style.css';
 import Button from '../button';
 
 type WorkspaceProps = {
+  canvasRef: RefObject<HTMLCanvasElement>;
   person: Person;
-  signOut: (event: MouseEvent<HTMLButtonElement>) => void;
   savePainting: (event: MouseEvent<HTMLButtonElement>) => void;
+  signOut: (event: MouseEvent<HTMLButtonElement>) => void;
 };
 
-const Workspace: FC<WorkspaceProps> = ({ person, signOut, savePainting }) => (
+const Workspace: FC<WorkspaceProps> = ({
+  canvasRef,
+  person,
+  savePainting,
+  signOut,
+}) => (
   <div className="workspace">
     <header className="header">
       <h2 className="current-user">
@@ -20,7 +26,7 @@ const Workspace: FC<WorkspaceProps> = ({ person, signOut, savePainting }) => (
       </h2>
       <Button onClick={signOut}>Sign out</Button>
     </header>
-    <Canvas />
+    <Canvas canvasRef={canvasRef} />
     <footer className="footer">
       <i />
       <Button onClick={savePainting}>Save</Button>
diff --git a/src/components/workspace/tests.tsx b/src/components/workspace/tests.tsx
index 97b7c209..41fee28e 100644
--- a/src/components/workspace/tests.tsx
+++ b/src/components/workspace/tests.tsx
@@ -7,6 +7,7 @@ import Workspace from '.';
 it('renders without crashing', () => {
   const div = document.createElement('div');
 
+  const mockCanvasRef = React.createRef<HTMLCanvasElement>();
   const mockPerson = new Person({ name: 'John Doe' });
   const mockHandler = (event: MouseEvent<HTMLButtonElement>) => {
     event.preventDefault();
@@ -14,9 +15,10 @@ it('renders without crashing', () => {
 
   ReactDOM.render(
     <Workspace
+      canvasRef={mockCanvasRef}
       person={mockPerson}
-      signOut={mockHandler}
       savePainting={mockHandler}
+      signOut={mockHandler}
     />,
     div,
   );