Exercise: Using form input to draw circles

Modify the code provided so that when values are entered and the button is clicked, a circle will be drawn on the canvas. You do not need to change the HTML.

Since the canvas dimensions are 500 by 100, try x-coordinate values less than 500 and y-coordinate values less than 100.

The function drawCircle has been provided for you.

Note:

Hints:

  • Use window.onload.

Solution to the exercise

Here is one possible solution.

Note:

Hints:

  • undefined
1
2
function drawCircle(context, radius, x, y, colour) {
    context.lineWidth = 1;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
<!DOCTYPE html>
<html lang="en">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX