S2JS - Control: functions, loops, if-then-else : Automatic circle colouring

Here's an even better example. We define our own "fillCircle" function that automatically changes the colour of the circle depending on whether the radius is less than 50 pixels or not.

What do you think would happen if the radius of a circle was exactly 50 pixels? Before you answer, think carefully about how the condition is expressed and how literal-minded computers are.

Make your prediction, then try it and see what happens..

<HTML> <head> <title> My new Web Page </title> </head> <body> <canvas id=myCanvas width=300 height=300 style="background-color: pink;"> </canvas> <script> var ctx = myCanvas.getContext("2d"); function fillCircle (x, y, radius) { ctx.beginPath(); if (radius < 50) { ctx.fillStyle= "red"; } else { ctx.fillStyle= "green"; } ctx.arc(x, y, radius, 0, Math.PI * 2); ctx.fill(); } fillCircle(50, 50, 40); fillCircle(200,50, 20); fillCircle(200, 200, 60); </script> </body> </html>