A function that writes

Challenge 11 of 12

Write drawLabel to set WHITE and text size 32 and write its word at its across, 340 down — a function can write as well as draw.

Draw a RED circle at 200, 180 sized 160 on BLACK, then call drawLabel with "red" at 160.

Your code JavaScript

Draw a RED circle at 200, 180 sized 160 on BLACK, then call drawLabel with "red" at 160.

Console print() output

0 / 30 frames · 400×400

Target

Yours

Yours over Target — ghosted shapes are in the target but missing from yours

Results

Press Run to check your code

Penalties: none this run

Report this challenge

Lesson Code it yourself

Everything in this topic starts the same way: an empty editor. There is nothing to fill in, because there is nothing there — the definition, the inputs and the calls are all yours.

The buttons above the editor do the fiddly part. Click function and you get the whole shape of a definition, curly brackets and all, with the cursor sitting inside it. Click everyFrame and you get the block that runs every frame. Nothing a button gives you is the answer; the name, what it takes and what it draws are still your decisions.

Two rules decide whether a function works, and both are about where lines sit rather than what they say. A definition can go above or below everyFrame — the sketch reads the whole file before it draws anything — but the drawing only happens when something calls the name. A definition on its own draws nothing at all, and that is the commonest reason a canvas comes back empty here.

An input is a name you invent inside the round brackets, and it means the caller decides. drawTree(x) draws its tree wherever the call says; drawTree(x, howBig) lets the call choose the size as well. Inside the function that name is just a number like any other, so it can go into a sum: x - 20 is twenty to the left of wherever it was sent.

A function can hand a number back instead of drawing, with return. Then it is not a picture but an answer, and the line that called it uses the answer wherever a number would go.

Press Run early and often. Write the definition, call it once, run it, and only then add the second call — one line at a time is far easier than eight lines and a blank canvas.