lonekorean

let viewportWidth = document.documentElement.clientWidth;
let viewportHeight = document.documentElement.clientHeight;

lonekorean

canvas {
    position: fixed;
    z-index: -1;
    top: 0;
    left: 0;
}

lonekorean

<canvas id="bg"></canvas>

lonekorean

class SolidColorPainter {
    static get inputArguments() {
        return ['<color>'];
    }

    paint(ctx, size, props, args) {
        ctx.fillStyle = args[0].toString();
        ctx.fillRect(0, 0, size.width, size.height);
    }
}

lonekorean

.solid {
    background-image: paint(solid-color, #c0eb75);

    /* other styles as needed... */
}

lonekorean

if ('registerProperty' in CSS) {
    // good to go!
}

lonekorean

if ('CSSUnitValue' in window) {
    // good to go!
}

lonekorean

.polka-dot {
    --dot-spacing: 20px;
    --dot-fade-offset: 0%;
    --dot-color: #fc466b;
    background: paint(polka-dot-fade);
    
    /* other styles as needed... */
}

.polka-dot:hover, .polka-dot:focus {

lonekorean

.polka-dot {
    --dot-spacing: 20px;
    --dot-fade-offset: 0%;
    --dot-color: #40e0d0;
    background: paint(polka-dot-fade);
    
    /* other styles as needed... */
}

lonekorean

class PolkaDotFadePainter {
    static get inputProperties() {
        return ['--dot-spacing', '--dot-fade-offset', '--dot-color'];
    }

    paint(ctx, size, props) {
        let spacing = props.get('--dot-spacing').value;
        let fadeOffset = props.get('--dot-fade-offset').value;
        let color = props.get('--dot-color').toString();