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.
