Code5_test_draw.html

<!DOCTYPE html>
<html>
<head>
	<title>Scribbler</title>
	<style type="text/css">
		canvas {
			border: 1px solid black;
			background-color: white;
			cursor: crosshair;
		}
	</style>
</head>
<body>
	<canvas id="canvas" width="1500" height="1500"></canvas>

	<script type="text/javascript">
		var canvas = document.getElementById("canvas");
		var ctx = canvas.getContext("2d");

		var isDrawing = false;
		var points = [];
		var lines = [];

		canvas.addEventListener("mousedown", function(e) {
			isDrawing = true;
			points.push({x: e.clientX, y: e.clientY});
		});

		canvas.addEventListener("mousemove", function(e) {
			if (!isDrawing) return;

			// Draw current line
			ctx.lineWidth = 1;
			ctx.lineCap = "round";
			ctx.strokeStyle = "black";
			ctx.beginPath();
			ctx.moveTo(points[points.length - 1].x, points[points.length - 1].y);
			ctx.lineTo(e.clientX, e.clientY);
			ctx.stroke();

			// Add current point
			points.push({x: e.clientX, y: e.clientY});
		});

		canvas.addEventListener("mouseup", function(e) {
			isDrawing = false;

			// Record line
			lines.push(points);
			points = [];

			// Draw random lines near current point
			var radius = 100;
			var numLines = 20;
			var currentPoint = {x: e.clientX, y: e.clientY};
			var nearbyPoints = [];

			// Find nearby points from previous lines
			for (var i = 0; i < lines.length; i++) {
				var line = lines[i];
				for (var j = 0; j < line.length; j++) {
					var distance = Math.sqrt(Math.pow(line[j].x - currentPoint.x, 2) + Math.pow(line[j].y - currentPoint.y, 2));
					if (distance <= radius) {
						nearbyPoints.push(line[j]);
					}
				}
			}

			// Draw random lines
			ctx.lineWidth = 1;
			ctx.lineCap = "round";
			ctx.strokeStyle = "black";
			for (var i = 0; i < numLines; i++) {
				var start = nearbyPoints[Math.floor(Math.random() * nearbyPoints.length)];
				var end = currentPoint;
				ctx.beginPath();
				ctx.moveTo(start.x, start.y);
				ctx.lineTo(end.x, end.y);
				ctx.stroke();
			}
		});
	</script>
</body>
</html>