three. JS text ambiguity problem

https://github.com/jsmask/JumpGame/

See this today jsmask Great God wrote a jump web page , be based on three.js Written .
Compile and run directly , Really excited , But there is also a problem .
Is in the source code GAME OVER The words and pictures on the scene are very blurred
I found a circle on the Internet , First, we found the method of overall optimization , However, the picture of text and pictures after overall optimization is not very ideal .

renderer.setSize(sizes.width, sizes.height)
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))

And then they found out CANVAS Image optimization method , Can be used to optimize ：
You can see https://www.geeksforgeeks.org/how-to-sharpen-blurry-text-in-html5-canvas/
On the left is the optimized , On the right is before optimization .

The basic principle is , adopt canvas.content Of scale Method to enlarge the canvas , Draw an enlarged picture on it , And then through thress Zoom , Improve the resolution of the picture . That is to draw a picture twice as big , Shrink and come back .

The optimized code is as follows ：

this.context = canvas.getContext('2d');

// The core 
this.context.scale(scale, scale)
this.context.fillStyle = 'rgba(0,0,0,.7)';
this.context.fillRect(((width - 400) / 2) /scale, ((height - 400 ) / 2)/scale, 400 /scale, 400/scale);
this.context.fillStyle = '#eee';
this.context.font = '11px Georgia';

this.context.fillText('Game Over', ((width - 200) / 2 - 15) /scale, ((height - 200) / 2 + 55)/scale);
this.replay_btn = new Image();
this.replay_btn.onload = () => {
    
this.context.drawImage(this.replay_btn, ((width / 2 - 60) /2) /scale , ((height - 200) / 2 + 125)/scale, 240 /scale, 94/ scale);
}
this.replay_btn.src = img_replay;

// The core 
this.geometry = new THREE.PlaneGeometry(30, 30 * aspect);

The source code is as follows ：

 this.context = canvas.getContext('2d');
 this.context.fillStyle = 'rgba(0,0,0,.7)';
 this.context.fillRect((width - 200) / 2, (height - 200) / 2, 200, 200);
 this.context.fillStyle = '#eee';
 this.context.font = '22px Georgia';
 this.context.fillText('Game Over', (width - 200) / 2 + 45, (height - 200) / 2 + 55);
 this.replay_btn = new Image();
 this.replay_btn.onload = () => {
    
 this.context.drawImage(this.replay_btn, width / 2 - 60, (height - 200) / 2 + 125, 120, 47);
 }
 this.replay_btn.src = img_replay;
 
 this.geometry = new THREE.PlaneGeometry(60, 60 * aspect);

After writing, I suddenly remembered that there was a time when the definition of the QR code picture generated by the front end was not enough. It was also through Mr. Cheng to enlarge the picture , Then reduce the display form to complete . This is the same principle as that .