SlideShare a Scribd company logo
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 * 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 * 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

More Related Content

Similar to I need to create a page that looks like the picture The pro.pdf

Create a java project that - Draw a circle with three random init.pdf
Create a java project that - Draw a circle with three random init.pdfCreate a java project that - Draw a circle with three random init.pdf
Create a java project that - Draw a circle with three random init.pdf
arihantmobileselepun
 
Pushover analysis force analogy method with force control based on euler bern...
Pushover analysis force analogy method with force control based on euler bern...Pushover analysis force analogy method with force control based on euler bern...
Pushover analysis force analogy method with force control based on euler bern...
Salar Delavar Qashqai
 
Data Structure in C Programming Language
Data Structure in C Programming LanguageData Structure in C Programming Language
Data Structure in C Programming Language
Arkadeep Dey
 
Statistics.cpp
Statistics.cppStatistics.cpp
Statistics.cpp
Vorname Nachname
 
DoublyList-cpp- #include -DoublyList-h- using namespace std- void Doub.pdf
DoublyList-cpp- #include -DoublyList-h- using namespace std- void Doub.pdfDoublyList-cpp- #include -DoublyList-h- using namespace std- void Doub.pdf
DoublyList-cpp- #include -DoublyList-h- using namespace std- void Doub.pdf
aathiauto
 
How to make a video game
How to make a video gameHow to make a video game
How to make a video game
dandylion13
 
12th CBSE Practical File
12th CBSE Practical File12th CBSE Practical File
12th CBSE Practical File
Ashwin Francis
 
analog clock C#
analog clock C#analog clock C#
analog clock C#
omeed
 
Computer_Practicals-file.doc.pdf
Computer_Practicals-file.doc.pdfComputer_Practicals-file.doc.pdf
Computer_Practicals-file.doc.pdf
HIMANSUKUMAR12
 
CSE 103 Project Presentation.pptx
CSE 103 Project Presentation.pptxCSE 103 Project Presentation.pptx
CSE 103 Project Presentation.pptx
TasnimSaimaRaita
 
Using standard libraries like stdio and sdtlib.h and using stats.h a.pdf
Using standard libraries like stdio and sdtlib.h and using stats.h a.pdfUsing standard libraries like stdio and sdtlib.h and using stats.h a.pdf
Using standard libraries like stdio and sdtlib.h and using stats.h a.pdf
fashiongallery1
 
Assignment_URI_Code_Solution_Roll_2010052 (1).pdf
Assignment_URI_Code_Solution_Roll_2010052 (1).pdfAssignment_URI_Code_Solution_Roll_2010052 (1).pdf
Assignment_URI_Code_Solution_Roll_2010052 (1).pdf
SamiulHaque58
 
Version1.0 StartHTML000000232 EndHTML000065057 StartFragment0000.docx
Version1.0 StartHTML000000232 EndHTML000065057 StartFragment0000.docxVersion1.0 StartHTML000000232 EndHTML000065057 StartFragment0000.docx
Version1.0 StartHTML000000232 EndHTML000065057 StartFragment0000.docx
tienboileau
 
Nonlinear analysis of braced frame with hinge by hinge method in c programming
Nonlinear analysis of braced frame with hinge by hinge method in c programmingNonlinear analysis of braced frame with hinge by hinge method in c programming
Nonlinear analysis of braced frame with hinge by hinge method in c programming
Salar Delavar Qashqai
 
C lab programs
C lab programsC lab programs
C lab programs
Dr. Prashant Vats
 
C lab programs
C lab programsC lab programs
C lab programs
Dr. Prashant Vats
 
bfd23fd7-0d89-45c0-8b82-c991b30ed375.pdf
bfd23fd7-0d89-45c0-8b82-c991b30ed375.pdfbfd23fd7-0d89-45c0-8b82-c991b30ed375.pdf
bfd23fd7-0d89-45c0-8b82-c991b30ed375.pdf
shehabhamad_90
 
