javascript - How to eliminate jagged edges of canvas

Question

Such as the title: I made a canvas graphic and the edges were jagged

I found one: Bicubic Interpolation interpolation algorithm, but I can’t understand it, please give me some advice
Orz!!

Answer 1

You can try doubling the canvas resolution first and take a look.
Assume the display size is w * h:

1. Set the width and height of canvas to 2w and 2h

2. Set the width and height in the canvas style to w and h

Answer 2

I looked at some better plug-ins, such as echarts (Baidu Charts), but I couldn’t read more than 10,000 lines of code. Finally, I found a solution
https://www.zhihu.com/questio...
let width = canvas.width,height=canvas.height;
if (window.devicePixelRatio) {

            canvas.style.width = width + "px";
            canvas.style.height = height + "px";
            canvas.height = height * window.devicePixelRatio;
            canvas.width = width * window.devicePixelRatio;
            ctx.scale(window.devicePixelRatio, window.devicePixelRatio);

}
I would like to share this with children’s shoes who encounter the same problem