Ciao, questo ad occhio e croce mi pare corretto. Inserendo un raggio di 150 mostra un cerchio da 300 (300 come il div sottostante).
Posizionamento e quant'altro non so se li devi calcolare per qualche ragione.
codice:
<canvas id="wl"width="300"height="300"style="border : 1px;">
Il tuo browser non supporta canvas di html5
</canvas>
<script>
function drawCircle(){
var c = document.getElementById("wl");
var ctx = c.getContext("2d");
ctx.beginPath();
var raggio = prompt('Inserisci il valore del raggio', 5);
raggio = parseFloat('0' + raggio);
ctx.arc(150,150, raggio, 0, 2*Math.PI);
ctx.fillStyle="green";
ctx.fill();
ctx.closePath();
ctx.lineWidth=4;
ctx.strokeStyle = "#000000";
ctx.stroke();
}
</script>
<input type="button"onclick="drawCircle()"value="Dr aw Circle"/>
<div style="width:300px; height:300px;background:pink;">300x300</div>