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.
I need to create a page that looks like the picture The pro.pdf
1. 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;">
2. </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);
3. 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);
4. 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();
5. 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;
6. 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);
Enter a number of smiles to draw Enter a number of smiles to drav Enter how far from the center
of the canvas to draw them Enter how far from the center of the canvas to draw them CPSC 1045
A SGignn This page says You entered an invalid value. Enter a number of smiles to draw Enter
how far from the center of the canvas to uraw urmeruvoEnter a number of smiles to draw Enter
how far from the center of the canvas to draw them
