JavaScript/HTML5での図形の描写

質問

canvasを使って図形の描写をするコードを書いています。
javascript初心者なりに考え、調べたのですがどうしてもわからなかったのでどなたか教えてください。

「入力された値を半径とした円をcanvas内のランダムな位置に、ランダムな色で複数描写する」という風にしたいのです。値は好きなだけ入れれるようにしてあります。現段階でランダムな位置に描写することはできるのですが、黒縁の白い円しか描写できません。「ランダムに彩色する」部分をどのように記述したらよいのかご教授願います。

【以下書いたコード】
function draw() {
var canvas = document.getElementById('mycanvas');
var ctx = canvas.getContext('2d');
var r = parseInt(document.getElementById("radius").value);
ctx.beginPath();

var drawPointX = Math.floor( Math.random() * 1200 ) + 1;
var drawPointY = Math.floor( Math.random() * 600 ) + 1;
ctx.arc( drawPointX, drawPointY, r, 0, Math.PI*2, true );

//ランダムな色を生成・彩色する
var r = parseInt(Math.random() * 255);
var g = parseInt(Math.random() * 255);
var b = parseInt(Math.random() * 255);
var alpha = Math.random();
var rgba = "rgba("+r+", "+g+", "+b+", "+alpha+")";
ctx.fillStyle=rgba;
ctx.stroke();

}

回答No.1

y_free_temp · ベストアンサー

線はstroke、塗りつぶし部分をfillで指定します。

塗りつぶしの配色ならfillStyle、塗りつぶすときはfill()
線の配色ならstrokeStyle、線を書くときはstroke()

今のソースだとそのあたりがどっちつかずだから期待どおりにならないのかと。

r,g,bをrandameで求めてfillStyleに入れて、fill()、
再度r,g,bをrandameで求めてstrokeStyleに入れて、stroke()

という感じでどうでしょうか？

お礼

fillとstrokeの区別がついていないということ、回答者様の文章で気づきました。
やってみたら無事にできました。詳しい回答をありがとうございました。

回答No.2

Picosoft

fillとstrokeがごちゃごちゃになっていませんか？

fillStyle→塗りつぶしの色。fill()を呼ぶことで塗りつぶす
strokeStyle→線の色。stroke()を呼ぶことで線を描画する

お礼

確かにfillとstrokeの区別がついていませんでした。
変えてみたら無事にできました。わかりやすい回答をありがとうございました。