Untitled

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>canvas</title>
	<style>
		canvas {
			border: 1px solid black;
		}
	</style>
</head>
<body>
	<canvas id="canvas" width="256" height="256"></canvas>
	<script>

		var canvas = document.getElementById('canvas');
		var ctx = canvas.getContext("2d");
    var width = 256;
    var height = 256;

		function drawDots(ctx,nodes) {
			ctx.save();
			for(node of nodes){
			  let s = node.s;
				ctx.fillStyle=`rgba(${node.r*255|0}, ${node.g*255|0}, ${node.b*255|0},node.a)`;
				ctx.fillRect(node.x-(s/2),node.y-(s/2),s,s);
			}
			ctx.restore();
		}
		function drawEdges(ctx,edges) {
			ctx.save();
			for(edge of edges){
				let c1 = edge.a.data;
				let c2 = edge.b.data;
				ctx.strokeStyle=`rgba(${(c1.r+c2.r)*127|0}, ${(c1.g+c2.g)*127|0}, ${(c1.b+c2.b)*127|0},0.5)`;
				if(edge.stress){
					ctx.lineWidth=Math.max(1,(4-edge.stress)+1);
					// console.log("static");
				} else {
					ctx.lineWidth=1;

				}
				ctx.beginPath();
				ctx.moveTo(edge.a.x*scale,edge.a.y*scale);
				ctx.lineTo(edge.b.x*scale,edge.b.y*scale);
				ctx.stroke();
				ctx.closePath();
			}
			ctx.restore();
		}
		function colorFromImage() {
			//idata
			let p = (Math.random()*idata.width*idata.height)|0;
			return {
				r:idata.data[p*4]/255,
				g:idata.data[p*4+1]/255,
				b:idata.data[p*4+2]/255
			}
		}

		requestAnimationFrame(function loop(t){
      ctx.clearRect(0,0,width,height);

			requestAnimationFrame(loop);
		});


	</script>
</body>
</html>