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.

<canvas id="myCanvas" width="800" height="400" style="border:1px solid #d3d3d3;"> Your browser does not support the HTML5 canvas tag.</canvas> <script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); //circle 1 var x = 90; var y = 70; var radius = 50; var startAngle = 0; var endAngle = 2*Math.PI; var counterClockwise = false; context.beginPath(); context.arc(x,y,radius,startAngle,endAngle,counterClockwise); context.fillStyle = "#00FFFF"; context.fill(); context.lineWidth = 5; context.strokeStyle = '#003300'; context.stroke(); //circle 2 var x = 90; var y = 160; var

Questions about programming?Chat with your personal AI assistant