perseoq/draw_a_line.html

## draw_a_line.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <canvas id="myCanvas"></canvas>
    <input type="number" id="lineLength" min="0" max="50000" value="1">

    <script>
        const canvas = document.getElementById('myCanvas');
        const ctx = canvas.getContext('2d');

        function drawLine(length) {
        ctx.beginPath();
        ctx.moveTo(0, 0);
        ctx.lineTo(length, 0);
        ctx.stroke();
        }

        const lineLengthInput = document.getElementById('lineLength');
        lineLengthInput.addEventListener('input', () => {
        const length = lineLengthInput.value;
        drawLine(length);
        });
    </script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	</head>
	<body>
	<canvas id="myCanvas"></canvas>
	<input type="number" id="lineLength" min="0" max="50000" value="1">

	<script>
	const canvas = document.getElementById('myCanvas');
	const ctx = canvas.getContext('2d');

	function drawLine(length) {
	ctx.beginPath();
	ctx.moveTo(0, 0);
	ctx.lineTo(length, 0);
	ctx.stroke();
	}

	const lineLengthInput = document.getElementById('lineLength');
	lineLengthInput.addEventListener('input', () => {
	const length = lineLengthInput.value;
	drawLine(length);
	});
	</script>
	</body>
	</html>