Drawing on canvas
Drawing on canvasDrawing on canvas
Drawing on canvas
suitzero
 
VTU Data Structures Lab Manual
VTU Data Structures Lab ManualVTU Data Structures Lab Manual
VTU Data Structures Lab Manual
Nithin Kumar,VVCE, Mysuru
 
Bcsl 033 data and file structures lab s2-2
Bcsl 033 data and file structures lab s2-2Bcsl 033 data and file structures lab s2-2
Bcsl 033 data and file structures lab s2-2
Dr. Loganathan R
 

Similar to I need to create a page that looks like the picture The pro.pdf (20)

Create a java project that - Draw a circle with three random init.pdf
Create a java project that - Draw a circle with three random init.pdfCreate a java project that - Draw a circle with three random init.pdf
Create a java project that - Draw a circle with three random init.pdf
 
Pushover analysis force analogy method with force control based on euler bern...
Pushover analysis force analogy method with force control based on euler bern...Pushover analysis force analogy method with force control based on euler bern...
Pushover analysis force analogy method with force control based on euler bern...
 
Data Structure in C Programming Language
Data Structure in C Programming LanguageData Structure in C Programming Language
Data Structure in C Programming Language
 
Statistics.cpp
Statistics.cppStatistics.cpp
Statistics.cpp
 
DoublyList-cpp- #include -DoublyList-h- using namespace std- void Doub.pdf
DoublyList-cpp- #include -DoublyList-h- using namespace std- void Doub.pdfDoublyList-cpp- #include -DoublyList-h- using namespace std- void Doub.pdf
DoublyList-cpp- #include -DoublyList-h- using namespace std- void Doub.pdf
 
How to make a video game
How to make a video gameHow to make a video game
How to make a video game
 
12th CBSE Practical File
12th CBSE Practical File12th CBSE Practical File
12th CBSE Practical File
 
analog clock C#
analog clock C#analog clock C#
analog clock C#
 
Computer_Practicals-file.doc.pdf
Computer_Practicals-file.doc.pdfComputer_Practicals-file.doc.pdf
Computer_Practicals-file.doc.pdf
 
CSE 103 Project Presentation.pptx
CSE 103 Project Presentation.pptxCSE 103 Project Presentation.pptx
CSE 103 Project Presentation.pptx
 
Using standard libraries like stdio and sdtlib.h and using stats.h a.pdf
Using standard libraries like stdio and sdtlib.h and using stats.h a.pdfUsing standard libraries like stdio and sdtlib.h and using stats.h a.pdf
Using standard libraries like stdio and sdtlib.h and using stats.h a.pdf
 
Assignment_URI_Code_Solution_Roll_2010052 (1).pdf
Assignment_URI_Code_Solution_Roll_2010052 (1).pdfAssignment_URI_Code_Solution_Roll_2010052 (1).pdf
Assignment_URI_Code_Solution_Roll_2010052 (1).pdf
 
Version1.0 StartHTML000000232 EndHTML000065057 StartFragment0000.docx
Version1.0 StartHTML000000232 EndHTML000065057 StartFragment0000.docxVersion1.0 StartHTML000000232 EndHTML000065057 StartFragment0000.docx
Version1.0 StartHTML000000232 EndHTML000065057 StartFragment0000.docx
 
Nonlinear analysis of braced frame with hinge by hinge method in c programming
Nonlinear analysis of braced frame with hinge by hinge method in c programmingNonlinear analysis of braced frame with hinge by hinge method in c programming
Nonlinear analysis of braced frame with hinge by hinge method in c programming
 
C lab programs
C lab programsC lab programs
C lab programs
 
C lab programs
C lab programsC lab programs
C lab programs
 
bfd23fd7-0d89-45c0-8b82-c991b30ed375.pdf
bfd23fd7-0d89-45c0-8b82-c991b30ed375.pdfbfd23fd7-0d89-45c0-8b82-c991b30ed375.pdf
bfd23fd7-0d89-45c0-8b82-c991b30ed375.pdf
 
