Pixel grid pattern notebook xbdev net html lang en head meta charset UTF 8 meta name viewport content width device width initial scale 1 0 title Canvas Image title style body margin 0 display flex justify content center align items center height 100vh background color 333333 min height 800px background color white canvas display block style head body canvas id myCanvas width 400 height 500 canvas script const canvas document getElementById myCanvas const ctx canvas getContext 2d ctx fillStyle 333333 rgb 51 51 51 ctx globalAlpha 1 0 ctx fillRect 0 0 canvas width canvas height Function to get a random gray color function getRandomGray const rv 0 5 Math random 0 1 const value Math floor rv 256 const value Math floor 51 Math random 80 return rgb value value value Draw the squares const squareSize 12 const canvasWidth canvas width const canvasHeight canvas height const cols Math ceil canvasWidth squareSize const rows Math ceil canvasHeight squareSize for let y 0 y rows y for let x 0 x cols x const alpha x cols const grayColor getRandomGray let ratio Math sin x cols 3 14 0 5 0 to 1 left to right ratio Math pow ratio 4 0 const r Math random if r ratio continue ctx fillStyle grayColor ctx globalAlpha 1 0 ctx fillRect x squareSize y squareSize squareSize squareSize Draw the border ctx strokeStyle rgb 21 21 21 ctx lineWidth 0 1 ctx strokeRect x squareSize y squareSize squareSize squareSize script body html
value Draw the squares const squareSize 12 const canvasWidth canvas width const canvasHeight canvas height const cols Math ceil canvasWidth squareSize const rows Math ceil canvasHeight squareSize for let y 0 y rows y for let x 0 x cols x const alpha x cols const grayColor getRandomGray let ratio Math sin x cols 3 14 0 5 0 to 1 left to right ratio Math pow ratio 4 0 const r Math random if r ratio continue ctx fillStyle grayColor ctx globalAlpha 1 0 ctx fillRect x squareSize y squareSize squareSize squareSize Draw the border ctx strokeStyle rgb 21 21 21 ctx lineWidth 0 1 ctx strokeRect x squareSize y squareSize squareSize squareSize script body html