Merge pull request #31 from igagen/patterns

Add createPattern, setPatternFillStyle to Graphics.Canvas

Author: paf31

docs/Graphics/Canvas.md

@@ -43,6 +43,14 @@ data CanvasImageSource :: *
 
 Opaque object for drawing elements and things to the canvas.
 
+#### `CanvasPattern`
+
+``` purescript
+data CanvasPattern :: *
+```
+
+Opaque object describing a pattern.
+
 #### `CanvasGradient`
 
 ``` purescript
@@ -649,6 +657,34 @@ drawImageScale :: forall eff. Context2D -> CanvasImageSource -> Number -> Number
 drawImageFull :: forall eff. Context2D -> CanvasImageSource -> Number -> Number -> Number -> Number -> Number -> Number -> Number -> Number -> Eff (canvas :: Canvas | eff) Context2D
 ```
 
+#### `PatternRepeat`
+
+``` purescript
+data PatternRepeat
+  = Repeat
+  | RepeatX
+  | RepeatY
+  | NoRepeat
+```
+
+Enumerates the different types of pattern repetitions.
+
+#### `createPattern`
+
+``` purescript
+createPattern :: forall eff. CanvasImageSource -> PatternRepeat -> Context2D -> Eff (canvas :: Canvas | eff) CanvasPattern
+```
+
+Create a new canvas pattern (repeatable image).
+
+#### `setPatternFillStyle`
+
+``` purescript
+setPatternFillStyle :: forall eff. CanvasGradient -> Context2D -> Eff (canvas :: Canvas | eff) Context2D
+```
+
+Set the Context2D fillstyle to the CanvasPattern.
+
 #### `LinearGradient`
 
 ``` purescript

src/Graphics/Canvas.js

@@ -501,6 +501,25 @@ exports.drawImageFull = function(ctx) {
     };
 };
 
+exports.createPatternImpl = function(img) {
+    return function(repeat) {
+        return function(ctx) {
+            return function() {
+                return ctx.createPattern(img, repeat);
+            };
+        };
+    };
+};
+
+exports.setPatternFillStyle = function(pattern) {
+    return function(ctx) {
+        return function() {
+            ctx.fillStyle = pattern;
+            return ctx;
+        };
+    };
+};
+
 exports.createLinearGradient = function(linearGradient) {
     return function(ctx) {
         return function() {

src/Graphics/Canvas.purs

@@ -17,6 +17,8 @@ module Graphics.Canvas
   , Transform()
   , TranslateTransform()
   , TextAlign(..)
+  , CanvasPattern()
+  , PatternRepeat(..)
   , CanvasGradient()
   , LinearGradient()
   , RadialGradient()
@@ -91,6 +93,9 @@ module Graphics.Canvas
   , drawImageScale
   , drawImageFull
 
+  , createPattern
+  , setPatternFillStyle
+
   , createLinearGradient
   , createRadialGradient
   , addColorStop
@@ -123,6 +128,9 @@ type ImageData = { width :: Int, height :: Int, data :: Uint8ClampedArray }
 -- | Opaque object for drawing elements and things to the canvas.
 foreign import data CanvasImageSource :: *
 
+-- | Opaque object describing a pattern.
+foreign import data CanvasPattern :: *
+
 -- | Opaque object describing a gradient.
 foreign import data CanvasGradient :: *
 
@@ -471,6 +479,21 @@ foreign import drawImageScale :: forall eff. Context2D -> CanvasImageSource -> N
 
 foreign import drawImageFull :: forall eff. Context2D -> CanvasImageSource -> Number -> Number -> Number -> Number -> Number -> Number -> Number -> Number -> Eff (canvas :: Canvas | eff) Context2D
 
+-- | Enumerates the different types of pattern repetitions.
+data PatternRepeat = Repeat | RepeatX | RepeatY | NoRepeat
+
+foreign import createPatternImpl :: forall eff. CanvasImageSource -> String -> Context2D -> Eff (canvas :: Canvas | eff) CanvasPattern
+
+-- | Create a new canvas pattern (repeatable image).
+createPattern :: forall eff. CanvasImageSource -> PatternRepeat -> Context2D -> Eff (canvas :: Canvas | eff) CanvasPattern
+createPattern img Repeat   = createPatternImpl img "repeat"
+createPattern img RepeatX  = createPatternImpl img "repeat-x"
+createPattern img RepeatY  = createPatternImpl img "repeat-y"
+createPattern img NoRepeat = createPatternImpl img "no-repeat"
+
+-- | Set the Context2D fillstyle to the CanvasPattern.
+foreign import setPatternFillStyle :: forall eff. CanvasPattern -> Context2D -> Eff (canvas :: Canvas | eff) Context2D
+
 -- | A type representing a linear gradient.
 -- |  -  Starting point coordinates: (`x0`, `y0`)
 -- |  -  Ending point coordinates: (`x1`, `y1`)