Drawing on canvas
Drawing on canvasDrawing on canvas
Drawing on canvas
 
VTU Data Structures Lab Manual
VTU Data Structures Lab ManualVTU Data Structures Lab Manual
VTU Data Structures Lab Manual
 
Bcsl 033 data and file structures lab s2-2
Bcsl 033 data and file structures lab s2-2Bcsl 033 data and file structures lab s2-2
Bcsl 033 data and file structures lab s2-2
 

More from adianantsolutions

Nancy acaba de vender algunas de sus acciones en Spotify Inc.pdf
Nancy acaba de vender algunas de sus acciones en Spotify Inc.pdfNancy acaba de vender algunas de sus acciones en Spotify Inc.pdf
Nancy acaba de vender algunas de sus acciones en Spotify Inc.pdf
adianantsolutions
 
Name this accessory gland to the digestive systemName th.pdf
Name this accessory gland to the digestive systemName th.pdfName this accessory gland to the digestive systemName th.pdf
Name this accessory gland to the digestive systemName th.pdf
adianantsolutions
 
Name of Bacteria Observation Results E coli Yellow s.pdf
Name of Bacteria    Observation    Results  E coli Yellow s.pdfName of Bacteria    Observation    Results  E coli Yellow s.pdf
Name of Bacteria Observation Results E coli Yellow s.pdf
adianantsolutions
 
Nasopharyngeal aspirates samples are used to investigate the.pdf
Nasopharyngeal aspirates samples are used to investigate the.pdfNasopharyngeal aspirates samples are used to investigate the.pdf
Nasopharyngeal aspirates samples are used to investigate the.pdf
adianantsolutions
 
Mutating His E7 the distal His in myoglobin to a Gly would.pdf
Mutating His E7 the distal His in myoglobin to a Gly would.pdfMutating His E7 the distal His in myoglobin to a Gly would.pdf
Mutating His E7 the distal His in myoglobin to a Gly would.pdf
adianantsolutions
 
Muthata1Calleingove LatinatLahr Nereant 1 17ar.pdf
Muthata1Calleingove LatinatLahr Nereant 1 17ar.pdfMuthata1Calleingove LatinatLahr Nereant 1 17ar.pdf
Muthata1Calleingove LatinatLahr Nereant 1 17ar.pdf
adianantsolutions
 
Nadine LeMieux has just inherited 8000 She wants to use t.pdf
Nadine LeMieux has just inherited 8000 She wants to use t.pdfNadine LeMieux has just inherited 8000 She wants to use t.pdf
Nadine LeMieux has just inherited 8000 She wants to use t.pdf
adianantsolutions
 
NAD Participa en la hidrlisis de la sacarosa a glucosa e.pdf
NAD  Participa en la hidrlisis de la sacarosa a glucosa  e.pdfNAD  Participa en la hidrlisis de la sacarosa a glucosa  e.pdf
NAD Participa en la hidrlisis de la sacarosa a glucosa e.pdf
adianantsolutions
 
Multi choice Which sequence represents the correct sequence .pdf
Multi choice Which sequence represents the correct sequence .pdfMulti choice Which sequence represents the correct sequence .pdf
Multi choice Which sequence represents the correct sequence .pdf
adianantsolutions
 
n2 1 let xPn Show that yv2x0X22n 2 Let x1x2.pdf
n2  1 let xPn Show that yv2x0X22n 2 Let x1x2.pdfn2  1 let xPn Show that yv2x0X22n 2 Let x1x2.pdf
n2 1 let xPn Show that yv2x0X22n 2 Let x1x2.pdf
adianantsolutions
 
n Faturalama Belgesi ilevini kullanmak iin n koullar nele.pdf
n Faturalama Belgesi ilevini kullanmak iin n koullar nele.pdfn Faturalama Belgesi ilevini kullanmak iin n koullar nele.pdf
n Faturalama Belgesi ilevini kullanmak iin n koullar nele.pdf
adianantsolutions
 
