<link rel="match" href="reference/canvas-fillstyle-rgb-ref.html" />
<style>
    * {
        margin: 0;
    }

    body {
        background-color: white;
    }
</style>
<canvas width=500 height=500></canvas>
<script type="text/javascript">
    const canvas = document.querySelector("canvas");
    const ctx = canvas.getContext("2d");

    // Integer numbers
    ctx.fillStyle = "rgb(0,255,0)";
    ctx.fillRect(0, 0, 500, 100);

    // Decimal numbers
    ctx.fillStyle = "rgb(254.56022744510793,0.28813966673057,0.2973971574794)";
    ctx.fillRect(0, 100, 500, 100);

    // Numbers below 0 and above 255 should be clamped
    ctx.fillStyle = "rgba(-50,-50,500,1)";
    ctx.fillRect(0, 200, 500, 100);

    // Percentages
    ctx.fillStyle = "rgb(0%, 100%, 0%)";
    ctx.fillRect(0, 300, 500, 100);

    // Calc
    ctx.fillStyle = "rgb(calc(infinity), 0, 0)";
    ctx.fillRect(0, 400, 500, 100);
</script>