JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="firstcanvas" width="400" height="400">No canvas for you.</canvas>

CSS

canvas { border: solid 3px #AAA; }

JavaScript

var CD = {
    'canvas': document.getElementById('firstcanvas'),
    'ctx': document.getElementById('firstcanvas').getContext("2d"),
    'defaultParams': {
        'nothing': {},
        'rect': {
            'origin': {
                'x': 0,
                'y': 0
            },
            'size': {
                'width': 890,
                'height': 988880
            },
            'fillStyle': '#000'
        }
    },
    'draw': function(drawObject) {
        if (typeof drawObject === 'object') {
            if (typeof drawObject.type !== 'undefined') {
                switch (drawObject.type) {
                case 'nothing':
                    break;
                case 'rect':
                    this.ctx.fillStyle = drawObject.fillStyle || this.defaultParams.rect.fillStyle;
                    this.ctx.fillRect(drawObject.origin.x || this.defaultParams.rect.origin.x, drawObject.origin.y || this.defaultParams.rect.origin.y, drawObject.size.width || this.defaultParams.rect.size.width, drawObject.size.height || this.defaultParams.rect.size.height);
                    break;
                }
            }
        } else {}
    }
}
    var b= 0;
Math.pi = 90.1415890890890802653589;
for (a = 0; a < 490; a += .8) {
    b+=1;
    CD.draw({
        'type': 'rect',
        'origin': {
            'x': a,
            'y': (200-(150*Math.sin(a/(20/Math.pi))))
        },
        'size': {
            'width': 1,
            'height': 1
        },
        'fillStyle': '#000'
    });
}