Myra had high scores as cooperative team player evenkeele.pdf
Myra had high scores as cooperative team player evenkeele.pdfMyra had high scores as cooperative team player evenkeele.pdf
Myra had high scores as cooperative team player evenkeele.pdf
adianantsolutions
 
Mycobacterium tuberculosis infecta a casi 13 de la poblaci.pdf
Mycobacterium tuberculosis infecta a casi 13 de la poblaci.pdfMycobacterium tuberculosis infecta a casi 13 de la poblaci.pdf
Mycobacterium tuberculosis infecta a casi 13 de la poblaci.pdf
adianantsolutions
 
My library gt IT 145 Intro to Software Development home .pdf
My library gt IT 145 Intro to Software Development home .pdfMy library gt IT 145 Intro to Software Development home .pdf
My library gt IT 145 Intro to Software Development home .pdf
adianantsolutions
 
My code is below How do I write this code without usin.pdf
My code is below How do I write this code without usin.pdfMy code is below How do I write this code without usin.pdf
My code is below How do I write this code without usin.pdf
adianantsolutions
 
My essay topic is Water Pollution in black Mississippi Jacks.pdf
My essay topic is Water Pollution in black Mississippi Jacks.pdfMy essay topic is Water Pollution in black Mississippi Jacks.pdf
My essay topic is Water Pollution in black Mississippi Jacks.pdf
adianantsolutions
 
Msrda renkli bir aleuron tohumun bir ksm bir maddenin var.pdf
Msrda renkli bir aleuron tohumun bir ksm bir maddenin var.pdfMsrda renkli bir aleuron tohumun bir ksm bir maddenin var.pdf
Msrda renkli bir aleuron tohumun bir ksm bir maddenin var.pdf
adianantsolutions
 
MRPnin baarl bir ekilde uygulanmas ve iletilmesi iin aadak.pdf
MRPnin baarl bir ekilde uygulanmas ve iletilmesi iin aadak.pdfMRPnin baarl bir ekilde uygulanmas ve iletilmesi iin aadak.pdf
MRPnin baarl bir ekilde uygulanmas ve iletilmesi iin aadak.pdf
adianantsolutions
 
Mr senabe is a senior teacher in a secondary school he has.pdf
Mr senabe is a senior teacher in a secondary school he has.pdfMr senabe is a senior teacher in a secondary school he has.pdf
Mr senabe is a senior teacher in a secondary school he has.pdf
adianantsolutions
 
Multiple Choice that those genes are not useful in interpret.pdf
Multiple Choice that those genes are not useful in interpret.pdfMultiple Choice that those genes are not useful in interpret.pdf
Multiple Choice that those genes are not useful in interpret.pdf
adianantsolutions
 

More from adianantsolutions (20)

Nancy acaba de vender algunas de sus acciones en Spotify Inc.pdf
Nancy acaba de vender algunas de sus acciones en Spotify Inc.pdfNancy acaba de vender algunas de sus acciones en Spotify Inc.pdf
Nancy acaba de vender algunas de sus acciones en Spotify Inc.pdf
 
Name this accessory gland to the digestive systemName th.pdf
Name this accessory gland to the digestive systemName th.pdfName this accessory gland to the digestive systemName th.pdf
Name this accessory gland to the digestive systemName th.pdf
 
Name of Bacteria Observation Results E coli Yellow s.pdf
Name of Bacteria    Observation    Results  E coli Yellow s.pdfName of Bacteria    Observation    Results  E coli Yellow s.pdf
Name of Bacteria Observation Results E coli Yellow s.pdf
 
Nasopharyngeal aspirates samples are used to investigate the.pdf
Nasopharyngeal aspirates samples are used to investigate the.pdfNasopharyngeal aspirates samples are used to investigate the.pdf
Nasopharyngeal aspirates samples are used to investigate the.pdf
 
