Call the function with the network shape and it draws the network see what it looks like Simple forward network fully connected html lang en head meta charset UTF 8 meta name viewport content width device width initial scale 1 0 title Neural Network Visualization title style canvas border 1px solid black style head body canvas id networkCanvas width 600 height 400 canvas br button onclick downloadCanvas Download PNG button script function drawNetwork shape const canvas document getElementById networkCanvas const ctx canvas getContext 2d const layerCount shape length const layerSpacing canvas width layerCount 1 const nodeRadius 10 Clear the canvas ctx clearRect 0 0 canvas width canvas height Function to draw a node function drawNode x y ctx beginPath ctx arc x y nodeRadius 0 2 Math PI ctx fillStyle white ctx fill ctx stroke Function to draw a line between nodes function drawLine x1 y1 x2 y2 ctx beginPath ctx moveTo x1 y1 ctx lineTo x2 y2 ctx stroke Draw the network const layerNodes for let i 0 i layerCount i const nodesInLayer shape i const layerX layerSpacing i 1 const nodeSpacing canvas height nodesInLayer 1 layerNodes i for let j 0 j nodesInLayer j const nodeY nodeSpacing j 1 drawNode layerX nodeY layerNodes i push x layerX y nodeY Draw connections to previous layer if i 0 for const prevNode of layerNodes i 1 drawLine prevNode x prevNode y layerX nodeY function downloadCanvas const canvas document getElementById networkCanvas const link document createElement a link href canvas toDataURL image png link download network png link click Example usage drawNetwork 2 17 17 2 script body html
ctx moveTo x1 y1 ctx lineTo x2 y2 ctx stroke Draw the network const layerNodes for let i 0 i layerCount i const nodesInLayer shape i const layerX layerSpacing i 1 const nodeSpacing canvas height nodesInLayer 1 layerNodes i for let j 0 j nodesInLayer j const nodeY nodeSpacing j 1 drawNode layerX nodeY layerNodes i push x layerX y nodeY Draw connections to previous layer if i 0 for const prevNode of layerNodes i 1 drawLine prevNode x prevNode y layerX nodeY function downloadCanvas const canvas document getElementById networkCanvas const link document createElement a link href canvas toDataURL image png link download network png link click Example usage drawNetwork 2 17 17 2 script body html