I need to create a page that looks like the picture. The problem with my code is that my smile faces looks different from the example(the angle of the faces). And When you enter the negative value and value that does fit the canvas, there should be an alert message but it only alerts when I enter a negative value. First pic is the example Second pic is mine. My Html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="a8.js" defer></script> <title>Assignment 8</title> </head> <body> <div> <h1>CPSC 1045 Assignment - Smiley Rotator</h1> <P>Enter a number of smiles to draw <input id="number" type="text"></P> <p>Enter how far from the center of the canvas to draw them <input id="center" type="text"></p> <canvas id="myCanvas" width="500" height="500" style="border:1px solid #000000;display: block;"> </canvas> <button id="draw">Draw</button> </div> </body> </html> My Js var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); function drawSmile(x, y) { // smile face ctx.fillStyle = "yellow"; ctx.beginPath(); ctx.arc(x, y, 75, 0, 2 * Math.PI); ctx.stroke(); ctx.fill(); ctx.fillStyle = "black"; ctx.beginPath(); ctx.arc(x - 20, y - 30, 15, 0, 2 * Math.PI); ctx.fill(); ctx.beginPath(); ctx.arc(x + 20, y - 30, 15, 0, 2 * Math.PI); ctx.fill(); ctx.beginPath(); ctx.arc(x, y + 5, 50, 0, Math.PI); ctx.stroke(); } function draw() { var number = parseInt(document.getElementById("number").value); var center = parseInt(document.getElementById("center").value); if (isNaN(number) || isNaN(center) || number <= 0 || center <= 0) { alert("You entered an invalid value."); return; } ctx.clearRect(0, 0, c.width, c.height); var centerX = c.width / 2; var centerY = c.height / 2; var angleIncrement = 2 * Math.PI / number; for (var i = 0; i < number; i++) { var angle = i * angleIncrement; var smileX = centerX + center * Math.cos(angle); var smileY = centerY + center * Math.sin(angle); drawSmile(smileX, smileY); } } document.getElementById("draw").addEventListener('click', draw); var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); function drawSmile(x, y) { // smile face ctx.fillStyle = "yellow"; ctx.beginPath(); ctx.arc(x, y, 75, 0, 2 * Math.PI); ctx.stroke(); ctx.fill(); ctx.fillStyle = "black"; ctx.beginPath(); ctx.arc(x - 20, y - 30, 15, 0, 2 * Math.PI); ctx.fill(); ctx.beginPath(); ctx.arc(x + 20, y - 30, 15, 0, 2 * Math.PI); ctx.fill(); ctx.beginPath(); ctx.arc(x, y + 5, 50, 0, Math.PI); ctx.stroke(); } function draw() { var number = parseInt(document.getElementById("number").value); var center = parseInt(document.getElementById("center").value); if (isNaN(number) || isNaN(center) || number <= 0 || center <= 0) { alert("You entered an invalid value."); return; } ctx.clearRect(0, 0, c.width, c.height); var centerX = c.width / 2; var centerY = c.height / 2; var angleIncrement = 2 * Ma.