JSFiddle - React, Tailwind, and code Playground

by Michael Prosser

HTML

<canvas id="coverCanvas" width="512" height="512"></canvas>

JavaScript

var options = {};

options.segments = 12;
options.segmentLength = 2;
options.numberCenterAccents = 3;
options.centerAccentsLength = 4;

var canvas = document.getElementById("coverCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 150, 75);

var mapping = Array();
      
var l = (options.segments-2)*options.segmentLength;
var n = options.numberCenterAccents;
var nl = options.centerAccentsLength;
var unit = l/(n+1);

console.log("unit",unit);

for(var i=0;i<n;i++){

  var y = ((i+1)*unit)-(nl/2)+options.endAccentsLength;

  console.log("y",y);

  mapping.push({
    min: y-(options.centerAccentsLength/2)+offset,
    max: y+(options.centerAccentsLength/2)+offset
  });

}


console.log("mapping",mapping);