diff --git a/docs/Graphics/Canvas.md b/docs/Graphics/Canvas.md index fec763e..ce41f7c 100644 --- 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 index d7e7d4b..2305bbf 100644 --- 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 index 0d87520..def8740 100644 --- 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