Updated Gradients to use the Color.Gradient type

Author: ialdencoots

elm-package.json

@@ -11,10 +11,8 @@
     ],
     "native-modules": true,
     "dependencies": {
-        "elm-lang/animation-frame": "1.0.1 <= v < 2.0.0",
         "elm-lang/core": "5.0.0 <= v < 6.0.0",
-        "elm-lang/html": "2.0.0 <= v < 3.0.0",
-        "mbr/elm-mouse-events": "1.0.4 <= v < 2.0.0"
+        "elm-lang/html": "2.0.0 <= v < 3.0.0"
     },
     "elm-version": "0.18.0 <= v < 0.19.0"
 }

examples/6-gradients.elm

@@ -1,9 +1,9 @@
 module Main exposing (..)
 
-import Html exposing (Html, Attribute)
+import Canvas exposing (Canvas, DrawOp(..), Point, Size, Style(Gradient))
+import Color exposing (Color, linear, radial)
+import Html exposing (Attribute, Html)
 import Html.Attributes exposing (style)
-import Canvas exposing (Size, Point, DrawOp(..), Canvas, Style(LinearGradient, RadialGradient), ColorStop(..))
-import Color exposing (Color)
 import MouseEvents exposing (MouseEvent)
 
 
@@ -90,38 +90,46 @@ handleClickState ( canvas, clickState ) =
         _ ->
             canvas
 
+
 drawBackground : Canvas -> Canvas
 drawBackground =
-  let
-    colorStops = [ ColorStop 1 Color.red
-                 , ColorStop 0.9 Color.orange
-                 , ColorStop 0.7 Color.yellow
-                 , ColorStop 0.5 Color.green
-                 , ColorStop 0.3 Color.blue
-                 , ColorStop 0.1 Color.purple
-                 ]
-    gradient = RadialGradient (Point 400 400) 0 (Point 400 400) 400 colorStops
-  in
+    let
+        colorStops =
+            [ ( 1, Color.red )
+            , ( 0.9, Color.orange )
+            , ( 0.7, Color.yellow )
+            , ( 0.5, Color.green )
+            , ( 0.3, Color.blue )
+            , ( 0.1, Color.purple )
+            ]
+
+        gradient =
+            radial ( 400, 400 ) 0 ( 400, 400 ) 400 colorStops
+    in
     [ BeginPath
-    , FillStyle gradient
+    , FillStyle (Gradient gradient)
     , FillRect (Point 0 0) (Size 800 800)
     , Fill
     ]
         |> Canvas.batch
         |> Canvas.draw
 
+
 drawLine : Point -> Point -> Canvas -> Canvas
 drawLine pt0 pt1 =
