JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="sineCanvas" width="800" height="300"></canvas>
<canvas id="sineCanvas1" width="800" height="300"></canvas>
<canvas id="sineCanvas2" width="800" height="300"></canvas>

JavaScript

(function () {

var unit = 100,
    canvasList, // キャンバスの配列
    info = {}, // 全キャンバス共通の描画情報
    colorList; // 各キャンバスの色情報

/**
 * Init function.
 * 
 * Initialize variables and begin the animation.
 */
function init() {
    info.seconds = 0;
    info.t = 0;
		canvasList = [];
    colorList = [];
    // canvas1個め
    canvasList.push(document.getElementById("sineCanvas"));
    colorList.push(['#10c2cd', '#43c0e4', '#1d82b6']);
    
    // canvas2個め
    canvasList.push(document.getElementById("sineCanvas1"));
    colorList.push(['red', 'green', 'blue']);
    
    // canvas3個め
    canvasList.push(document.getElementById("sineCanvas2"));
    colorList.push(['cyan', 'magenta', 'yellow']);

		// 各キャンバスの初期化
		for(var canvasIndex in canvasList) {
        var canvas = canvasList[canvasIndex];
        canvas.width = document.documentElement.clientWidth; //Canvasのwidthをウィンドウの幅に合わせる
        canvas.height = 300;
        canvas.contextCache = canvas.getContext("2d");
    }
    // 共通の更新処理呼び出し
		update();
}

function update() {
		for(var canvasIndex in canvasList) {
        var canvas = canvasList[canvasIndex];
        // 各キャンバスの描画
        draw(canvas, colorList[canvasIndex]);
    }
    // 共通の描画情報の更新
    info.seconds = info.seconds + .014;
    info.t = info.seconds*Math.PI;
    // 自身の再起呼び出し
    setTimeout(update, 35);
}

/**
 * Draw animation function.
 * 
 * This function draws one frame of the animation, waits 20ms, and then calls
 * itself again.
 */
function draw(canvas, color) {
		// 対象のcanvasのコンテキストを取得
    var context = canvas.contextCache;
    // キャンバスの描画をクリア
    context.clearRect(0, 0, canvas.width, canvas.height);

    //波を描画
    drawWave(canvas, color[0], 0.3, 3, 0);
    drawWave(canvas, color[1], 0.4, 2, 250);
    drawWave(canvas, color[2], 0.2, 1.6, 100);
};

/**
* 波を描画
* drawWave(色, 不透明度, 波の幅のzoom, 波の開始位置の遅れ)
*/
function drawWave(canvas, color, alpha, zoom, delay) {
		var context = canvas.contextCache;
    context.fillStyle = color;
    context.globalAlpha = alpha;

 ...