Reduce the Blurring of the Text in the Canvas and Make It Look Sharper

Question

I am working on a project and all my work is with the canvas. But I can not increase the clarity of the texts and shapes on the canvas.

The shapes and texts look rather blurry. For example, how do I reduce the blurring of the text in the sample code below and make it look sharper?

Canvas.ts

import { Component, NgZone, HostListener, OnInit } from '@angular/core';
import { DomSanitizationService } from '@angular/platform-browser';
import { bootstrap } from '@angular/platform-browser-dynamic';

@Component({
selector: 'canvas_game_component',
templateUrl: 'WebSite/Components/CanvasGameComponent/CanvasGame.html',
styleUrls: ['WebSite/Components/CanvasGameComponent/CanvasGame.css']
})

export class CanvasGameComponent  {


constructor() {

}
public click() {
    var canvas: HTMLCanvasElement = document.getElementById("shape_canvas") as HTMLCanvasElement;
    var ctx: CanvasRenderingContext2D = canvas.getContext("2d") as CanvasRenderingContext2D;
    ctx.font = "30px Comic Sans MS";
    ctx.fillStyle = "red";
    ctx.textAlign = "center";
    ctx.fillText("Hello World", 150, 100);
}


}

The image result.

Canvas.html:

<div id="canvas_component" class="canvas_component_class">
<div class="menu_side_class">
    <button (click)="click()">
        click
    </button>
</div>
<canvas id="shape_canvas" class="shape_canvas_class"></canvas>
</div>

Canvas css:

.canvas_game_component {
width: 100%;
height: 100%;
}

.menu_side_class {
width: 100%;
height: 50px;
background-color: green;
}

.shape_canvas_class {
background-color: black;
width: 100%;
height: calc(100% - 50px);
background-color: black;
}