Прямокутник за вибором

Створення зображень в canvas

by oleksandr_s

HTML

<body>
	<label>Довжина</label>
	<input type="text" name="dovzhyna" id="dovzhyna">
	<label>Ширина</label>
	<input type="text" name="shyryna" id="shyryna">
	<label>Колір</label>
	<select name="kolir" id="kolir">
		<option value="red">Червоний</option>
		<option value="green">Зелений</option>
		<option value="blue">Синій</option>
	</select>
	<input type="button" value="Побудувати" onclick="draw()">
	<input type="button" value="Очистити" onclick="renew()">
	<br>
	<canvas id="canvas" width="900" height="500" style="background: lightgrey;"></canvas>
	<script type="text/javascript" src="canvas2.js"></script>
</body>

JavaScript

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

function draw() {
	let dovzh = document.getElementById('dovzhyna');
	let shyr = document.getElementById('shyryna');
	let color = document.getElementById('kolir');
	ctx.beginPath();
	ctx.rect(50, 50, dovzh.value, shyr.value);
	ctx.fillStyle = color.value;
	ctx.fill();
	ctx.stroke();
}

function renew() { //функцію не можна назвати clear, тому що це складова назви методу clearRect
	ctx.beginPath();
	ctx.clearRect(0,0,canvas.width, canvas.height);
	ctx.stroke();
    document.getElementById('dovzhyna').value = '';
    document.getElementById('shyryna').value = '';
}