Skip to content

Added CanvasGradient API #24

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Sep 7, 2015
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -1,3 +1,13 @@
output/
node_modules/
bower_components/

# OS generated files #
######################
.DS_Store
.DS_Store?
._*
.Spotlight-V100
.Trashes
ehthumbs.db
Thumbs.db
94 changes: 94 additions & 0 deletions docs/Graphics/Canvas.md
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,28 @@ data CanvasPixelArray :: *

An array of pixel data.

#### `CanvasImageSource`

``` purescript
data CanvasImageSource :: *
```

Opaque object for drawing elements and things to the canvas.

#### `CanvasGradient`

``` purescript
data CanvasGradient :: *
```

Opaque object describing a gradient.

#### `canvasElementToImageSource`

``` purescript
canvasElementToImageSource :: CanvasElement -> CanvasImageSource
```

#### `getCanvasElementById`

``` purescript
Expand Down Expand Up @@ -633,4 +655,76 @@ getImageDataPixelArray :: forall eff. ImageData -> Eff (canvas :: Canvas | eff)

Get the pixel data array from an image data object.

#### `drawImage`

``` purescript
drawImage :: forall eff. Context2D -> CanvasImageSource -> Number -> Number -> Eff (canvas :: Canvas | eff) Context2D
```

#### `drawImageScale`

``` purescript
drawImageScale :: forall eff. Context2D -> CanvasImageSource -> Number -> Number -> Number -> Number -> Eff (canvas :: Canvas | eff) Context2D
```

#### `drawImageFull`

``` purescript
drawImageFull :: forall eff. Context2D -> CanvasImageSource -> Number -> Number -> Number -> Number -> Number -> Number -> Number -> Number -> Eff (canvas :: Canvas | eff) Context2D
```

#### `LinearGradient`

``` purescript
type LinearGradient = { x0 :: Number, y0 :: Number, x1 :: Number, y1 :: Number }
```

A type representing a linear gradient.
- Starting point coordinates: (`x0`, `y0`)
- Ending point coordinates: (`x1`, `y1`)

#### `createLinearGradient`

``` purescript
createLinearGradient :: forall eff. LinearGradient -> Context2D -> Eff (canvas :: Canvas | eff) CanvasGradient
```

Create a linear CanvasGradient.

#### `RadialGradient`

``` purescript
type RadialGradient = { x0 :: Number, y0 :: Number, r0 :: Number, x1 :: Number, y1 :: Number, r1 :: Number }
```

A type representing a radial gradient.
- Starting circle center coordinates: (`x0`, `y0`)
- Starting circle radius: `r0`
- Ending circle center coordinates: (`x1`, `y1`)
- Ending circle radius: `r1`

#### `createRadialGradient`

``` purescript
createRadialGradient :: forall eff. RadialGradient -> Context2D -> Eff (canvas :: Canvas | eff) CanvasGradient
```

Create a radial CanvasGradient.

#### `addColorStop`

``` purescript
addColorStop :: forall eff. Number -> String -> CanvasGradient -> Eff (canvas :: Canvas | eff) CanvasGradient
```

Add a single color stop to a CanvasGradient.

#### `setGradientFillStyle`

``` purescript
setGradientFillStyle :: forall eff. CanvasGradient -> Context2D -> Eff (canvas :: Canvas | eff) Context2D
```

Set the Context2D fillstyle to the CanvasGradient.


40 changes: 40 additions & 0 deletions src/Graphics/Canvas.js
Original file line number Diff line number Diff line change
Expand Up @@ -504,3 +504,43 @@ exports.drawImageFull = function(ctx) {
};
};
};

exports.createLinearGradient = function(linearGradient) {
return function(ctx) {
return function() {
return ctx.createLinearGradient(linearGradient.x0, linearGradient.y0, linearGradient.x1, linearGradient.y1);
};
};
};

exports.createRadialGradient = function(radialGradient) {
return function(ctx) {
return function() {
return ctx.createRadialGradient(radialGradient.x0, radialGradient.y0, radialGradient.r0, radialGradient.x1, radialGradient.y1, radialGradient.r1);
};
};
};

exports.addColorStop = function(stop) {
return function(color) {
return function(gradient) {
return function() {
gradient.addColorStop(stop, color);
return gradient;
};
};
};
};

exports.setGradientFillStyle = function(gradient) {
return function(ctx) {
return function() {
ctx.fillStyle = gradient;
return ctx;
};
};
};




49 changes: 49 additions & 0 deletions src/Graphics/Canvas.purs
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,9 @@ module Graphics.Canvas
, Transform()
, TranslateTransform()
, TextAlign(..)
, CanvasGradient()
, LinearGradient()
, RadialGradient()

, getCanvasElementById
, getContext2D
Expand Down Expand Up @@ -88,6 +91,11 @@ module Graphics.Canvas
, drawImage
, drawImageScale
, drawImageFull

, createLinearGradient
, createRadialGradient
, addColorStop
, setGradientFillStyle
) where

import Prelude
Expand All @@ -114,6 +122,9 @@ foreign import data CanvasPixelArray :: *
-- | Opaque object for drawing elements and things to the canvas.
foreign import data CanvasImageSource :: *

-- | Opaque object describing a gradient.
foreign import data CanvasGradient :: *

foreign import canvasElementToImageSource :: CanvasElement -> CanvasImageSource

foreign import getCanvasElementByIdImpl ::
Expand Down Expand Up @@ -462,3 +473,41 @@ foreign import drawImage :: forall eff. Context2D -> CanvasImageSource -> Number
foreign import drawImageScale :: forall eff. Context2D -> CanvasImageSource -> Number -> Number -> Number -> Number -> Eff (canvas :: Canvas | eff) Context2D

foreign import drawImageFull :: forall eff. Context2D -> CanvasImageSource -> Number -> Number -> Number -> Number -> Number -> Number -> Number -> Number -> Eff (canvas :: Canvas | eff) Context2D

-- | A type representing a linear gradient.
-- | - Starting point coordinates: (`x0`, `y0`)
-- | - Ending point coordinates: (`x1`, `y1`)

type LinearGradient =
{ x0 :: Number
, y0 :: Number
, x1 :: Number
, y1 :: Number
}

-- | Create a linear CanvasGradient.
foreign import createLinearGradient :: forall eff. LinearGradient -> Context2D -> Eff (canvas :: Canvas | eff) CanvasGradient

-- | A type representing a radial gradient.
-- | - Starting circle center coordinates: (`x0`, `y0`)
-- | - Starting circle radius: `r0`
-- | - Ending circle center coordinates: (`x1`, `y1`)
-- | - Ending circle radius: `r1`

type RadialGradient =
{ x0 :: Number
, y0 :: Number
, r0 :: Number
, x1 :: Number
, y1 :: Number
, r1 :: Number
}

-- | Create a radial CanvasGradient.
foreign import createRadialGradient :: forall eff. RadialGradient -> Context2D -> Eff (canvas :: Canvas | eff) CanvasGradient

-- | Add a single color stop to a CanvasGradient.
foreign import addColorStop :: forall eff. Number -> String -> CanvasGradient -> Eff (canvas :: Canvas | eff) CanvasGradient

-- | Set the Context2D fillstyle to the CanvasGradient.
foreign import setGradientFillStyle :: forall eff. CanvasGradient -> Context2D -> Eff (canvas :: Canvas | eff) Context2D