14.6 (Rounded Rectangle) &14.5 (Text Shadow)&15.7 (Nutrition Information XML Document)&15.9 (Nutrition Information XSL Style Sheet).
14.6 (Rounded Rectangle) Generalize the example in Fig 14.7 into a roundedRect function and call it twice with different arguments to place two different rounded rectangles on the canvas. Example Below.
14.7
<!DOCTYPE html>
<!– fig. 14.7 –>
<html>
<head>
<meta charset = “utf-8”>
<title>Quadratic Curves</title>
</head>
<body>
<canvas id = “drawRoundedRect” width = “130” height = “130”
style = “border; 1px solid black;”>
</canvas>
<script>
var canvas = document.getElementById(“drawRoundedRect”);
var context = canvas.getContext(“2d”)
context.beginPath();
context.moveTo(15, 5);
context.lineTo(95, 5);
context.quadraticCurveTo(105, 5, 105, 15);
context.lineTo(105, 95);
context.quadraticCurveTo(105, 105, 95, 105);
context.lineTo(15, 105);
context.quadraticCurveTo(5, 105, 5, 95);
context.lineTo(5, 15);
context.quadraticCurveTo(5, 5, 15, 5);
context.closePath();
context.fillStyle = “yellow”;
context.fill();
context.strokeStyle = “royalblue”;
context.lineWidth = 6;
context.stroke();
</script>
</body>
</html>
==================================
14.5 (Text Shadow) Create a shadow on the phrase "HTML5 Canvas" with an offset-x of 2px, an offset-y of 5px, a blur of 6px and a text-shadowcolor gray.
==================================
15.7 (Nutrition Information XML Document) Create an XML document that marks up the nutrition facts for a package of Grandma White’s cookies. A package of cookies has a serving size of 1 package and the following nutritional value per serving: 260 calories, 100 fat calories, 11 grams of fat, 2 grams of saturated fat, 5 milligrams of cholesterol, 210 milligrams of sodium, 36 grams of total carbohydrates, 2 grams of fiber, 15 grams of sugars and 5 grams of protein. Name this document nutrition.xml. Load the XML document into your web browser. [Hint: Your markup should contain elements describing the product name, serving size/amount, calories, sodium, cholesterol, proteins, etc. Mark up each nutrition fact/ingredient listed above.]
15.9 (Nutrition Information XSL Style Sheet) Write an XSL style sheet for your solution to Exercise 15.7 that displays the nutritional facts in an HTML5 table.
Submit as HTML 5 Files that can be opened in Internet Explorer
