Rectangle Path

The rectPath() function is used to draw and return a Path2D rectangle.

import { rectPath } from 'mz-canvas';

const rect: Path2D = rectPath({
    x: 0,
    y: 0,
    w: 300,
    h: 300,
});

// Do something with Path2D object
console.log(rect);

You can also create a Path2D object and draw it right away:

import { canvas, rectPath } from 'mz-canvas';

const { ctx, $canvas } = canvas({
    width: 100,
    height: 200
});

const rect: Path2D = rectPath({
    x: 0,
    y: 0,
    w: 300,
    h: 300,
    fillStyle: '#366d8c',
    strokeStyle: '#0f2b38',
    lineWidth: 15,
}, ctx);

// Do something with Path2D object
console.log(rect);

document.body.append($canvas);

The rect() implements the following interfaces:

export interface IRect {
    x: number;
    y: number;
    w: number;
    h: number;
    radii?: number|number[]; // https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/roundRect
}

export interface IRectProps extends IRect, IStrokeProps, IFillProps {
    clear?: boolean;
}

export const rectPath: (props: IRectProps, ctx?: CanvasRenderingContext2D) => Path2D;