BW gradient generator (with height and lines number)

bw-gradient-generator-with-height-and-lines-number.markdown

BW gradient generator (with height and lines number)

A Pen by Vlad Tsepelev on CodePen.

License.

index.html

<canvas id="canvas" style="border:2px solid black;" width="645/4" height="570/4"></canvas>

script.js

function isBlack(num) { return num % 2; }


const black = '#000';
const white = '#fff';

const lines = 17;

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
const fractions = lines * (lines + 1);
const fractionHeight = canvas.height / fractions;
console.clear();
console.log(`Draw ${lines} blacklines on ${canvas.height}mm height canvas`);
console.log(`Smallest line height: ${fractionHeight.toFixed(2)}mm`);

// fractions by line per color
let blackCounter = lines;
let whiteCounter = 1;

let y = 0;

for(let i=1; i <= lines*2; i++){
  const isBlackLine = isBlack(i);
  const fractionsByLine = isBlackLine ? blackCounter-- : whiteCounter++;
  ctx.fillStyle = isBlackLine ?black :white;               

  
   for(let j=0; j<fractionsByLine; j++) {
      ctx.fillRect(0, y, canvas.width, fractionHeight);  
      y += fractionHeight;
   }

  if(isBlackLine) {
    console.log(`${i}: Blackline ${(fractionHeight*fractionsByLine).toFixed(2)}mm`);
  }else{
    console.log(`${i}: Space ${(fractionHeight*fractionsByLine).toFixed(2)}mm`);
  }

}