Add Greyscale Function

lib/Dither.dart

@@ -1,6 +1,24 @@
 import 'dart:html';
 import 'dart:typed_data';
 
+class Pixed {
+  static PixelArray greyscale(PixelArray image) {
+    PixelArray pxArr = new PixelArray.fromPixelArray(image);
+
+    for (var y = 0; y < pxArr.getHeight(); y++) {
+      for (var x = 0; x < pxArr.getWidth(); x++) {
+        var px = pxArr.getPixel(x, y);
+        int average = ((px.r+px.g+px.b) / 3).round();
+        px.r = average;
+        px.g = average;
+        px.b = average;
+      }
+    }
+
+    return pxArr;
+  }
+}
+
 class Pixel {
   int x;
   int y;

web/main.dart

@@ -20,6 +20,10 @@ void imgLoaded(Event e) {
   print("image loaded");
   input.context2D.drawImage(inputImg, 0, 0);
 
+  PixelArray px = new PixelArray.fromImageData(getImageData(input), 712);
+  px = Pixed.greyscale(px);
+
+  output.context2D.putImageData(px.toImageData(), 0, 0);
 }
 
 ImageData getImageData(CanvasElement canvas) {

web/styles.css

@@ -6,11 +6,11 @@ html, body {
   margin: 0;
   padding: 0;
   font-family: 'Roboto', sans-serif;
-  background: gainsboro;
+  background: black;
 }
 
 canvas {
-  padding: 00px;
+  padding: 0px;
   text-align: center;
 }