Skip to content

Add createPattern, setPatternFillStyle to Graphics.Canvas #31

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.

Sign up for GitHub

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
Mar 10, 2016
Merged

Add createPattern, setPatternFillStyle to Graphics.Canvas #31

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
36 changes: 36 additions & 0 deletions docs/Graphics/Canvas.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down
19 changes: 19 additions & 0 deletions src/Graphics/Canvas.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand Down
23 changes: 23 additions & 0 deletions src/Graphics/Canvas.purs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,8 @@ module Graphics.Canvas
, Transform()
, TranslateTransform()
, TextAlign(..)
, CanvasPattern()
, PatternRepeat(..)
, CanvasGradient()
, LinearGradient()
, RadialGradient()
Expand Down Expand Up @@ -91,6 +93,9 @@ module Graphics.Canvas
, drawImageScale
, drawImageFull

, createPattern
, setPatternFillStyle

, createLinearGradient
, createRadialGradient
, addColorStop
Expand Down Expand Up @@ -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 :: *

Expand Down Expand Up @@ -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"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we should do something consistent with other enum strings like TextAlign. I don't particularly like the TextAlign solution of using Show, so I suggest both data types get changed to have a (valid) Show instance, and a helper function to convert to their string values.

But that can be another commit. This looks good to merge.

Thanks!

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for merging this. I can add the Show instance for PatternRepeat. For the helper, what would you call that, toString?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sounds good.

Sent from my iPhone

On Mar 9, 2016, at 10:07 PM, Ingmar Gagen [email protected] wrote:

In src/Graphics/Canvas.purs:

@@ -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"
Thanks for merging this. I can add the Show instance for PatternRepeat. For the helper, what would you call that, toString?

—
Reply to this email directly or view it on GitHub.

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`)
Expand Down