線の太さを実装していきたいと思います。

↓この部分

前回同様、今度は[type="range"]の値を取得し、lineWidthに入れるだけです。

<input type="range" value="1" min="1" max="10" step="1" oninput="LineWidth(this)">
<output id="LineWidthValue">1</output>pixel

//線の太さ用変数（デフォルトは1px）
var strLineWidth="1";

function LineWidth(obj){
	document.getElementById('LineWidthValue').value=obj.value;
	strLineWidth=obj.value;
}

最後に

	ct.lineWidth=strLineWidth;

↑ここだけだと伝わらないと思うので↓のgithubの差分をを参照ください。

これで線の太さ変更が可能になりました。

次：お絵かきできるSNSを作りたい！8
最初：お絵かきできるSNSを作りたい！