JSFiddle - React, Tailwind, and code Playground

by m1erickson

HTML

<canvas id="canvas" width=400 height=300></canvas>

CSS

body {
    background-color: ivory;
}
#canvas {
    border:1px solid red;
}

JavaScript

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.font = 'bold 11pt Calibri';

var colorCodes = {
    Exon1: "green",
    Intron1: "orange",
    Exon2: "green",
    Intron2: "orange"
};


var rows = [];
rows.push({
    dna_segment_name: "Exon 1",
    dna_segment_length: 50
});
rows.push({
    dna_segment_name: "Intron 1",
    dna_segment_length: 75
});
rows.push({
    dna_segment_name: "Exon 2",
    dna_segment_length: 20
});
rows.push({
    dna_segment_name: "Intron 2",
    dna_segment_length: 90
});

var segments = [];
var accumLength = 0;
var y = 100;
var scaleFactor = 1;
var padding = 5;

// pre-process
for (var i = 0; i < rows.length; i++) {

    var $row_dna = rows[i];

    var name = $row_dna['dna_segment_name'];
    var length = $row_dna['dna_segment_length'];
    var color = colorCodes[name.replace(/\s+/g, '')];
    // rescale the bars if any text won't fit
    var textWidth = ctx.measureText(name).width + padding;
    var textRatio = textWidth / length;
    if (textRatio > scaleFactor) {
        scaleFactor = textRatio;
    }

    segments.push({
        name: name,
        length: length * scaleFactor,
        color: color,
        scaleFactor: scaleFactor
    });

}

// draw
for (var i = 0; i < segments.length; i++) {
    var segment = segments[i];
    ctx.fillStyle = segment.color;
    ctx.fillRect(accumLength, y, segment.length, 12);
    ctx.fillText(segment.name, accumLength, y - 10);
    accumLength += segment.length;
}