Skip to content

Commit 29aef32

Browse files
kyranetkyranet
committed
Added a bunch of methods.
1 parent cfb66a5 commit 29aef32

File tree

1 file changed

+137
-7
lines changed

1 file changed

+137
-7
lines changed

‎src/canvas.js‎

Lines changed: 137 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,18 @@ class CanvasConstructor {
1111
}
1212

1313
/**
14-
* Restore the context changes.
14+
* Save the entire state of the canvas by pushing the current state onto a stack.
15+
* @returns {CanvasConstructor}
16+
* @chainable
17+
* @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/save
18+
*/
19+
save() {
20+
this.context.save();
21+
return this;
22+
}
23+
24+
/**
25+
* Restores the most recently saved canvas by popping the top entry in the drawing state stack. If there is no saved state, this method does nothing.
1526
* @returns {CanvasConstructor}
1627
* @chainable
1728
* @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/restore
@@ -21,6 +32,58 @@ class CanvasConstructor {
2132
return this;
2233
}
2334

35+
/**
36+
* Adds a rotation to the transformation matrix. The angle argument represents a clockwise rotation angle and is expressed in radians.
37+
* @param {number} angle The angle to rotate clockwise in radians.
38+
* @returns {CanvasConstructor}
39+
* @chainable
40+
* @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/rotate
41+
*/
42+
rotate(angle) {
43+
this.context.rotate(angle);
44+
return this;
45+
}
46+
47+
/**
48+
* Adds a scaling transformation to the canvas units by x horizontally and by y vertically.
49+
* @param {number} x Scaling factor in the horizontal direction.
50+
* @param {number} y Scaling factor in the vertical direction.
51+
* @returns {CanvasConstructor}
52+
* @chainable
53+
* @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/scale
54+
*/
55+
scale(x, y) {
56+
this.context.scale(x, y);
57+
return this;
58+
}
59+
60+
/**
61+
* Adds a translation transformation by moving the canvas and its origin x horizontally and y vertically on the grid.
62+
* @param {number} x Distance to move in the horizontal direction.
63+
* @param {number} y Distance to move in the vertical direction.
64+
* @returns {CanvasConstructor}
65+
* @chainable
66+
* @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/translate
67+
*/
68+
traslate(x, y) {
69+
this.context.traslate(x, y);
70+
return this;
71+
}
72+
73+
/**
74+
* Fills the current or given path with the current fill style using the non-zero or even-odd winding rule.
75+
* @param {any} path A Path2D path to fill.
76+
* @param {('nonzero'|'evenodd')} fillRule The algorithm by which to determine if a point is inside a path or
77+
* outside a path.
78+
* @returns {CanvasConstructor}
79+
* @chainable
80+
* @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fill
81+
*/
82+
fill(path, fillRule) {
83+
this.context.fill(path, fillRule);
84+
return this;
85+
}
86+
2487
/**
2588
* Add a rectangle.
2689
* @param {number} x The position x to start drawing the element.
@@ -31,7 +94,7 @@ class CanvasConstructor {
3194
* @chainable
3295
* @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillRect
3396
*/
34-
fillRect(x, y, width, height) {
97+
addRect(x, y, width, height) {
3598
this.context.fillRect(x, y, width, height);
3699
return this;
37100
}
@@ -41,12 +104,42 @@ class CanvasConstructor {
41104
* @param {string} text The text to write.
42105
* @param {number} x The position x to start drawing the element.
43106
* @param {number} y The position y to start drawing the element.
107+
* @param {number} maxWidth The maximum width to draw. If specified, and the string is computed to be wider than
108+
* this width, the font is adjusted to use a more horizontally condensed font.
44109
* @returns {CanvasConstructor}
45110
* @chainable
46111
* @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillText
47112
*/
48-
addText(text, x, y) {
49-
this.context.fillText(text, x, y);
113+
addText(text, x, y, maxWidth) {
114+
this.context.fillText(text, x, y, maxWidth);
115+
return this;
116+
}
117+
118+
/**
119+
* Strokes the current or given path with the current stroke style using the non-zero winding rule.
120+
* @param {any} path A Path2D path to stroke.
121+
* @returns {CanvasConstructor}
122+
* @chainable
123+
* @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/stroke
124+
*/
125+
stroke(path) {
126+
this.context.stroke(path);
127+
return this;
128+
}
129+
130+
/**
131+
* Paints a rectangle which has a starting point at (x, y) and has a w width and an h height onto the canvas, using
132+
* the current stroke style.
133+
* @param {number} x The x axis of the coordinate for the rectangle starting point.
134+
* @param {number} y The y axis of the coordinate for the rectangle starting point.
135+
* @param {number} width The rectangle's width.
136+
* @param {number} height The rectangle's height.
137+
* @returns {CanvasConstructor}
138+
* @chainable
139+
* @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/strokeRect
140+
*/
141+
addStrokeRect(x, y, width, height) {
142+
this.context.strokeRect(x, y, width, height);
50143
return this;
51144
}
52145

@@ -64,6 +157,42 @@ class CanvasConstructor {
64157
return this;
65158
}
66159

160+
/**
161+
* Measure a text's width given a string.
162+
* If a callback is not passed, this method will not be chainable, and it will return an integer instead.
163+
* @param {string} text The text to measure.
164+
* @param {Function} callback The callback, if not specified, this method won't be chainable as it will return a
165+
* number.
166+
* @returns {(CanvasConstructor|number)}
167+
* @chainable
168+
* @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/measureText
169+
* @example
170+
* new Canvas(500, 400)
171+
* .setTextFont('40px Tahoma')
172+
* .measureText('Hello World!', function(size) {
173+
* this.setTextFont(`${size}px`);
174+
* })
175+
* .addText('Hello World!', 30, 50)
176+
* .toBuffer(); // Returns a Buffer
177+
* @example
178+
* const size = new Canvas(500, 400)
179+
* .setTextFont('40px Tahoma')
180+
* .measureText('Hello World!'); // Returns a number
181+
*
182+
* new Canvas(500, 400)
183+
* .setTextFont(`${size}px Tahoma`)
184+
* .addText('Hello World!', 30, 50)
185+
* .toBuffer(); // Returns a Buffer
186+
*/
187+
measureText(text, callback) {
188+
if (callback) {
189+
if (typeof callback !== 'function') throw new TypeError('Callback must be a function.');
190+
callback(this.context.measureText(text));
191+
return this;
192+
}
193+
return this.context.measureText(text);
194+
}
195+
67196
/**
68197
* Set a color for the canvas' context.
69198
* @param {string} color A canvas' color resolvable.
@@ -94,10 +223,11 @@ class CanvasConstructor {
94223
if (options.type === 'round') return this.addRoundImage(buffer, x, y, width, height, options.radius);
95224
if (options.type === 'bevel') return this.addBevelImage(buffer, x, y, width, height, options.radius);
96225
}
226+
this.save();
97227
const image = new Canvas.Image();
98228
image.onload = () => this.context.drawImage(image, x, y, width, height);
99229
image.src = buffer;
100-
return this;
230+
return this.restore();
101231
}
102232

103233
/**
@@ -113,7 +243,7 @@ class CanvasConstructor {
113243
*/
114244
addRoundImage(buffer, x, y, width, height, radius) {
115245
this.createRoundClip(x + radius, y + radius, radius);
116-
return this.addImage(buffer, x, y, width, height, radius, { type: null });
246+
return this.addImage(buffer, x, y, width, height, {});
117247
}
118248

119249
/**
@@ -129,7 +259,7 @@ class CanvasConstructor {
129259
*/
130260
addBevelImage(buffer, x, y, width, height, radius) {
131261
this.createBeveledClip(x, y, width, height, radius);
132-
return this.addImage(buffer, x, y, width, height, radius, { type: null });
262+
return this.addImage(buffer, x, y, width, height, {});
133263
}
134264

135265
/**

0 commit comments

Comments
 (0)