Dessiner des cercles à un emplacement choisi par l'utilisateur (avec zone de texte)

La page

centre x = px  
centre y = px  
rayon = px  

Le code

Le code HTML

<p><canvas id="monCanvas" width="600" height="300" style="background-color:#CCC"></canvas></p>
<table border="0" cellspacing="0" cellpadding="0" align="center">
  <tr>
    <td>centre x = </td>
    <td><input type="text" id="textX" value="300"></td>
    <td>px</td>
    <td>&nbsp;</td>
    <td rowspan="3"><input type="button" id="btn" value="Tracer"></td>
  </tr>
  <tr>
    <td>centre y = </td>
    <td><input type="text" id="textY" value="150"></td>
    <td>px</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>rayon = </td>
    <td><input type="text" id="textR" value="30"></td>
    <td>px</td>
    <td>&nbsp;</td>
  </tr>
</table>

Le code JAVASCRIPT