Model fillStyle

Author: nojaf

src/CanvasAPI/CanvasGradient.js

@@ -8,3 +8,5 @@ Throws an "IndexSizeError" DOMException if the offset is out of range. Throws a
 */
 @send
 external addColorStop: (canvasGradient, ~offset: float, ~color: string) => unit = "addColorStop"
+
+let isInstanceOf = (_: 't): bool => %raw(`param instanceof CanvasGradient`)

src/CanvasAPI/CanvasGradient.res

@@ -7,3 +7,5 @@ Sets the transformation matrix that will be used when rendering the pattern duri
 */
 @send
 external setTransform: (canvasPattern, ~transform: domMatrix2DInit=?) => unit = "setTransform"
+
+let isInstanceOf = (_: 't): bool => %raw(`param instanceof CanvasPattern`)

src/CanvasAPI/CanvasPattern.js

@@ -201,6 +201,8 @@ type shareData = {
   mutable url?: string,
 }
 
+type fillStyle
+
 /**
 The location (URL) of the object it is linked to. Changes done on it are reflected on the object it relates to. Both the Document and Window interface have such a linked Location, accessible via Document.location and Window.location respectively.
 [See Location on MDN](https://developer.mozilla.org/docs/Web/API/Location)
@@ -9396,7 +9398,7 @@ type canvasRenderingContext2D = {
   /**
     [Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/fillStyle)
     */
-  mutable fillStyle: unknown,
+  mutable fillStyle: fillStyle,
   /**
     [Read more on MDN](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/shadowOffsetX)
     */

src/CanvasAPI/CanvasPattern.res

@@ -0,0 +1,22 @@
+open Prelude
+open CanvasAPI
+open DOMAPI
+
+external fromString: string => fillStyle = "%identity"
+external fromCanvasGradient: canvasGradient => fillStyle = "%identity"
+external fromCanvasPattern: canvasGradient => fillStyle = "%identity"
+
+type decoded =
+  | String(string)
+  | CanvasGradient(canvasGradient)
+  | CanvasPattern(canvasPattern)
+
+let decode = (t: fillStyle): decoded => {
+  if CanvasGradient.isInstanceOf(t) {
+    CanvasGradient(unsafeConversation(t))
+  } else if CanvasPattern.isInstanceOf(t) {
+    CanvasPattern(unsafeConversation(t))
+  } else {
+    String(unsafeConversation(t))
+  }
+}

src/DOMAPI.res

@@ -4,10 +4,16 @@ let myCanvas: DOMAPI.htmlCanvasElement =
   document->Document.getElementById("myCanvas")->Prelude.unsafeConversation
 let ctx = myCanvas->HTMLCanvasElement.getContext_2D
 
-ctx.fillStyle = Prelude.unsafeConversation("red")
+ctx.fillStyle = FillStyle.fromString("red")
 ctx->CanvasRenderingContext2D.fillRect(~x=50., ~y=50., ~w=200., ~h=200.)
 
-ctx.fillStyle = Prelude.unsafeConversation("black")
+ctx.fillStyle = FillStyle.fromString("black")
 ctx.font = "2px Tahoma"
 ctx.textBaseline = CanvasAPI.Top
 ctx->CanvasRenderingContext2D.fillText(~text="MY TEXT", ~x=60., ~y=60.)
+
+switch ctx.fillStyle->FillStyle.decode {
+| FillStyle.String(color) => Console.log(`Color: ${color}`)
+| FillStyle.CanvasGradient(_) => Console.log("CanvasGradient")
+| FillStyle.CanvasPattern(_) => Console.log("CanvasPattern")
+}