Mutating His E7 the distal His in myoglobin to a Gly would.pdf
Mutating His E7 the distal His in myoglobin to a Gly would.pdfMutating His E7 the distal His in myoglobin to a Gly would.pdf
Mutating His E7 the distal His in myoglobin to a Gly would.pdf
 
Muthata1Calleingove LatinatLahr Nereant 1 17ar.pdf
Muthata1Calleingove LatinatLahr Nereant 1 17ar.pdfMuthata1Calleingove LatinatLahr Nereant 1 17ar.pdf
Muthata1Calleingove LatinatLahr Nereant 1 17ar.pdf
 
Nadine LeMieux has just inherited 8000 She wants to use t.pdf
Nadine LeMieux has just inherited 8000 She wants to use t.pdfNadine LeMieux has just inherited 8000 She wants to use t.pdf
Nadine LeMieux has just inherited 8000 She wants to use t.pdf
 
NAD Participa en la hidrlisis de la sacarosa a glucosa e.pdf
NAD  Participa en la hidrlisis de la sacarosa a glucosa  e.pdfNAD  Participa en la hidrlisis de la sacarosa a glucosa  e.pdf
NAD Participa en la hidrlisis de la sacarosa a glucosa e.pdf
 
Multi choice Which sequence represents the correct sequence .pdf
Multi choice Which sequence represents the correct sequence .pdfMulti choice Which sequence represents the correct sequence .pdf
Multi choice Which sequence represents the correct sequence .pdf
 
n2 1 let xPn Show that yv2x0X22n 2 Let x1x2.pdf
n2  1 let xPn Show that yv2x0X22n 2 Let x1x2.pdfn2  1 let xPn Show that yv2x0X22n 2 Let x1x2.pdf
n2 1 let xPn Show that yv2x0X22n 2 Let x1x2.pdf
 
n Faturalama Belgesi ilevini kullanmak iin n koullar nele.pdf
n Faturalama Belgesi ilevini kullanmak iin n koullar nele.pdfn Faturalama Belgesi ilevini kullanmak iin n koullar nele.pdf
n Faturalama Belgesi ilevini kullanmak iin n koullar nele.pdf
 
Myra had high scores as cooperative team player evenkeele.pdf
Myra had high scores as cooperative team player evenkeele.pdfMyra had high scores as cooperative team player evenkeele.pdf
Myra had high scores as cooperative team player evenkeele.pdf
 
Mycobacterium tuberculosis infecta a casi 13 de la poblaci.pdf
Mycobacterium tuberculosis infecta a casi 13 de la poblaci.pdfMycobacterium tuberculosis infecta a casi 13 de la poblaci.pdf
Mycobacterium tuberculosis infecta a casi 13 de la poblaci.pdf
 
My library gt IT 145 Intro to Software Development home .pdf
My library gt IT 145 Intro to Software Development home .pdfMy library gt IT 145 Intro to Software Development home .pdf
My library gt IT 145 Intro to Software Development home .pdf
 
My code is below How do I write this code without usin.pdf
My code is below How do I write this code without usin.pdfMy code is below How do I write this code without usin.pdf
My code is below How do I write this code without usin.pdf
 
My essay topic is Water Pollution in black Mississippi Jacks.pdf
My essay topic is Water Pollution in black Mississippi Jacks.pdfMy essay topic is Water Pollution in black Mississippi Jacks.pdf
My essay topic is Water Pollution in black Mississippi Jacks.pdf
 
Msrda renkli bir aleuron tohumun bir ksm bir maddenin var.pdf
Msrda renkli bir aleuron tohumun bir ksm bir maddenin var.pdfMsrda renkli bir aleuron tohumun bir ksm bir maddenin var.pdf
Msrda renkli bir aleuron tohumun bir ksm bir maddenin var.pdf
 
