JSFiddle - React, Tailwind, and code Playground

HTML

Amount of red: <input type="range" min="0" max="255" value="255">
<canvas width="400" height="400" id="cv"></canvas>

JavaScript

var ctx = $('#cv').get(0).getContext('2d');
ctx.globalCompositeOperation = 'lighter';

var amount = 0;

function draw() {
    ctx.clearRect(0, 0, 400, 400);
    
    ctx.fillStyle = 'rgb(' + amount + ', 0, 0)';
    ctx.fillRect(0, 0, 100, 100);
    
    ctx.fillStyle = 'rgb(0, 255, 255)';
    ctx.fillRect(10, 10, 100, 100);
}

$('input').change(function() {
    amount = this.value;
    draw();
}).change();