JSFiddle - React, Tailwind, and code Playground
by Michael Prosser
HTML
<canvas width="512" height="512" id="cover"></canvas>
CSS
body{
background-color:#000;
}
canvas#cover{
background-color:#000;
}
JavaScript
var canvas = document.getElementById("cover");
var BUILDINGCOVER = function(options){
if(typeof(options.canvas) == 'undefined'){
console.log("Canvas element required!");
return;
}
options.ctx = options.canvas.getContext("2d");
if(typeof(options.canvasSize) == 'undefined'){
options.canvasSize = 512;
}
if(typeof(options.coverColor) == 'undefined'){
options.coverColor = '#ffffff';
}
if(typeof(options.accents) == 'undefined'){
options.accents = true;
}
if(!options.endAccentsColor){
options.endAccentsColor = '#ff0000'; // double this value
}
if(!options.len){
options.len = 21.9456;//18.288; // in meters = 60 feet for default
}
if(!options.segmentLength){
options.segmentLength = 1.8288; // in meters = 6 feet for default 24 foot width and 30 foot wide will change to 5 feet or 1.524M for 36 foot width
}
if(!options.segments){
options.segments = parseInt(options.len/options.segmentLength);
}
if(!options.endAccentsLength){
options.endAccentsLength = options.segmentLength; // double this value
}
if(typeof(options.centerAccents) == 'undefined'){
options.centerAccents = true;
}
if(!options.centerAccentsLength){
options.centerAccentsLength = options.segmentLength*2; // double this value
}
if(!options.numberCenterAccents){
options.numberCenterAccents = 2; // double this value
}
if(!options.centerAccentsColor){
options.centerAccentsColor = '#ffff00'; // double this value
}
// paint the cover main color
options.ctx.fillStyle = options.coverColor;
options.ctx.fillRect(0, 0, options.canvasSize, options.canvasSize);
// determine the end accents on the cover
if(options.accents){
// get percentage
var ll = options.len;
var l = options.canvasSize;
var endAccentInPX = (options.endAccentsLength/ll)*options.canvasSize;
var centerAccentInPX =...