Problem with canvas display blur under Retina screen

What's a retina?

The so-called "Retina" is a display technique that compresses more pixels into a single screen to achieve higher resolution and better screen display, taking the MacBook Pro with Retina display as an example, When working, the graphics card renders the image in the size area of 2880x1800 pixels, which is a group of four pixels, outputting one pixel of the original screen. As a result, the user sees icons and text that are the same size as the original 1440x900 resolution display, but the fineness is 4 times times the original, but for special elements such as video and images, a picture pixel corresponds to a screen pixel.

Two problems brought by

In a non-retina screen, use canvas to draw a circle that appears in the browser as follows:

Under the Retina screen, the same code appears as follows:

Problem with canvas display blur under Retina screen