Canvasで描画した文字がぼやける

Question

前提・実現したいこと

JavaScriptでQRコードを生成し、canvasで文字と枠線を描画後、pngファイルにしてダウンロードしたいです。

発生している問題

ダウンロードすると、下の画像のように文字がぼやけてしまいます。
またフォントサイズを指定しているにもかかわらずフォントサイズの変更が適用されません。

該当のソースコード

qr_text = 'サンプル';
file_name = 'サンプル';
QRCode.toCanvas(qr_text, { version: 4, width: 400 }, function(err,canvas) {
	if (err) {
		alert(err.message);
		return;
	}
	var text = '有効期限:' + end_date;
	var c = canvas.getContext("2d");
	c.font = "50px";
	c.textAlign = "center";
	c.fillText(text, 200, 380);
	c.lineWidth = 1;
	c.strokeStyle = 'black';
	c.strokeRect(10, 15, 380, 380);
	var imgField = document.getElementById("imgField");
	imgField.appendChild(canvas);
	document.getElementById("qrtext").append(convertCanvasToImage(canvas, file_name));
					
});

<div id="imgField" style="display:none">
</div>
<div id="qrtext" style="display:none">
</div>

何か良い方法がございましたらご教授いただけますと幸いです。
よろしくお願い致します。

追記

QRコードの生成はこちらのモジュールを利用しています。
https://github.com/soldair/node-qrcode

Comments

[yambejp]

QRCode のライブラリについて補足をした方がよいかと

[onakahetta]

ご指摘ありがとうございます！追記しました

Answer 1

フォントの指定をしたところ、文字がぼやけずフォントサイズも変更されるようになりました。

c.font = "20px sans-serif";

Answer 2

https://qiita.com/udoP_/items/bba03df1825023fba63b
こちらに書かれている内容が答えのような気がします。

１、fillTextで書いた文字がにじむ
-> Window.devicePixelRatio

２、canvasの画像をリサイズする
-> 表示サイズとcanvasサイズ、描画しているサイズなどは把握できていますか？

Comments

[onakahetta]

ご回答ありがとうございます！
QRCode.toCanvasのオプションでサイズを指定しているためか、後でcanvasのサイズを変更しようとすると真っ黒のcanvasになってしまってうまくいかなかったので、オプションではなくこちらの方法でサイズ変更試してみます。