How to use the canvas/graphics/Rectangle.js function in canvas

rect4 (ctx) {

        //  cap = butt, round or square
        //  join = bevel, round or miter

        ctx.save();

        ctx.beginPath();

        Line(ctx, 12, 'round', 'round');
        Rectangle(ctx, 256, 256);
        Stroke(ctx, 255, 255, 0);

        ctx.closePath();

        ctx.restore();

    }

Line(this.ctx, 12, 'round', 'round', [1, 32], this.offsetR);
        Rectangle(this.ctx, 32, 32, 256, 256);
        Stroke(this.ctx, 255, 0, 0, 0.5);

        this.ctx.closePath();

        this.ctx.restore();

        //  Green

        this.ctx.save();

        this.ctx.beginPath();

        Line(this.ctx, 12, 'round', 'round', [1, 32], this.offsetG);
        Rectangle(this.ctx, 32, 32, 256, 256);
        Stroke(this.ctx, 0, 255, 0, 0.5);

        this.ctx.closePath();

        this.ctx.restore();

        //  Blue

        this.ctx.save();

        this.ctx.beginPath();

        Line(this.ctx, 12, 'round', 'round', [1, 32], this.offsetB);
        Rectangle(this.ctx, 32, 32, 256, 256);
        Stroke(this.ctx, 0, 0, 255, 0.5);

draw (i) {

        this.ctx.save();

        this.ctx.beginPath();

        Line(this.ctx, 2);

        //  Rotate from center
        Rectangle(this.ctx, 256, 256, 128, 128, DegToRad(this.angle), true);

        Stroke(this.ctx, 255, 255, 0);

        this.ctx.closePath();

        this.ctx.restore();

    }

rect2 (ctx) {

        //  cap = butt, round or square
        //  join = bevel, round or miter

        ctx.save();

        ctx.beginPath();

        Line(ctx, 4, 'square', 'miter', [4, 8]);
        Rectangle(ctx, 256, 32);
        Stroke(ctx, 255, 255, 0);

        ctx.closePath();

        ctx.restore();

    }

rect2 (ctx) {

        //  cap = butt, round or square
        //  join = bevel, round or miter

        ctx.save();

        ctx.beginPath();

        Line(ctx, 4, 'square', 'miter');
        Rectangle(ctx, 256, 32);
        Stroke(ctx, 255, 255, 0);

        ctx.closePath();

        ctx.restore();

    }

AddToDOM(this.canvas, 'game');

        this.ctx = this.canvas.getContext('2d');

// export default function Line (context, width = 1, cap = 'butt', join = 'bevel', segments = null, offset = 0, miter = 10) {

        Line(this.ctx, 4);

// export default function Rectangle (context, x, y, width = 128, height = 128, angle = 0, fromCenter = false) {

        this.ctx.save();

        //  Calling Rectangle will transform the context and NOT reset it, as it's a pure Shape function.
        //  Use the Shape object to encapsulate transforms.

        Rectangle(this.ctx, 32, 32);

        Stroke(this.ctx, 255, 0, 255);

        this.ctx.restore();

        Rectangle(this.ctx, 256, 32);
        Stroke(this.ctx, 255, 0, 255);

    }

rect1 (ctx) {

        //  cap = butt, round or square
        //  join = bevel, round or miter

        ctx.save();

        ctx.beginPath();

        Line(ctx, 1, 'butt', 'miter'); // miter = crisp pixels at 1px line width stroke (+ see below)
        //  With a lineWidth of 1 (or any odd number) we need to -0.5 this to retain pixel clarity:
        Rectangle(ctx, 32-0.5, 32-0.5);
        Stroke(ctx, 255, 255, 0);

        ctx.closePath();

        ctx.restore();

    }

rect3 (ctx) {

        //  cap = butt, round or square
        //  join = bevel, round or miter

        ctx.save();

        ctx.beginPath();

        Line(ctx, 12, 'butt', 'bevel');
        Rectangle(ctx, 32, 256);
        Stroke(ctx, 255, 255, 0);

        ctx.closePath();

        ctx.restore();

    }