Support transparent background + inline picker (#325)

Unfortunately, react-color has a bug where transparent color doesn't trigger onChange. I've been annoyed by the huge dependency anyway so decided to take the generated html (which is awesome) and reimplement a specific component for it.

I also made sure that we don't actually render anything when the background is transparent on rough (I looked at the generated path and made sure it didn't have the commands for the background)

src/renderer/renderElement.ts

@@ -22,7 +22,10 @@ export function renderElement(
       element.shape = withCustomMathRandom(element.seed, () => {
         return generator.rectangle(0, 0, element.width, element.height, {
           stroke: element.strokeColor,
-          fill: element.backgroundColor,
+          fill:
+            element.backgroundColor === "transparent"
+              ? undefined
+              : element.backgroundColor,
           fillStyle: element.fillStyle,
           strokeWidth: element.strokeWidth,
           roughness: element.roughness
@@ -55,7 +58,10 @@ export function renderElement(
           ],
           {
             stroke: element.strokeColor,
-            fill: element.backgroundColor,
+            fill:
+              element.backgroundColor === "transparent"
+                ? undefined
+                : element.backgroundColor,
             fillStyle: element.fillStyle,
             strokeWidth: element.strokeWidth,
             roughness: element.roughness
@@ -77,7 +83,10 @@ export function renderElement(
           element.height,
           {
             stroke: element.strokeColor,
-            fill: element.backgroundColor,
+            fill:
+              element.backgroundColor === "transparent"
+                ? undefined
+                : element.backgroundColor,
             fillStyle: element.fillStyle,
             strokeWidth: element.strokeWidth,
             roughness: element.roughness