HTML Canvasに描写した文字が拡大されてぼやける

Question

前提・実現したいこと

TypeScript・AngulerJsを使ってWEBアプリを開発しています。

画面いっぱいに表示したcanvasの上部に文字を表示したいのですが、
canvasの幅と高さを指定すると、以下の画像のように文字が拡大されぼやけて表示されます。
高さや幅を指定しないか、200pxなど小さ目に設定するとぼやけません。
どうすれば文字をぼやけさせず指定したサイズで文字を描写できますでしょうか。

該当のソースコード

<div id="content">
   <canvas id="canvas"></canvas>
</div>

body #content #canvas {
      width: 100%;
      height: 100%; 
}

var canvas = <HTMLCanvasElement>document.getElementById('canvas');
var ctx = canvas.getContext("2d");
            
ctx.font = "italic bold 30px 'ＭＳ Ｐゴシック'";
ctx.fillText("ラベル1", 10, 30);

Answer 1

cavasはラスタデータなのでベクタデータのsvgを利用ください

sample

<script>
window.addEventListener('DOMContentLoaded', function(e){
  var canvas = document.getElementById('canvas');
  var ctx = canvas.getContext("2d");
  ctx.font = "italic bold 30px 'ＭＳ Ｐゴシック'";
  ctx.fillText("ラベル1", 10, 30);
  var svg=document.getElementById('svg');
  var text=document.createElementNS('http://www.w3.org/2000/svg','text');
  text.textContent="ラベル2";
  text.setAttribute('x','0');
  text.setAttribute('y','30');
  text.setAttribute('style','font-size:30px;font-style: italic;font-weight:bold;font-family:"ＭＳ Ｐゴシック"');
  svg.appendChild(text);  
});
</script>

<div id="content">
<canvas id="canvas" width="150" height="50"></canvas>
<svg id="svg" width="150" height="50"></svg>
</div>

Comments

[退会済みユーザー]

ラスタデータをCSS引き延ばしていたからぼやけてしまっていたんですね。
ご回答ありがとうございます。

[yambejp]

svgのサンプルつけておきました

Answer 2

すみません、自己解決しました。
canvasのサイズを変更する際はcanvasタグの属性で設定しないといけないようです。
canvasのデフォルトサイズは幅300px、高さ150pxになっており、CSSで指定してしまうとデフォルトサイズのcanvasをCSSで指定したサイズに引きのばすような動きになっているとのことでした。
参照https://qiita.com/ShinyaOkazawa/items/9e662bf2121548f79d5f