MRPnin baarl bir ekilde uygulanmas ve iletilmesi iin aadak.pdf
MRPnin baarl bir ekilde uygulanmas ve iletilmesi iin aadak.pdfMRPnin baarl bir ekilde uygulanmas ve iletilmesi iin aadak.pdf
MRPnin baarl bir ekilde uygulanmas ve iletilmesi iin aadak.pdf
 
Mr senabe is a senior teacher in a secondary school he has.pdf
Mr senabe is a senior teacher in a secondary school he has.pdfMr senabe is a senior teacher in a secondary school he has.pdf
Mr senabe is a senior teacher in a secondary school he has.pdf
 
Multiple Choice that those genes are not useful in interpret.pdf
Multiple Choice that those genes are not useful in interpret.pdfMultiple Choice that those genes are not useful in interpret.pdf
Multiple Choice that those genes are not useful in interpret.pdf
 

Recently uploaded

Walmart Business+ and Spark Good for Nonprofits.pdf
Walmart Business+ and Spark Good for Nonprofits.pdfWalmart Business+ and Spark Good for Nonprofits.pdf
Walmart Business+ and Spark Good for Nonprofits.pdf
TechSoup
 
DRUGS AND ITS classification slide share
DRUGS AND ITS classification slide shareDRUGS AND ITS classification slide share
DRUGS AND ITS classification slide share
taiba qazi
 
Main Java[All of the Base Concepts}.docx
Main Java[All of the Base Concepts}.docxMain Java[All of the Base Concepts}.docx
Main Java[All of the Base Concepts}.docx
adhitya5119
 
clinical examination of hip joint (1).pdf
clinical examination of hip joint (1).pdfclinical examination of hip joint (1).pdf
clinical examination of hip joint (1).pdf
Priyankaranawat4
 
Advanced Java[Extra Concepts, Not Difficult].docx
Advanced Java[Extra Concepts, Not Difficult].docxAdvanced Java[Extra Concepts, Not Difficult].docx
Advanced Java[Extra Concepts, Not Difficult].docx
adhitya5119
 
How to Manage Your Lost Opportunities in Odoo 17 CRM
How to Manage Your Lost Opportunities in Odoo 17 CRMHow to Manage Your Lost Opportunities in Odoo 17 CRM
How to Manage Your Lost Opportunities in Odoo 17 CRM
Celine George
 
Executive Directors Chat Leveraging AI for Diversity, Equity, and Inclusion
Executive Directors Chat  Leveraging AI for Diversity, Equity, and InclusionExecutive Directors Chat  Leveraging AI for Diversity, Equity, and Inclusion
Executive Directors Chat Leveraging AI for Diversity, Equity, and Inclusion
TechSoup
 
Community pharmacy- Social and preventive pharmacy UNIT 5
Community pharmacy- Social and preventive pharmacy UNIT 5Community pharmacy- Social and preventive pharmacy UNIT 5
Community pharmacy- Social and preventive pharmacy UNIT 5
sayalidalavi006
 
Your Skill Boost Masterclass: Strategies for Effective Upskilling
Your Skill Boost Masterclass: Strategies for Effective UpskillingYour Skill Boost Masterclass: Strategies for Effective Upskilling
Your Skill Boost Masterclass: Strategies for Effective Upskilling
Excellence Foundation for South Sudan
 
MARY JANE WILSON, A “BOA MÃE” .
MARY JANE WILSON, A “BOA MÃE”           .MARY JANE WILSON, A “BOA MÃE”           .
MARY JANE WILSON, A “BOA MÃE” .
Colégio Santa Teresinha
 
Hindi varnamala | hindi alphabet PPT.pdf
Hindi varnamala | hindi alphabet PPT.pdfHindi varnamala | hindi alphabet PPT.pdf
Hindi varnamala | hindi alphabet PPT.pdf
Dr. Mulla Adam Ali
 
Liberal Approach to the Study of Indian Politics.pdf
Liberal Approach to the Study of Indian Politics.pdfLiberal Approach to the Study of Indian Politics.pdf
Liberal Approach to the Study of Indian Politics.pdf
WaniBasim
 
