Skip to content

Commit

Permalink
feat(canvas): add roundRect (#105) (#119)
Browse files Browse the repository at this point in the history
  • Loading branch information
pedroordep committed Mar 11, 2024
1 parent 39fe05b commit f17f914
Show file tree
Hide file tree
Showing 3 changed files with 76 additions and 0 deletions.
1 change: 1 addition & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -197,6 +197,7 @@ canvas.toDataURL.mockReturnValueOnce(
- [@LitoMore](https://github.com/LitoMore)
- [@hrd543](https://github.com/hrd543)
- [@danielrentz](https://github.com/danielrentz)
- [@pedroordep](https://github.com/pedroordep)

## License

Expand Down
39 changes: 39 additions & 0 deletions __tests__/classes/CanvasRenderingContext2D.roundRect.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
let canvas;
let ctx;

beforeEach(() => {
canvas = document.createElement('canvas');
ctx = canvas.getContext('2d');
canvas.width = 400;
canvas.height = 300;
});

describe('roundRect', () => {
it('should be a function', () => {
expect(typeof ctx.roundRect).toBe('function');
});

it('should be callable', () => {
ctx.roundRect(1, 2, 3, 4, [5, 6, 7, 8]);
expect(ctx.roundRect).toBeCalled();
});

it('should throw if less than 4 parameters are given', () => {
expect(() => ctx.roundRect()).toThrow(TypeError);
expect(() => ctx.roundRect(1)).toThrow(TypeError);
expect(() => ctx.roundRect(1, 2)).toThrow(TypeError);
expect(() => ctx.roundRect(1, 2, 3)).toThrow(TypeError);
});

describe('radii parameter', () => {
it('should throw if is an empty array', () => {
expect(() => ctx.roundRect(1, 2, 3, 4, [])).toThrow(TypeError);
});

it('should throw if has more than 4 elements', () => {
expect(() => ctx.roundRect(1, 2, 3, 4, [1, 2, 3, 4, 5])).toThrow(
TypeError
);
});
});
});
36 changes: 36 additions & 0 deletions src/classes/CanvasRenderingContext2D.js
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ const testFuncs = [
'fillRect',
'strokeRect',
'rect',
'roundRect',
'resetTransform',
'translate',
'moveTo',
Expand Down Expand Up @@ -1514,6 +1515,41 @@ export default class CanvasRenderingContext2D {
this._events.push(event);
}

roundRect(x, y, width, height, radii) {
if (arguments.length < 4)
throw new TypeError(
"Failed to execute 'roundRect' on '" +
this.constructor.name +
"': 4 arguments required, but only " +
arguments.length +
' present.'
);
if (radii.constructor === Array && (radii.length === 0 || radii.length > 4))
throw new TypeError(
"Failed to execute 'roundRect' on '" +
this.constructor.name +
"': " +
radii.length +
' radii provided. Between one and four radii are necessary.'
);
if (!Number.isFinite(x + y + width + height)) return;

const xResult = Number(x);
const yResult = Number(y);
const widthResult = Number(width);
const heightResult = Number(height);
const event = createCanvasEvent('roundRect', getTransformSlice(this), {
x: xResult,
y: yResult,
width: widthResult,
height: heightResult,
radii: radii,
});

this._events.push(event);
this._path.push(event);
}

rotate(angle) {
if (arguments.length < 1)
throw new TypeError(
Expand Down

0 comments on commit f17f914

Please sign in to comment.