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

draw (i) {

        //  Red

        this.ctx.save();

        this.ctx.beginPath();

        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);

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();

    }

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();

    }

rect4 (ctx) {

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

        ctx.save();

        ctx.beginPath();

        Line(ctx, 12, 'round', 'round', [6, 24]);
        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);

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);

        this.ctx.closePath();

        this.ctx.restore();

    }

draw (i) {

        this.ctx.save();

        this.ctx.beginPath();

        Line(this.ctx, 12, 'round', 'round', [18, 32], this.offset);
        Rectangle(this.ctx, 32, 32, 256, 256);
        Stroke(this.ctx, 255, 255, 0);

        this.ctx.closePath();

        this.ctx.restore();

    }