Before the emergence of high-definition screens, a physical pixel of the screen was a logical pixel defined by CSS (it is estimated that there was no concept of physical pixels and logical pixels at that time). Therefore, you can use the following code to display a 600x386 Canvas in the browser.
<html> <head> <title>Canvas demo</title> <style> * { padding: 0; margin: 0; } html, body { width: 100%; } #canvas { display: block; border: 1px solid red; margin: 10px auto 0; } </style> </head> <body> <canvas id=canvas width=600 height=386>Canvas is not supported</canvas> <script> var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); ctx.beginPath(); ctx.arc(300, 150, 20, 0, Math.PI*2 ); ctx.fillStyle = #0095DD; ctx.fill(); ctx.closePath(); </script> </body></html> SummarizeThe above is the problem and solution of blurring when using Canvas drawing on a high-definition screen introduced by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. I would also like to thank everyone for your support of the VeVb martial arts website!