-  let
-    colorStops = [ ColorStop 0 Color.white
-                 , ColorStop 1 Color.black
-                 ]
-    gradient = LinearGradient (Point pt0.x 0) (Point pt1.x 0) colorStops
-  in
+    let
+        colorStops =
+            [ ( 0, Color.white )
+            , ( 1, Color.black )
+            ]
+
+        gradient =
+            linear ( pt0.x, 0 ) ( pt1.x, 0 ) colorStops
+    in
     [ BeginPath
     , LineWidth 30
     , LineCap "round"
-    , StrokeStyle gradient
+    , StrokeStyle (Gradient gradient)
     , MoveTo pt0
     , LineTo pt1
     , Stroke

examples/Canvas.elm

@@ -1,45 +1,57 @@
 module Canvas
     exposing
         ( Canvas
+        , DrawImageParams(..)
+        , DrawOp(..)
         , Error
         , Point
+        , Repeat(..)
         , Size
-        , DrawOp(..)
-        , DrawImageParams(..)
-        , initialize
-        , toHtml
-        , draw
+        , Style(..)
         , batch
-        , loadImage
+        , draw
         , getImageData
         , getSize
+        , initialize
+        , loadImage
         , setSize
         , toDataUrl
+        , toHtml
         )
 
 {-| The canvas html element is a very simple way to render 2D graphics. Check out these examples, and get an explanation of the canvas element [here](https://github.com/elm-community/canvas). Furthermore, If you havent heard of [Elm-Graphics](http://package.elm-lang.org/packages/evancz/elm-graphics/latest), I recommend checking that out first, because its probably what you need. Elm-Canvas is for when you need unusually direct and low level access to the canvas element.
 
+
 # Main Types
-@docs Canvas, Point, Size, DrawOp, DrawImageParams
+
+@docs Canvas, Point, Size, DrawOp, DrawImageParams, Style, Repeat
+
 
 # Basics
+
 @docs initialize, toHtml, draw, batch
 
+
 # Loading Images
+
 @docs loadImage, Error
 
+
 # Image Data
+
 @docs getImageData, toDataUrl
 
+
 # Sizing
+
 @docs getSize, setSize
 
 -}
 
-import Html exposing (Html, Attribute)
-import Task exposing (Task)
-import Color exposing (Color)
+import Color exposing (Color, Gradient)
+import Html exposing (Attribute, Html)
 import Native.Canvas
+import Task exposing (Task)
 
 
 {-| A `Canvas` contains image data, and can be rendered as html with `toHtml`. It is the primary type of this package.
@@ -97,10 +109,10 @@ type DrawOp
     | Transform Float Float Float Float Float Float
     | Translate Point
     | StrokeRect Point Size
-    | StrokeStyle Color
+    | StrokeStyle Style
     | TextAlign String
     | TextBaseline String
-    | FillStyle Color
+    | FillStyle Style
     | BeginPath
     | BezierCurveTo Point Point Point
     | QuadraticCurveTo Point Point
@@ -112,6 +124,23 @@ type DrawOp
     | Batch (List DrawOp)
 
 
+{-| `Style` specifies the style to apply as a `FillStyle` or a `StrokeStyle`.
+-}
+type Style
+    = Color Color
+    | Pattern Canvas Repeat
+    | Gradient Gradient
+
+
+{-| Specifies the axis/axes along which to replicate a pattern. For use with the `Pattern` `Style`.
+-}
+type Repeat
+    = Repeat
+    | RepeatX
+    | RepeatY
+    | NoRepeat
+
+
 {-| The `DrawOp` `DrawImage` takes a `Canvas` and a `DrawImageParam`. We made three different `DrawImageParam`, because there are three different sets of parameters you can give the native javascript `ctx.drawImage()`. [See here for more info](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage.)
 -}
 type DrawImageParams
@@ -125,6 +154,7 @@ type DrawImageParams
     squareCanvas : Int -> Canvas
     squareCanvas length =
         initialize (Size length length)
+
 -}
 initialize : Size -> Canvas
 initialize =
@@ -136,6 +166,7 @@ initialize =
     pixelatedRender : Canvas -> Html Msg
     pixelatedRender canvas =
         canvas |> toHtml [ class "pixelated" ]
+
 -}
 toHtml : List (Attribute msg) -> Canvas -> Html msg
 toHtml =
@@ -153,13 +184,14 @@ toHtml =
             , LineTo p1
             , Stroke
             ]
+
 -}
 draw : DrawOp -> Canvas -> Canvas
 draw =
     Native.Canvas.draw
 
 
-{-| You dont want to apply `DrawOp` one at a time. Bundle many `DrawOp` together in one batch, using `batch`.
+{-| You dont want to apply `DrawOp` one at a time, its inefficient. Bundle many `DrawOp` together in one batch, using `batch`.
 
     line : Point -> Point -> DrawOp
     line p0 p1 =
@@ -170,6 +202,7 @@ draw =
             , LineTo p1
             , Stroke
             ]
+
 -}
 batch : List DrawOp -> DrawOp
 batch =
@@ -193,6 +226,7 @@ batch =
                     Nothing ->
                         -- ..
         -- ..
+
 -}
 loadImage : String -> Task Error Canvas
 loadImage =
@@ -215,6 +249,7 @@ loadImage =
         [ 0, 0, 0, 255,      255, 0, 0, 255
         , 0, 0, 0, 255,      255, 255, 255, 255
         ]
+
 -}
 getImageData : Point -> Size -> Canvas -> List Int
 getImageData =