Merge pull request #70 from ialdencoots/master

Addition of Pattern and Gradient Types

elm-package.json

@@ -7,7 +7,7 @@
         "src"
     ],
     "exposed-modules": [
-        "Canvas",
+        "Canvas"
     ],
     "native-modules": true,
     "dependencies": {

examples/0-simple-render.elm

@@ -1,7 +1,7 @@
 module Main exposing (..)
 
 import Html exposing (Html)
-import Canvas exposing (Size, Point, Canvas, DrawOp(..))
+import Canvas exposing (Size, Point, Canvas, Style(Color), DrawOp(..))
 import Color exposing (Color)
 
 
@@ -16,7 +16,7 @@ drawing : DrawOp
 drawing =
     [ rectangle (Point 10 10) Color.red
     , rectangle (Point 30 30) (Color.rgba 0 0 255 0.5)
-    , FillStyle Color.white
+    , FillStyle <| Color Color.white
     , Font "48px sans-serif"
     , FillText "Elm Canvas" (Point 50 120)
     ]
@@ -27,7 +27,7 @@ rectangle : Point -> Color -> DrawOp
 rectangle point color =
     [ BeginPath
     , Rect point (Size 370 270)
-    , FillStyle color
+    , FillStyle <| Color color
     , Fill
     ]
-        |> Canvas.batch
+        |> Canvas.batch

examples/2-image.elm

@@ -1,7 +1,7 @@
 module Main exposing (..)
 
 import Html exposing (..)
-import Canvas exposing (Size, Error, Point, DrawOp(..), Canvas)
+import Canvas exposing (Size, Error, Point, DrawOp(..), Canvas, Style(Color))
 import MouseEvents exposing (MouseEvent)
 import Task
 import Color
@@ -94,7 +94,7 @@ presentIfReady model =
 
 drawSquare : Point -> Size -> DrawOp
 drawSquare point size =
-    [ StrokeStyle Color.red
+    [ StrokeStyle <| Color Color.red
     , LineWidth 15
     , StrokeRect point (calcSize point size)
     ]

examples/4-draw-image.elm

@@ -57,7 +57,7 @@ update message model =
                                     canvas
                     in
                         Canvas.draw drawOp (Canvas.initialize (Size 300 300))
-                            
+
             in
                 ( GotCanvas scaledCanvas [], Cmd.none )
 

examples/5-animation-frame.elm

@@ -2,7 +2,7 @@ module Main exposing (..)
 
 import Html exposing (Html, div, text)
 import Html.Attributes exposing (style)
-import Canvas exposing (Canvas, Point, Size, DrawOp(..))
+import Canvas exposing (Canvas, Point, Size, DrawOp(..), Style(Color))
 import Time exposing (Time)
 import Color exposing (Color)
 import Random exposing (Generator)
@@ -213,7 +213,7 @@ drawDot { point, color } =
             point.y - (dotSize / 2)
     in
         [ BeginPath
-        , FillStyle color
+        , FillStyle <| Color color
         , Rect
             (Point x y)
             (Size (round dotSize) (round dotSize))
@@ -225,7 +225,7 @@ drawDot { point, color } =
 fade : Time -> DrawOp
 fade dt =
     [ BeginPath
-    , FillStyle (Color.rgba 255 255 255 (0.5 * dt))
+    , FillStyle <| Color (Color.rgba 255 255 255 (0.5 * dt))
     , Rect (Point 0 0) canvasSize
     , Fill
     ]

examples/6-gradients.elm

@@ -0,0 +1,138 @@
+module Main exposing (..)
+
+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 MouseEvents exposing (MouseEvent)
+
+
+-- MAIN --
+
+
+main : Program Never Model Msg
+main =
+    Html.beginnerProgram
+        { model =
+            ( drawBackground <| Canvas.initialize (Size 800 800)
+            , Nothing
+            )
+        , view = view
+        , update = update
+        }
+
+
+type ClickState
+    = Click Point
+    | Moving Point Point
+
+
+type Msg
+    = MouseDown MouseEvent
+    | Move MouseEvent
+
+
+type alias Model =
+    ( Canvas, Maybe ClickState )
+
+
+
+-- UPDATE --
+
+
+update : Msg -> Model -> Model
+update message ( canvas, clickState ) =
+    case ( clickState, message ) of
+        ( Nothing, MouseDown mouseEvent ) ->
+            ( canvas, Just (Click (toPoint mouseEvent)) )
+
+        ( Just (Moving pt0 pt1), MouseDown mouseEvent ) ->
+            ( drawLine pt0 pt1 canvas, Nothing )
+
+        ( Just (Click point0), Move mouseEvent ) ->
+            ( canvas, Just (Moving point0 (toPoint mouseEvent)) )
+
+        ( Just (Moving point0 _), Move mouseEvent ) ->
+            ( canvas, Just (Moving point0 (toPoint mouseEvent)) )
+
+        _ ->
+            ( canvas, clickState )
+
+
+toPoint : MouseEvent -> Point
+toPoint { targetPos, clientPos } =
+    Point
+        (toFloat (clientPos.x - targetPos.x))
+        (toFloat (clientPos.y - targetPos.y))
+
+
+
+-- VIEW --
+
+
+view : Model -> Html Msg
+view model =
+    Canvas.toHtml
+        [ style
+            [ ( "border", "4px solid black" ) ]
+        , MouseEvents.onMouseDown MouseDown
+        , MouseEvents.onMouseMove Move
+        ]
+        (handleClickState model)
+
+
+handleClickState : Model -> Canvas
+handleClickState ( canvas, clickState ) =
+    case clickState of
+        Just (Moving pt0 pt1) ->
+            drawLine pt0 pt1 canvas
+
+        _ ->
+            canvas
+
+
+drawBackground : Canvas -> Canvas
+drawBackground =
+    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 gradient)
+    , FillRect (Point 0 0) (Size 800 800)
+    , Fill
+    ]
+        |> Canvas.batch
+        |> Canvas.draw
+
+
+drawLine : Point -> Point -> Canvas -> Canvas
+drawLine pt0 pt1 =
+    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 gradient)
+    , MoveTo pt0
+    , LineTo pt1
+    , Stroke
+    ]
+        |> Canvas.batch
+        |> Canvas.draw

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 =