JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas" width="502" height="108"></canvas>

JavaScript

var g_y_min = 100;
var g_y_max = 10;
var g_x_min = 10;

var CNT = g_x_min;
var currentState = g_y_min;
var color = "rgb(11,123,11)";


var data = {
    modulation_period : 20,
    modulation_mark: 5,
    buffer: [50, 100, 100, 150]
};

function transmitData()
{
    var i = 0;
    
    while (i < data.buffer.length) 
    {
        modulatedPulse(
            data.buffer[i++], 
            data.buffer[i++], 
            data.modulation_period, 
            data.modulation_mark);
    }
       
}
    
    


function modulatedPulse(space_ticks, mark_ticks, mod_period_ticks, mod_mark_ticks)
{
	var ref = CNT + space_ticks;

	var next_pulse_rise = ref;
	var next_pulse_fall = ref + mark_ticks;

	var next_mod_fall = ref + mod_mark_ticks;
	var next_mod_rise = ref + mod_period_ticks;

	waitUntil(next_pulse_rise);
	PIN_RISE();

	while(true) {
		waitUntil(next_mod_fall);
		PIN_FALL();
		
		if (next_mod_rise >= next_pulse_fall) break;

		waitUntil(next_mod_rise);	
		PIN_RISE();

		ref = next_mod_rise;
		next_mod_fall = ref + mod_mark_ticks;
		next_mod_rise = ref + mod_period_ticks;

		if (next_mod_fall >= next_pulse_fall) break;
	}

	PIN_FALL();
}


function waitUntil(newTime)
{
    // horizontal line to the time co-ordinate.
    drawLine(CNT, currentState, newTime, currentState);
    
    CNT = newTime;
}

function PIN_RISE()
{
    var newState = g_y_max;
    
    // vertical line from 0 to 1.
    drawLine(CNT, currentState, CNT, newState);
    
    currentState = newState;
}

function PIN_FALL()
{
    var newState = g_y_min;
    
    // vertical line from 1 to 0.
    drawLine(CNT, currentState, CNT, newState);
    
    currentState = newState;
}

function drawLine(x1, y1, x2, y2)
{
    //color = color || "rgb(128,128,128)";
    
    var canvas = document.getElementById("canvas")
    var context = canvas.getContext("2d");
    context.beginPath();
    context.strokeStyle = color; 
    context.lineWidth = 1;
    context.moveTo(x1, y1);
    context.lineTo(x2, y2);
   ...