Pride Month Slides 2024 David Douglas School District
Pride Month Slides 2024 David Douglas School DistrictPride Month Slides 2024 David Douglas School District
Pride Month Slides 2024 David Douglas School District
David Douglas School District
 
Exploiting Artificial Intelligence for Empowering Researchers and Faculty, In...
Exploiting Artificial Intelligence for Empowering Researchers and Faculty, In...Exploiting Artificial Intelligence for Empowering Researchers and Faculty, In...
Exploiting Artificial Intelligence for Empowering Researchers and Faculty, In...
Dr. Vinod Kumar Kanvaria
 
ANATOMY AND BIOMECHANICS OF HIP JOINT.pdf
ANATOMY AND BIOMECHANICS OF HIP JOINT.pdfANATOMY AND BIOMECHANICS OF HIP JOINT.pdf
ANATOMY AND BIOMECHANICS OF HIP JOINT.pdf
Priyankaranawat4
 
BBR 2024 Summer Sessions Interview Training
BBR  2024 Summer Sessions Interview TrainingBBR  2024 Summer Sessions Interview Training
BBR 2024 Summer Sessions Interview Training
Katrina Pritchard
 
How to Setup Warehouse & Location in Odoo 17 Inventory
How to Setup Warehouse & Location in Odoo 17 InventoryHow to Setup Warehouse & Location in Odoo 17 Inventory
How to Setup Warehouse & Location in Odoo 17 Inventory
Celine George
 
PCOS corelations and management through Ayurveda.
PCOS corelations and management through Ayurveda.PCOS corelations and management through Ayurveda.
PCOS corelations and management through Ayurveda.
Dr. Shivangi Singh Parihar
 
RPMS TEMPLATE FOR SCHOOL YEAR 2023-2024 FOR TEACHER 1 TO TEACHER 3
RPMS TEMPLATE FOR SCHOOL YEAR 2023-2024 FOR TEACHER 1 TO TEACHER 3RPMS TEMPLATE FOR SCHOOL YEAR 2023-2024 FOR TEACHER 1 TO TEACHER 3
RPMS TEMPLATE FOR SCHOOL YEAR 2023-2024 FOR TEACHER 1 TO TEACHER 3
IreneSebastianRueco1
 
The simplified electron and muon model, Oscillating Spacetime: The Foundation...
The simplified electron and muon model, Oscillating Spacetime: The Foundation...The simplified electron and muon model, Oscillating Spacetime: The Foundation...
The simplified electron and muon model, Oscillating Spacetime: The Foundation...
RitikBhardwaj56
 

Recently uploaded (20)

Walmart Business+ and Spark Good for Nonprofits.pdf
Walmart Business+ and Spark Good for Nonprofits.pdfWalmart Business+ and Spark Good for Nonprofits.pdf
Walmart Business+ and Spark Good for Nonprofits.pdf
 
DRUGS AND ITS classification slide share
DRUGS AND ITS classification slide shareDRUGS AND ITS classification slide share
DRUGS AND ITS classification slide share
 
Main Java[All of the Base Concepts}.docx
Main Java[All of the Base Concepts}.docxMain Java[All of the Base Concepts}.docx
Main Java[All of the Base Concepts}.docx
 
clinical examination of hip joint (1).pdf
clinical examination of hip joint (1).pdfclinical examination of hip joint (1).pdf
clinical examination of hip joint (1).pdf
 
Advanced Java[Extra Concepts, Not Difficult].docx
Advanced Java[Extra Concepts, Not Difficult].docxAdvanced Java[Extra Concepts, Not Difficult].docx
Advanced Java[Extra Concepts, Not Difficult].docx
 
How to Manage Your Lost Opportunities in Odoo 17 CRM
How to Manage Your Lost Opportunities in Odoo 17 CRMHow to Manage Your Lost Opportunities in Odoo 17 CRM
How to Manage Your Lost Opportunities in Odoo 17 CRM
 
