Graphic JavaScript

Back to index

Sometimes it is a good idea to fill a circle with one color and to outline it in another color.
There are actually two approaches that you can take to doing this kind of thing:

1) Use fill and stroke:


ctx.fillStyle="#0000FF";
ctx.beginPath();
ctx.arc(160,160,80,0,2*Math.PI);
ctx.fill();
ctx.strokeStyle="#FFFF00";
ctx.beginPath();
ctx.arc(160,160,80,0,2*Math.PI);
ctx.stroke();

2) Use two fills:


ctx.beginPath();
ctx.arc(160,160,80,0,2*Math.PI);
ctx.fill();
// change color
ctx.fillStyle="red";
ctx.beginPath();
// smaller circle with radius of 70
ctx.arc(160,160,70,0,2*Math.PI);
ctx.fill();

EXAMPLE:
This applet is an approximation of what the student will be expected to create. Notice that each circle is yellow in the middle with a red edge. All the circles you create in the assignment part of this lesson must be filled with one color and have an edge of another color.

ASSIGNMENT:
You will alter the example in the following ways:
1) Place four medium sized circles in the corners.
2) Place three small circles along each edge and make sure they are evenly spaced.
3) Use at least eight different colors.
4) Use both methods described at the top of the page to create your circles.