receptive item in the cartoon

Description

Question 1

Using a HTML5 Canvas & JavaScript, draw some cartoon on the screen using moveTo, lineTo, fill, stroke, and other JavaScript canvas functions.

• Add a link from your portfolio page to the cartoon.
• Cartoon page must have a title. Include a link under the canvas to return to your main page.
• You should use an external JS file for your JavaScript code.
• Comment the different sections of your cartoon using JS comments, so that someone can easily understand what is being drawn.

Your cartoon should include

• Some caption text (must be written on the canvas!)
• Background color
• Sun, Moon, Clouds, Water, Mountains, Trees, and/or other background objects
• Ground color
• Living Quarters with details (windows, door, etc). Could be a boat, tent, house, spaceship, etc.
• Use a for loop to draw grass, rocks, fence, ladder, or some other receptive item in the cartoon.

Helpful sites:

Refer to the HTML5 book Chapter 8 for details on how to draw.

http://www.w3schools.com/tags/ref_canvas.asp

http://www.w3schools.com/graphics/canvas_intro.asp

https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes

Question 2

Chart Program

Store the following values in a JSON array in JavaScript.

Apple: 20

Orange: 10

Banana: 15

Kiwi: 3

Blueberry: 5

Grapes: 8

JSON in JavaScript example is best. Here it is partially, to help start you off.

var fruit = [

            {name:”Apple”, quantity:20, color:”red”},

            {name:”Orange”, quantity:10, color:”orange”}

];

Using Javascript/Canvas, draw out a bar chart showing the quantity in sales for the fruit. Each bar must be in a color that matches the fruit, please choose a unique color for each fruit.

Write the name of the fruit, followed by the bar chart. You can choose horizontal or vertical.

Refer to the following examples for help:

https://www.w3schools.com/js/js_json_arrays.asp

http://www.sci.brooklyn.cuny.edu/~goetz/cisc3610/html5/canvas-text-advanced.html

https://www.w3schools.com/tags/canvas_fillstyle.asp

Please list your name (and up to one other student, if you did work with someone). And place it on your website in a section called Labs.