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

computer science

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.

Sample output:


Related Questions in computer science category