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 background color 333333 min height 800px background color white canvas width 100 style head body button onclick downloadCanvasAsJPG Download as JPG button br br canvas id myCanvas width 100 height 100 canvas script const canvas document getElementById myCanvas const ctx canvas getContext 2d canvas width 4000 canvas height 4000 const squareSize 80 const lineWidth 5 0 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 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 rgba 21 21 21 0 2 ctx lineWidth lineWidth ctx strokeRect x squareSize y squareSize squareSize squareSize function downloadCanvasAsJPG canvas filename image jpg if canvas undefined canvas document getElementById myCanvas Create a temporary link element const link document createElement a Convert the canvas content to a data URL in JPG format const dataURL canvas toDataURL image jpeg 1 0 Set the link s href to the data URL link href dataURL Set the download attribute with the desired filename link download filename Append the link to the document body required for Firefox document body appendChild link Programmatically click the link to trigger the download link click Remove the link from the document document body removeChild link script body html
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 rgba 21 21 21 0 2 ctx lineWidth lineWidth ctx strokeRect x squareSize y squareSize squareSize squareSize function downloadCanvasAsJPG canvas filename image jpg if canvas undefined canvas document getElementById myCanvas Create a temporary link element const link document createElement a Convert the canvas content to a data URL in JPG format const dataURL canvas toDataURL image jpeg 1 0 Set the link s href to the data URL link href dataURL Set the download attribute with the desired filename link download filename Append the link to the document body required for Firefox document body appendChild link Programmatically click the link to trigger the download link click Remove the link from the document document body removeChild link script body html