Skip to content

Commit 46459bb

Browse files
kyranetkyranet
committed
0.3.1 release
1 parent 61d5b5f commit 46459bb

File tree

5 files changed

+88
-13
lines changed

5 files changed

+88
-13
lines changed

‎CHANGELOG.md‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,14 @@ All notable changes to this project will be documented in this file.
44
The format is based on [Keep a Changelog](http://keepachangelog.com/)
55
and this project adheres to [Semantic Versioning](http://semver.org/).
66

7+
## 0.3.1
8+
### Added
9+
- Both `printLinearGradient()` and `printRadialGradient()` to have chainable methods.
10+
- Added a new parameter for both `createLinearGradient()` and `createRadialGradient()`, steps, which is typeof `GradientStep[]`.
11+
12+
### Changed
13+
- Both `createLinearGradient()` and `createRadialGradient()` are not longer chainable, they'll return `CanvasGradient` instead.
14+
715
## 0.3.0
816
### Added
917
- **Typings**. This package will also work in TypeScript.

‎METHODS.md‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -43,8 +43,10 @@
4343
| beginPath |
4444
| closePath |
4545
| createPattern | `image`, `repetition`
46-
| createLinearGradient | `x0`, `y0`, `x1`, `y1`
47-
| createRadialGradient | `x0`, `y0`, `r0`, `x1`, `y1`, `r1`
46+
| createLinearGradient | `x0`, `y0`, `x1`, `y1`, `steps`
47+
| printLinearGradient | `x0`, `y0`, `x1`, `y1`, `steps`
48+
| createRadialGradient | `x0`, `y0`, `r0`, `x1`, `y1`, `r1`, `steps`
49+
| printRadialGradient | `x0`, `y0`, `r0`, `x1`, `y1`, `r1`, `steps`
4850
| createEllipse | `x`, `y`, `radiusX`, `radiusY`, `rotation`, `startAngle`, `endAngle`, `anticlockwise = false`
4951
| arc | `x`, `y`, `radius`, `startAngle`, `endAngle`, `anticlockwise = false`
5052
| arcTo | `x1`, `y1`, `x2`, `y2`, `radius`

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "canvas-constructor",
3-
"version": "0.3.0",
3+
"version": "0.3.1",
44
"description": "A ES6 class for node-canvas with built-in functions and chained methods.",
55
"main": "index.js",
66
"types": "typings/index.d.ts",

‎src/canvas.js‎

Lines changed: 61 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -544,7 +544,7 @@ class CanvasConstructor {
544544

545545
/**
546546
* Set a color for the canvas' context.
547-
* @param {string} color A canvas' color resolvable.
547+
* @param {string|CanvasGradient} color A canvas' color resolvable.
548548
* @returns {CanvasConstructor}
549549
* @chainable
550550
* @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillStyle
@@ -634,13 +634,34 @@ class CanvasConstructor {
634634
* @param {number} y0 The y axis of the coordinate of the start point.
635635
* @param {number} x1 The x axis of the coordinate of the end point.
636636
* @param {number} y1 The y axis of the coordinate of the end point.
637+
* @param {GradientStep[]} [steps=[]] The steps.
638+
* @returns {CanvasGradient}
639+
* @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/createLinearGradient
640+
*/
641+
createLinearGradient(x0, y0, x1, y1, steps = []) {
642+
const gradient = this.context.createLinearGradient(x0, y0, x1, y1);
643+
for (let i = 0; i < steps.length; i++)
644+
gradient.addColorStop(steps[i].position, steps[i].color);
645+
646+
return gradient;
647+
}
648+
649+
/**
650+
* Creates a gradient along the line given by the coordinates represented by the parameters.
651+
* The coordinates are global, the second point does not rely on the position of the first and vice versa. This
652+
* method is chainable and calls setColor after creating the gradient.
653+
* @param {number} x0 The x axis of the coordinate of the start point.
654+
* @param {number} y0 The y axis of the coordinate of the start point.
655+
* @param {number} x1 The x axis of the coordinate of the end point.
656+
* @param {number} y1 The y axis of the coordinate of the end point.
657+
* @param {GradientStep[]} steps The steps.
637658
* @returns {CanvasConstructor}
638659
* @chainable
639660
* @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/createLinearGradient
640661
*/
641-
createLinearGradient(x0, y0, x1, y1) {
642-
this.context.createLinearGradient(x0, y0, x1, y1);
643-
return this;
662+
printLinearGradient(x0, y0, x1, y1, steps) {
663+
const gradient = this.createLinearGradient(x0, y0, x1, y1, steps);
664+
return this.setColor(gradient);
644665
}
645666

646667
/**
@@ -651,13 +672,35 @@ class CanvasConstructor {
651672
* @param {number} x1 The x axis of the coordinate of the end circle.
652673
* @param {number} y1 The y axis of the coordinate of the end circle.
653674
* @param {number} r1 The radius of the end circle.
675+
* @param {GradientStep[]} [steps=[]] The steps.
676+
* @returns {CanvasGradient}
677+
* @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/createRadialGradient
678+
*/
679+
createRadialGradient(x0, y0, r0, x1, y1, r1, steps = []) {
680+
const gradient = this.context.createRadialGradient(x0, y0, r0, x1, y1, r1);
681+
for (let i = 0; i < steps.length; i++)
682+
gradient.addColorStop(steps[i].position, steps[i].color);
683+
684+
return gradient;
685+
}
686+
687+
/**
688+
* Creates a radial gradient given by the coordinates of the two circles represented by the parameters. This
689+
* method is chainable and calls setColor after creating the gradient.
690+
* @param {number} x0 The x axis of the coordinate of the start circle.
691+
* @param {number} y0 The y axis of the coordinate of the start circle.
692+
* @param {number} r0 The radius of the start circle.
693+
* @param {number} x1 The x axis of the coordinate of the end circle.
694+
* @param {number} y1 The y axis of the coordinate of the end circle.
695+
* @param {number} r1 The radius of the end circle.
696+
* @param {GradientStep[]} steps The steps.
654697
* @returns {CanvasConstructor}
655698
* @chainable
656699
* @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/createRadialGradient
657700
*/
658-
createRadialGradient(x0, y0, r0, x1, y1, r1) {
659-
this.context.createRadialGradient(x0, y0, r0, x1, y1, r1);
660-
return this;
701+
printRadialGradient(x0, y0, r0, x1, y1, r1, steps) {
702+
const gradient = this.createRadialGradient(x0, y0, r0, x1, y1, r1, steps);
703+
return this.setColor(gradient);
661704
}
662705

663706
/**
@@ -1037,6 +1080,17 @@ class CanvasConstructor {
10371080
return this;
10381081
}
10391082

1083+
/**
1084+
* @typedef {object} GradientStep
1085+
* @property {number} position Position of the step.
1086+
* @property {string} color A colour resolvable.
1087+
*/
1088+
1089+
/**
1090+
* @typedef {object} CanvasGradient
1091+
* @property {Function} addColorStop Position of the step.
1092+
*/
1093+
10401094
}
10411095

10421096
module.exports = CanvasConstructor;

‎typings/index.d.ts‎

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -40,15 +40,17 @@ declare module 'canvas-constructor' {
4040
public createBeveledPath(x: number, y: number, width: number, height: number, radius: number): this;
4141
public createBeveledClip(x: number, y: number, width: number, height: number, radius: number): this;
4242
public addRect(x: number, y: number, width: number, height: number): this;
43-
public setColor(color: string): this;
43+
public setColor(color: string|CanvasGradient): this;
4444
public setTextFont(font: string): this;
4545
public setTextAlign(align: textAlignType): this;
4646
public setTextBaseline(baseline: textBaselineType): this;
4747
public beginPath(): this;
4848
public closePath(): this;
4949
public createPattern(image: Image, repetition: patternRepetition): this;
50-
public createLinearGradient(x0: number, y0: number, x1: number, y1: number): this;
51-
public createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number, r1: number): this;
50+
public createLinearGradient(x0: number, y0: number, x1: number, y1: number, steps?: GradientStep[]): CanvasGradient;
51+
public printLinearGradient(x0: number, y0: number, x1: number, y1: number, steps?: GradientStep[]): this;
52+
public createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number, r1: number, steps?: GradientStep[]): CanvasGradient;
53+
public printRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number, r1: number, steps?: GradientStep[]): this;
5254
public createEllipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, anticlockwise?: boolean): this;
5355
public arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, anticlockwise?: boolean): this;
5456
public arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): this;
@@ -105,6 +107,15 @@ declare module 'canvas-constructor' {
105107
style?: string;
106108
}
107109

110+
export type GradientStep = {
111+
position: number;
112+
color: string;
113+
};
114+
115+
export type CanvasGradient = {
116+
addColorStop: (offset: number, color: string) => void;
117+
};
118+
108119
// node-canvas related typings.
109120
export type Image = (width?: number, height?: number) => HTMLImageElement;
110121
export type NodeCanvas = {

0 commit comments

Comments
 (0)