Raggio Circonferenza da Input

[ShawnFroste]

In pratica il mio problema è questo:
devo creare un bottone di nome draw circle che, passando da tastiera un numero, fa si che cliccando su questo bottone mi crei un cerchio con il raggio uguale al numero digitato..
Questa è la parte del codice che devo modificare, grazie a tutti in anticipo e spero di essere stato chiaro

<canvasid="wl"width="450"height="350"style="border : 1px;">
Il tuo browser non supporta canvas di html5
</canvas>
<scriptlanguage="javascript">
function drawCircle(){

var c = document.getElementById("wl");
var ctx = c.getContext("2d");
ctx.beginPath();
raggio = parseFloat('0'+prompt('Inserisci il valore del raggio',raggio));
ctx.arc(250,150, raggio, 0, 2*Math.PI);
ctx.fillStyle="green";
ctx.fill();
ctx.closePath();
ctx.lineWidth=4;
ctx.strokeStyle = "#000000";
ctx.stroke();
}

<inputtype="button"onclick="drawCircle()"value="Dr aw Circle"/>

[m4rko80]

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.

<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>

[ShawnFroste]

ah ok grazie mille, ma come mai il div a fondo pagina?
ho un dubbio poi, se io volessi mettere un'aria di testo accanto al bottone in cui inserire lì il numero, come potrei modificare il codice?

[m4rko80]

Il div sotto l'avevo messo solo vedere ad occhio le proporzioni, non serve.
Per un input di testo dove inserire il valore al posto del prompt puoi fare così

<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);
var raggio = document.getElementById("raggio");


raggio = parseFloat('0' + raggio.value);
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="Draw Circle"/>
<input type="number" id="raggio" value="10" />

controlli a parte sul valore inserito funziona

[ShawnFroste]

Grazie mille davvero, funziona.. non avevo proprio pensato a mettere var raggio in quel modo grazie mille ancora