Executive Directors Chat Leveraging AI for Diversity, Equity, and Inclusion
Executive Directors Chat  Leveraging AI for Diversity, Equity, and InclusionExecutive Directors Chat  Leveraging AI for Diversity, Equity, and Inclusion
Executive Directors Chat Leveraging AI for Diversity, Equity, and Inclusion
 
Community pharmacy- Social and preventive pharmacy UNIT 5
Community pharmacy- Social and preventive pharmacy UNIT 5Community pharmacy- Social and preventive pharmacy UNIT 5
Community pharmacy- Social and preventive pharmacy UNIT 5
 
Your Skill Boost Masterclass: Strategies for Effective Upskilling
Your Skill Boost Masterclass: Strategies for Effective UpskillingYour Skill Boost Masterclass: Strategies for Effective Upskilling
Your Skill Boost Masterclass: Strategies for Effective Upskilling
 
MARY JANE WILSON, A “BOA MÃE” .
MARY JANE WILSON, A “BOA MÃE”           .MARY JANE WILSON, A “BOA MÃE”           .
MARY JANE WILSON, A “BOA MÃE” .
 
Hindi varnamala | hindi alphabet PPT.pdf
Hindi varnamala | hindi alphabet PPT.pdfHindi varnamala | hindi alphabet PPT.pdf
Hindi varnamala | hindi alphabet PPT.pdf
 
Liberal Approach to the Study of Indian Politics.pdf
Liberal Approach to the Study of Indian Politics.pdfLiberal Approach to the Study of Indian Politics.pdf
Liberal Approach to the Study of Indian Politics.pdf
 
Pride Month Slides 2024 David Douglas School District
Pride Month Slides 2024 David Douglas School DistrictPride Month Slides 2024 David Douglas School District
Pride Month Slides 2024 David Douglas School District
 
Exploiting Artificial Intelligence for Empowering Researchers and Faculty, In...
Exploiting Artificial Intelligence for Empowering Researchers and Faculty, In...Exploiting Artificial Intelligence for Empowering Researchers and Faculty, In...
Exploiting Artificial Intelligence for Empowering Researchers and Faculty, In...
 
ANATOMY AND BIOMECHANICS OF HIP JOINT.pdf
ANATOMY AND BIOMECHANICS OF HIP JOINT.pdfANATOMY AND BIOMECHANICS OF HIP JOINT.pdf
ANATOMY AND BIOMECHANICS OF HIP JOINT.pdf
 
BBR 2024 Summer Sessions Interview Training
BBR  2024 Summer Sessions Interview TrainingBBR  2024 Summer Sessions Interview Training
BBR 2024 Summer Sessions Interview Training
 
How to Setup Warehouse & Location in Odoo 17 Inventory
How to Setup Warehouse & Location in Odoo 17 InventoryHow to Setup Warehouse & Location in Odoo 17 Inventory
How to Setup Warehouse & Location in Odoo 17 Inventory
 
PCOS corelations and management through Ayurveda.
PCOS corelations and management through Ayurveda.PCOS corelations and management through Ayurveda.
PCOS corelations and management through Ayurveda.
 
RPMS TEMPLATE FOR SCHOOL YEAR 2023-2024 FOR TEACHER 1 TO TEACHER 3
RPMS TEMPLATE FOR SCHOOL YEAR 2023-2024 FOR TEACHER 1 TO TEACHER 3RPMS TEMPLATE FOR SCHOOL YEAR 2023-2024 FOR TEACHER 1 TO TEACHER 3
RPMS TEMPLATE FOR SCHOOL YEAR 2023-2024 FOR TEACHER 1 TO TEACHER 3
 
The simplified electron and muon model, Oscillating Spacetime: The Foundation...
The simplified electron and muon model, Oscillating Spacetime: The Foundation...The simplified electron and muon model, Oscillating Spacetime: The Foundation...
The simplified electron and muon model, Oscillating Spacetime: The Foundation...
 

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