Create a web page named peace.html and an accompanying external JavaScript file
ID: 3661940 • Letter: C
Question
Create a web page named peace.html and an accompanying external JavaScript file named peace.js that displays a peace symbol with red, white, and blue colors. For details, study the provided output. In addition to displaying a peace sign, you must also display an accompanying multi-line message at the right of the peace sign. The output does not show any message, so it’s up to you to be creative and make things look good.
Fill the top-left area with a light red color. Fill the top-right area with a light blue color. Allow the bottom area to display the default background-color, white.
You must implement a drawCanvas function that calls two helper functions – one that draws the peace sign and one that draws the message.
As always, you will be graded on style and elegance. Include a comment above each shape that you draw. You must use named constants as appropriate for things like the peace sign’s center position and the thickness of the peace sign’s lines. If you have any named constants that are used in multiple functions, declare them at the top, above all the functions. For named constants used in a single function, declare them in the function in which they are used.
Output:
Extra credit color gradient.
Multi-line message goes here.
Extra credit color gradient.
Peace Sign -> C f localhost: 15698/hw1/peace.html AMExplanation / Answer
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="300" height="300">
</canvas>
<script>
var c = document.getElementById("myCanvas");
var foo=c.getContext("2d");
foo.beginPath();
foo.arc(150,150,140,0,2*3.14);
foo.strokeStyle = "#000000";
foo.lineWidth = 4;
foo.stroke();
var bar=c.getContext("2d");
bar.moveTo(150,10);
bar.lineTo(150,290);
bar.stroke();
var baz=c.getContext("2d");
baz.moveTo(150,150);
baz.lineTo(52,248);
baz.stroke();
var qux=c.getContext("2d");
qux.moveTo(150,150);
qux.lineTo(248,248);
qux.stroke();
</script>
</body>
</html>
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.