RGBA Demo

Red

Green

Blue

Alpha
Red
Green
Blue
Alpha
The HTML file:

<head>
 <script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
  <script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML"> </script>
 <script type="text/x-mathjax-config">
  MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});
</script>

 <link rel="stylesheet" href="http://mirkwood.cs.edinboro.edu/~bennett/style/hw.css">
</head>

<body>
<h1>RGBA Demo</h1>

<canvas id="canvas" width="400" height="400" style="border:1px solid #000000;"></canvas>
<p>
<table>
   <tr><th>Red</th><td> <input type="range" min="0", max="100" value="10" class="slider" id="red" onchange="ChangeColor(this.value,'red')"></input> </td></tr>
   <tr><th>Green</th><td> <input type="range" min="0", max="100" value="10" class="slider" id="green" onchange="ChangeColor(this.value,'green')"></input> </td></tr>
   <tr><th>Blue</th><td> <input type="range" min="0", max="100" value="10" class="slider" id="blue" onchange="ChangeColor(this.value,'blue')"></input> </td></tr>
   <tr><th>Alpha</th><td> <input type="range" min="0", max="100" value="10" class="slider" id="alpha" onchange="ChangeColor(this.value,'alpha')"></input> </td></tr>
</table>

<script type="text/javascript">
let canvas = document.getElementById("canvas");
let ctx = canvas.getContext('2d');
let cx = canvas.width/2;
let cy = canvas.height/2;


let red = 100;
document.getElementById("red").value = red.toString();

let green = 0;
document.getElementById("green").value = green.toString();

let blue = 0;
document.getElementById("blue").value = blue.toString();

let alpha = 100;
document.getElementById("alpha").value = alpha.toString();

function MakeColor(red, green, blue, alpha) {
     let rv = "rgba(";
     rv += red.toString()+"%, ";
     rv += green.toString()+"%, ";
     rv += blue.toString()+"%, ";
     rv += alpha.toString()+"%)";

     return rv;
}

function ChangeColor(value, color) {
    switch (color) {
       case "red": red = value; break;
       case "green": green = value; break;
       case "blue": blue = value; break;
       case "alpha": alpha = value; break;
    }
    Draw();
}

function Draw() {

    ctx.clearRect(0,0,canvas.width, canvas.height);

    
    ctx.beginPath();

    // draw the background of the big box
    ctx.fillStyle = MakeColor(100-red, 100-green, 100-blue, 100);
    console.log("square 1", 100-red, 100-green, 100-blue);
    ctx.fillRect(cx/2, cy/2, cx, cy);

    ctx.fill();

    // outline the big box
    ctx.strokeStyle ="black";

    ctx.strokeRect(cx/2, cy/2, cx, cy);

    // plus an x so transparency shows up.
    ctx.moveTo(cx/2, cy/2);
    ctx.lineTo(cx/2+cx, cy/2+cy);
    ctx.moveTo(cx/2, cy/2+cy);
    ctx.lineTo(cx/2+cx, cy/2);

    ctx.stroke();

    // draw the small box.
    ctx.fillStyle = MakeColor(red, green, blue, alpha);
    console.log("square 2", red, green, blue,);
    ctx.fillRect(cx - cx/4, cy - cy/4, cx/2, cy/2);

    ctx.fill();

    return;
}

Draw();
</script>