JSFiddle - React, Tailwind, and code Playground

by jwerre

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"></script>
<canvas></canvas>

CSS

canvas {
    /* width: 800px; */
    /* height: 500px; */
    background: gray;
}

JavaScript

const canvas = document.getElementsByTagName("CANVAS")[0];
canvas.width  = 800; // in pixels
canvas.height = 800; // in pixels
let ctx = canvas.getContext('2d');



function _roundedRect(ctx, options) {

    options = _.defaults(options, {
        x: 0,
        y: 0,
        width: 500,
        height: 10,
        radius: 5,
        fillColor: '#000',
        strokeColor: null,
        strokeWidth: null,
    });

    if (Array.isArray(options.fillColor) ) {

        console.log(options.fillColor);
        let gradient = ctx.createLinearGradient(options.x, 0, options.width, 0);
        
        options.fillColor.forEach((color, index) => {
            console.log(pecent)
            let pec = index / (colors.length - 1)
            gradient.addColorStop(pec, color);
        } )        

        ctx.fillStyle = gradient;
        ctx.fillRect(options.x, options.y, options.width, options.height);

    } else {
        ctx.fillStyle = options.fillColor;
    }

    if (options.strokeColor) {
        ctx.strokeStyle = options.strokeColor;
    }

    ctx.beginPath();
    ctx.moveTo(options.x,
        options.y + options.radius);
    ctx.lineTo(options.x,
        options.y + options.height - options.radius);
    ctx.arcTo(options.x,
        options.y + options.height,
        options.x + options.radius,
        options.y + options.height,
        options.radius);
    ctx.lineTo(options.x + options.width - options.radius,
        options.y + options.height);
    ctx.arcTo(options.x + options.width,
        options.y + options.height,
        options.x + options.width,
        options.y + options.height - options.radius,
        options.radius);
    ctx.lineTo(options.x + options.width,
        options.y + options.radius);
    ctx.arcTo(options.x + options.width,
        options.y,
        options.x + options.width - options.radius,
        options.y, options.radius);
    ctx.lineTo(options.x + options.radius, options.y);
    ctx.arcTo(options.x,
        options.y,
       ...