Put a short “title” above your canvas and a caption below to explain what your picture is about (in case it is not obvious). You can use HTML like this for the purpose:
Examples of foreground objects: a fish, some seaweed, a rocket, an airplane, a cloud, a human face, a bird, a flower, a tree, an insect, a spider web. This list is not meant to limit you.
The background can be a plain, solid color (night or day sky or water), or a gradient. You can also have objects in the background, such as hills, clouds, stars.
Before writing code, sketch your scene on a sheet of paper (perhaps graph paper) and use the sketch to estimate coordinates of significant points.
Develop incrementally: code a little and test; repeat until finished.
Use top-down design and functions to organize the task hierarchically. For example, if there is a troll in your scene, there should probably be a drawTroll function with some helping functions, maybe organized like this:
It can be helpful to parameterize functions that draw objects with an “anchor” position, especially if you want to draw multiple objects of the same type at different locations:
Turn in the web page (HTML file) as an attachment in Oncourse Assignments. If you have extra files (for example, an external script or style sheet), attach them also. But if you have more than three (3) files, bundle them in a zip, tar, tar.gz, tar.bz2, or tar.xz file and just attach the bundle.
(10 points) The web page uses correct, complete HTML5 boilerplate syntax, and includes a canvas, picture title, and caption.
(9 points) The drawing has a background and at least two foreground objects.
(10 points) The drawing makes use of lines, polygons or polylines, and curves.
(9 points) The drawing has at least three HSL or HSLA colors.
(6 points) The drawing has a gradient.
(6 points) The drawing has a transparency effect involving at least two overlapping objects.
(5 points) The script is effectively organized with hierarchical functions.
(5 points) The script follows common practices of good code style, such as structural indenting, meaningful identifiers, and comments (but by no means limited to these).