let scaleFactor
const MAX_PIXELS = 30

function setupCanvas() {
  let context, size, pixel, canvas
  canvas = $('canvas').get(0)
  context = canvas.getContext('2d')
  size = Math.min(document.body.clientWidth, document.body.clientHeight)
  console.log(size)
  // round off to be divisible by MAX_PIXELS
  size = size - size % MAX_PIXELS
  console.log(size)
  canvas.width = size
  canvas.height = size
  canvas.style.width = size
  canvas.style.height = size
  scaleFactor = size / MAX_PIXELS
  context.scale(scaleFactor, scaleFactor)
  console.log(scaleFactor)

  context.imageSmoothingEnabled = false
  context.mozImageSmoothingEnabled = false
  // context.webkitImageSmoothingEnabled = false
  context.msImageSmoothingEnabled = false
  return canvas
}

function hDivisible(dividend, divisor) {
  return Math.floor(dividend / divisor) * divisor
}

function createPixel(ctx, x = 0, y = 0, color = {}) {
  console.log(x, y)
  let {r, g, b, a} = color
  // const pixel = ctx.createImageData(pixelSize, pixelSize)
  // pixel.data[0] = color.r || 0
  // pixel.data[1] = color.g || 0
  // pixel.data[2] = color.g || 0
  // pixel.data[3] = color.a || 100
  // ctx.putImageData(pixel, x, y)
  ctx.fillStyle = `rgba(${r || 0}, ${g || 0},${b || 0}, ${a || 255})`
  ctx.fillRect(x, y, 1, 1)
}

(function() {
  $(function() {
    let canvas = setupCanvas()
      , context = canvas.getContext('2d')

    canvas.addEventListener('click', function(evt) {
      console.log(evt)

      Math.floor(evt.offsetX / scaleFactor) * scaleFactor
      createPixel(context,
                  Math.floor(evt.offsetX / scaleFactor),
                  Math.floor(evt.offsetY / scaleFactor),
                  {})

    })

    createPixel(context, 1, 1, {
      r: 0,
      g: 0,
      b: 0,
      a: 255
    })
  })
})()

@@ -32,16 +32,109 @@
 S = 30%0A%0A
+import %7BsetupStore, pixelStore%7D from './store'%0Aimport * as dispatchers from './dispatchers'%0A%0A
 function
@@ -1791,34 +1791,112 @@
     
-createPixel(context, 1, 1,
+setupStore()%0A    dispatchers.addPixel(%7B%0A      coords: %7B%0A        x: 1,%0A        y: 1%0A      %7D,%0A      color:
  %7B%0A 
@@ -1904,20 +1904,22 @@
     
+  
 r: 
-0
+3
 ,%0A      
 g: 0
@@ -1918,14 +1918,18 @@
     
+  
 g: 0,%0A
+  
     
@@ -1942,16 +1942,18 @@
 ,%0A      
+ 
+ 
 a: 255%0A 
@@ -1955,18 +1955,67 @@
 255%0A    
-%7D)
+  %7D%0A    %7D)%0A%0A    console.log(pixelStore.getState())%0A
 %0A  %7D)%0A%7D)

test redux