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> <title>HTML5 Canvas Application</title> </head> <body> <canvas id="canvas" width="600" height="600"></canvas> <script type="text/javascript"> window.onload = function() { var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); var centerX = canvas.width / 2; var centerY = canvas.height / 2; var rad = Math.PI / 180; var radius = 100; function drawCircle(centerX, centerY, radius, color) { context.beginPath(); context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false); context.fillStyle = color; context.fill();
