peacefixation · December 27, 2021 01:40
diff --git a/canvas.js b/canvas.js
 <html !doctype html>
    <head>
        
        <meta charset="UTF-8">

        <script>
            function draw() {
                const canvas = document.getElementById("canvas");
                const ctx = canvas.getContext("2d");

                const widthElement = document.getElementById("width-input");
                const widthStr = widthElement.value;
                const width = parseInt(widthStr, 10);

                const heightElement = document.getElementById("height-input");
                const heightStr = heightElement.value;
                const height = parseInt(heightStr, 10);

                // validate wudth
                if(isNaN(width)) {
                    console.log("Invalid width: ", width);
                    return;
                }

                if(width < 1 || width > 1800) {
                    console.log("Invalid width: ", width);
                    return;
                }

                // validate height
                if(isNaN(height)) {
                    console.log("Invalid height: ", height);
                    return;
                }

                if(height < 1 || height > 1800) {
                    console.log("Invalid height: ", height);
                    return;
                }

                const startX = 0;
                const startY = 0;
                const endX = 0 + width;
                const endY = 0 + height;

                clearCanvas(ctx, canvas);

                // drawLine(ctx, startX, startY, endX, endY);

                drawRect(ctx, 10, 10, width, height);
            }

            function drawLine(ctx, x1, y1, x2, y2) {
                ctx.beginPath();
                ctx.moveTo(x1, y1);
                ctx.lineTo(x2, y2);
                ctx.stroke();
            }

            function drawRect(ctx, startX, startY, length, width) {
                const endX = startX + length;
                const endY = startY + width;

                ctx.beginPath();
                ctx.rect(startX, startY, endX, endY);
                ctx.stroke();
            }

            function clearCanvas(ctx, canvas) {
                ctx.clearRect(0, 0, canvas.width, canvas.height);
            }

            function mdfCuttingList(height, width) {
                const orientation = "portrait";
                
                // styles are the 'rails'  pieces of wood on the side
                const styles = '2 x 1800'
                const battens = '5 x 1164'; // lookup based on height
            }

            const wood = {
                height: 1800,
                width: 39,
                depth: 18,
            }
        </script>

        <style>
            canvas {
                border: 1px solid black; 
            }
            
            #form {
                margin-top: 20px;
            }

            #submit-button {
                display: block;
                margin-top: 20px;
            }

            .input-container {
                margin-top: 10px;
            }
        </style>
    </head>

    <body onload="draw();">
        <h1>Form</h1>

        <div id="form">
            <div class="input-container">
                <label for="height-input">Height:</label>
                <input type="text" name="height-input" id="height-input"/>
            </div>

            <div class="input-container">
                <label for="width-input">Width:</label>
                <input type="text" name="width-input" id="width-input"/>
            </div>

            <div class="input-container">
                <label for="depth-input">Depth:</label>
                <select name="depth-select" id="depth-select">
                    <option>30</option>
                    <option>50</option>
                </select>
            </div>

            <div class="input-container">
                <label for="height-select">Height:</label>
                <select name="height-select" id="height-select">
                    <option>300</option>
                    <option>500</option>
                    <option>600</option>
                    <option>1200</option>
                    <option>1500</option>
                    <option>1800</option>
                    <option>2100</option>
                    <option>2400</option>
                </select>
            </div>

            <div class="input-container">
                <textarea></textarea>
            </div>

            <button type="submit" onclick="draw();" id="submit-button">Draw</button>
        </div>

        <h1>Canvas</h1>

        <canvas id="canvas" width="1000" height="500"></canvas>

        
    </body>
 </html>
	<html !doctype html>
	<head>

	<meta charset="UTF-8">

	<script>
	function draw() {
	const canvas = document.getElementById("canvas");
	const ctx = canvas.getContext("2d");

	const widthElement = document.getElementById("width-input");
	const widthStr = widthElement.value;
	const width = parseInt(widthStr, 10);

	const heightElement = document.getElementById("height-input");
	const heightStr = heightElement.value;
	const height = parseInt(heightStr, 10);

	// validate wudth
	if(isNaN(width)) {
	console.log("Invalid width: ", width);
	return;
	}

	if(width < 1 \|\| width > 1800) {
	console.log("Invalid width: ", width);
	return;
	}

	// validate height
	if(isNaN(height)) {
	console.log("Invalid height: ", height);
	return;
	}

	if(height < 1 \|\| height > 1800) {
	console.log("Invalid height: ", height);
	return;
	}

	const startX = 0;
	const startY = 0;
	const endX = 0 + width;
	const endY = 0 + height;

	clearCanvas(ctx, canvas);

	// drawLine(ctx, startX, startY, endX, endY);

	drawRect(ctx, 10, 10, width, height);
	}

	function drawLine(ctx, x1, y1, x2, y2) {
	ctx.beginPath();
	ctx.moveTo(x1, y1);
	ctx.lineTo(x2, y2);
	ctx.stroke();
	}

	function drawRect(ctx, startX, startY, length, width) {
	const endX = startX + length;
	const endY = startY + width;

	ctx.beginPath();
	ctx.rect(startX, startY, endX, endY);
	ctx.stroke();
	}

	function clearCanvas(ctx, canvas) {
	ctx.clearRect(0, 0, canvas.width, canvas.height);
	}

	function mdfCuttingList(height, width) {
	const orientation = "portrait";

	// styles are the 'rails' pieces of wood on the side
	const styles = '2 x 1800'
	const battens = '5 x 1164'; // lookup based on height
	}

	const wood = {
	height: 1800,
	width: 39,
	depth: 18,
	}
	</script>

	<style>
	canvas {
	border: 1px solid black;
	}

	#form {
	margin-top: 20px;
	}

	#submit-button {
	display: block;
	margin-top: 20px;
	}

	.input-container {
	margin-top: 10px;
	}
	</style>
	</head>

	<body onload="draw();">
	<h1>Form</h1>

	<div id="form">
	<div class="input-container">
	<label for="height-input">Height:</label>
	<input type="text" name="height-input" id="height-input"/>
	</div>

	<div class="input-container">
	<label for="width-input">Width:</label>
	<input type="text" name="width-input" id="width-input"/>
	</div>

	<div class="input-container">
	<label for="depth-input">Depth:</label>
	<select name="depth-select" id="depth-select">
	<option>30</option>
	<option>50</option>
	</select>
	</div>

	<div class="input-container">
	<label for="height-select">Height:</label>
	<select name="height-select" id="height-select">
	<option>300</option>
	<option>500</option>
	<option>600</option>
	<option>1200</option>
	<option>1500</option>
	<option>1800</option>
	<option>2100</option>
	<option>2400</option>
	</select>
	</div>

	<div class="input-container">
	<textarea></textarea>
	</div>

	<button type="submit" onclick="draw();" id="submit-button">Draw</button>
	</div>

	<h1>Canvas</h1>

	<canvas id="canvas" width="1000" height="500"></canvas>


	</body>
	</html>