Getting rasterized text in html canvas

I have main canvas on which I draw another canvas which had a text written on it. When I saw the results, it appears that the text is rasterized and not smooth.

Here is the code I tried :-

Code :-

const mainCanvas = document.querySelector('.main');
const mainCanvasContext = mainCanvas.getContext('2d');

const backgroundCanvas = document.createElement('canvas');
const backgroundCanvasContext = backgroundCanvas.getContext('2d');

const run = async () => {
  backgroundCanvasContext.font = '500 300px MatterSQ';
  ctx.fillStyle = 'white';
  ctx.fillText(text, 1920 / 2, 30);

  mainCanvasContext.drawImage(backgroundCanvas, 0, 0, mainCanvas.width, mainCanvas.height);
};

run();

Here is the HTML and CSS setup:

<canvas class="main"></canvas>

.main {
  width: 800px;
  aspect-ratio: 16 / 9;
  background: blue;
}

Problem: The final text canvas draw on the main canvas has blurry / rasterized text

Here is the Final Result :-
enter image description here