Make it possible to save creations

christianhg · Jun 24, 2018 · c4b047d · c4b047d
1 parent cd99354
commit c4b047d
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 18 deletions.
diff --git a/1/main.js b/1/main.js
@@ -1,15 +1,12 @@
-import { any, compose, either, min, __ } from 'ramda'
+import { any, compose, either, __ } from 'ramda'
 import { padding } from '../common/bounds'
+import { createCanvas } from '../common/canvas'
 import { coordsDistance } from '../common/core'
 import { createShapeFiller } from '../common/shapeFiller'
 
-const canvas = document.createElement('canvas')
-const context = canvas.getContext('2d')
-const size = min(640, window.innerWidth)
+const { canvas, context } = createCanvas()
 
 document.body.appendChild(canvas)
-canvas.width = size
-canvas.height = size
 
 const drawCircle = context => ({ coords, radius }) => {
   context.beginPath()

diff --git a/2/main.js b/2/main.js
@@ -1,5 +1,5 @@
-import { min } from 'ramda'
 import { padding } from '../common/bounds'
+import { createCanvas } from '../common/canvas'
 import { createShapeFiller } from '../common/shapeFiller'
 import {
   cannotGrow,
@@ -10,13 +10,9 @@ import {
   squareArea,
 } from '../common/squares'
 
-const canvas = document.createElement('canvas')
-const context = canvas.getContext('2d')
-const size = min(640, window.innerWidth)
+const { canvas, context } = createCanvas()
 
 document.body.appendChild(canvas)
-canvas.width = size
-canvas.height = size
 
 createShapeFiller({
   backgroundColor: '#0b0b0b',

diff --git a/3/main.js b/3/main.js
@@ -1,5 +1,5 @@
-import { min } from 'ramda'
 import { padding } from '../common/bounds'
+import { createCanvas } from '../common/canvas'
 import { createShapeFiller } from '../common/shapeFiller'
 import {
   cannotGrow,
@@ -10,13 +10,9 @@ import {
   squareArea,
 } from '../common/squares'
 
-const canvas = document.createElement('canvas')
-const context = canvas.getContext('2d')
-const size = min(640, window.innerWidth)
+const { canvas, context } = createCanvas()
 
 document.body.appendChild(canvas)
-canvas.width = size
-canvas.height = size
 
 createShapeFiller({
   backgroundColor: '#ffffff',

diff --git a/common/canvas.js b/common/canvas.js
@@ -0,0 +1,19 @@
+import { min } from 'ramda'
+
+export const createCanvas = () => {
+  const canvas = document.createElement('canvas')
+  const context = canvas.getContext('2d')
+  const size = min(640, window.innerWidth)
+
+  canvas.width = size
+  canvas.height = size
+
+  canvas.addEventListener('click', () => {
+    const link = document.createElement('a')
+    link.download = Date.now()
+    link.href = canvas.toDataURL()
+    link.click()
+  })
+
+  return { canvas, context }
+}