お絵かきツールでクリックしたときに点を描画したい

Question

###実現したい事
JavaScriptでお絵かきツールをこのサイトを参考にして記述したのですが、マウスをクリックしたときにそのクリック文の描画が出来ません。
マウスをクリックしてその状態でマウスを動かせば描画はされるのですが、マウスをクリックだけして全く動かさないと全く描画されないのです。試行錯誤してソースをいじっても一向に解決しないので分かる方回答お願いします。
###ソース

var drawing = false;
// 前回の座標を記録する（初期値：０）
var before_x = 0;
var before_y = 0;
var moveflg = 0;
var x;
var y;
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

canvas.addEventListener('mousemove', draw_canvas);
// マウスをクリックしてる時
canvas.addEventListener('mousedown', function(e) {
	drawing = true;
	ctx.beginPath();
	var rect = e.target.getBoundingClientRect();
	before_x = e.clientX - rect.left;
	before_y = e.clientY - rect.top;
        ctx.moveTo(x, y);
});
// マウスをクリックしてない時
canvas.addEventListener('mouseup', function() {
        if(moveflg == 0){
		ctx.lineTo(x-1, y-1);
		ctx.lineCap = 'round';
		ctx.lineWidth = 4;
		ctx.stroke();
		console.log("実行中");
	}
	drawing = false;
        moveflg = 0;
	console.log("マウス離れた");
});

// 描画の処理
function draw_canvas(e) {

// drawingがtrueじゃなかったら返す
	if (!drawing){
		return
	};
	var rect = e.target.getBoundingClientRect();
	var x = e.clientX - rect.left;
	var y = e.clientY - rect.top;
	ctx.lineWidth = 2;
	// 描画
	ctx.lineCap = 'round';
	
	ctx.beginPath();
	ctx.moveTo(before_x, before_y);
	ctx.lineTo(x, y);
	ctx.stroke();
	ctx.closePath();
	// 描画最後の座標を前回の座標に代入する
	before_x = x;
	before_y = y;
}

// クリアボタンクリック時
function delete_canvas(){
	ctx.clearRect(0, 0, canvas.width, canvas.height);
}

Answer 1

stroke()はサブパスに線を引くメソッドなので、開始位置のみが指定されたサブパスに線を引くことはできません。
マウスをクリックしてサブパスを開始する前に、クリック位置に円を描画してしまいましょう。

canvas.addEventListener('mousedown', function(e) {
    drawing = true;
    var rect = e.target.getBoundingClientRect();
    before_x = e.clientX - rect.left;
    before_y = e.clientY - rect.top;

    ctx.beginPath();
    ctx.arc(before_x, before_y, 1, 0, Math.PI*2, true);
    ctx.fill();

    ctx.beginPath();
    ctx.moveTo(x, y);
});