Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save yetithefoot/47e98197c32dc42c3cb2905a796adf46 to your computer and use it in GitHub Desktop.
Save yetithefoot/47e98197c32dc42c3cb2905a796adf46 to your computer and use it in GitHub Desktop.
BW gradient generator (with height and lines number)
<canvas id="canvas" style="border:2px solid black;" width="645/4" height="570/4"></canvas>
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`);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment