generate html from descriptionSat, 28 Jan 2023
Create a Simple Application using HTML5 Canvas Element. Draw 4 circles to the left side of the canvas & fill them with different colors. Draw arrows corresponding to each circle to the right side of the canvas. All the circles & the arrows should be drawn on a single canvas element. When you click inside any circle, the arrow to the corresponding circle should start moving towards the circle & hit it. Color of the circle should change once the arrow hits them. Add a reset button that resets the application to its initial state.
<!DOCTYPE html>
<html>
<head>
<script>
function draw() {
var canvas = document.getElementById('canvas');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(75, 75, 50, 0, Math.PI * 2, true); // Outer circle
ctx.moveTo(110, 75);
ctx.arc(75, 75, 35, 0, Math.PI, false); // Mouth (clockwise)
ctx.moveTo(65, 65);
ctx.arc(60, 65, 5, 0, Math.PI * 2, true); // Left eye
ctx.moveTo(95, 65);
ctx.arc(90, 65, 5, 0, Math.PI * 2, true); // Right eye
ctx.stroke();
}
