So it is a really simple and most basic webgl homework, should be really simple for someone who had any experience with computer graphic, attached is the syllybus and a starter code if you want to use


Coordinate frame and basic mouse events.


For this assignment you will provide users the functionality to draw simple predefined geometric shapes with mouse clicks.


Create a blank (white) canvas at least 400 x 600 in dimension. Notice whether the canvas is wider, or taller; and whether the origin is in the middle of the canvas or elsewhere.

Recognize left and right mouse clicks. Echo the mouse positions for each mouse click (use console.log).

Maintain a list of points representing positions of mouse clicks (both left and right).

When a left click is detected, draw a filled red circle centered at the mouse position and with radius of 10.

When a right click is detected, draw a filled blue square centered at the mouse position and with a side of length 10.

When a both left and right clicks are detected at the same position, the two shapes are drawn on top of each other. If the sequence is left followed by right clicks, only the blue square will be visible. If the sequence is right followed by left clicks, the red circle is visible over the blue square. The latest mouse click at the same position will determine what's visible there.


Check out the ClickedPoints and online resource on mouse events.



You start off with 100 points. You earn additional credit by turning in your assignment early and/or implementing additional features (not applicable to this assignment).

You lose credit for missing functionality, incorrect results, poorly documented or formatted code, or not following instructions.

Below is a partial list:

- up to 10 points off for poor features.html file - up to 10 points off for inadequate comments or hard-to-read code - up to 10 points off for not following instructions - up to 10 points off for special handling to grade your homework (usually because you did not check that it runs on the computers in the lab first).

- functionality points depending on importance Make sure you:

a. submit the right files you want us to grade, b. have tested your code on the browsers in the lab.

c. follow the general instructions described in overview.html