Merge pull request #25 from jasonzoladz/feature-beziercurves

Added Bézier curves.
purescript-web · Sep 13, 2015 · a0c6c4e · a0c6c4e
2 parents d3b4b0e + 5a6cde4
commit a0c6c4e
Show file tree

Hide file tree

Showing 3 changed files with 89 additions and 1 deletion.
diff --git a/docs/Graphics/Canvas.md b/docs/Graphics/Canvas.md
@@ -727,4 +727,41 @@ setGradientFillStyle :: forall eff. CanvasGradient -> Context2D -> Eff (canvas :
 
 Set the Context2D fillstyle to the CanvasGradient.
 
+#### `QuadraticCurve`
+
+``` purescript
+type QuadraticCurve = { cpx :: Number, cpy :: Number, x :: Number, y :: Number }
+```
+
+A type representing a quadratic Bézier curve.
+ - Bézier control point: (`cpx`, `cpy`)
+ - Ending point coordinates: (`x`, `y`)
+
+#### `quadraticCurveTo`
+
+``` purescript
+quadraticCurveTo :: forall eff. QuadraticCurve -> Context2D -> Eff (canvas :: Canvas | eff) Context2D
+```
+
+Draw a quadratic Bézier curve.
+
+#### `BezierCurve`
+
+``` purescript
+type BezierCurve = { cp1x :: Number, cp1y :: Number, cp2x :: Number, cp2y :: Number, x :: Number, y :: Number }
+```
+
+A type representing a cubic Bézier curve.
+ - First Bézier control point: (`cp1x`, `cp1y`)
+ - Second Bézier control point: (`cp2x`, `cp2y`)
+ - Ending point: (`x`, `y`)
+
+#### `bezierCurveTo`
+
+``` purescript
+bezierCurveTo :: forall eff. BezierCurve -> Context2D -> Eff (canvas :: Canvas | eff) Context2D
+```
+
+Draw a cubic Bézier curve.
+
 
diff --git a/src/Graphics/Canvas.js b/src/Graphics/Canvas.js
@@ -540,7 +540,22 @@ exports.setGradientFillStyle = function(gradient) {
         };
     };
 };
-
 
+exports.quadraticCurveTo = function(qCurve) {
+    return function(ctx) {
+        return function() {
+            ctx.quadraticCurveTo(qCurve.cpx, qCurve.cpy, qCurve.x, qCurve.y);
+            return ctx;
+        };
+    };
+};
 
+exports.bezierCurveTo = function(bCurve) {
+    return function(ctx) {
+        return function() {
+            ctx.bezierCurveTo(bCurve.cp1x, bCurve.cp1y, bCurve.cp2x, bCurve.cp2y, bCurve.x, bCurve.y);
+            return ctx;
+        };
+    };
+};
 
diff --git a/src/Graphics/Canvas.purs b/src/Graphics/Canvas.purs
@@ -21,6 +21,8 @@ module Graphics.Canvas
   , CanvasGradient()
   , LinearGradient()
   , RadialGradient()
+  , QuadraticCurve()
+  , BezierCurve()
 
   , getCanvasElementById
   , getContext2D
@@ -96,6 +98,9 @@ module Graphics.Canvas
   , createRadialGradient
   , addColorStop
   , setGradientFillStyle
+
+  , quadraticCurveTo
+  , bezierCurveTo
   ) where
 
 import Prelude
@@ -511,3 +516,34 @@ foreign import addColorStop :: forall eff. Number -> String -> CanvasGradient ->
 
 -- | Set the Context2D fillstyle to the CanvasGradient.
 foreign import setGradientFillStyle :: forall eff. CanvasGradient -> Context2D -> Eff (canvas :: Canvas | eff) Context2D
+
+-- | A type representing a quadratic Bézier curve.
+-- |  - Bézier control point: (`cpx`, `cpy`)
+-- |  - Ending point coordinates: (`x`, `y`)
+
+type QuadraticCurve =
+    { cpx :: Number
+    , cpy :: Number
+    , x   :: Number
+    , y   :: Number
+    }
+
+-- | Draw a quadratic Bézier curve.
+foreign import quadraticCurveTo :: forall eff. QuadraticCurve -> Context2D -> Eff (canvas :: Canvas | eff) Context2D
+
+-- | A type representing a cubic Bézier curve.
+-- |  - First Bézier control point: (`cp1x`, `cp1y`)
+-- |  - Second Bézier control point: (`cp2x`, `cp2y`)
+-- |  - Ending point: (`x`, `y`)
+
+type BezierCurve =
+    { cp1x :: Number
+    , cp1y :: Number
+    , cp2x :: Number
+    , cp2y :: Number
+    , x    :: Number
+    , y    :: Number
+    }
+
+-- | Draw a cubic Bézier curve.
+foreign import bezierCurveTo :: forall eff. BezierCurve -> Context2D -> Eff (canvas :: Canvas | eff) Context2D