DWQA QuestionsCategory: ProgramHow to eliminate the edge aliasing of canvas
undefind_5 asked 5 months ago

Such as Title: I made a canvas figure and saw the edge
How to eliminate the edge aliasing of canvas
I found an interpolation algorithm of bicubic interpolation, but I can’t understand it. Please give me some advice

ewind replied 5 months ago

Your drawing is not based onctx.arcAre these standard APIs drawn manually?

2 Answers
Foreign Jack answered 5 months ago

You can try to double the resolution of canvas first.
Suppose the display size is w * H:

  1. Set the width and height of canvas to 2W and 2h
  2. Set width and height in canvas’s style to W and H
undefind_5 answered 5 months ago

I read some good plug-ins, such as echarts (Baidu chart), but I couldn’t read more than 10000 lines of code. Finally, I found a solution
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 with the same problems

ewind replied 5 months ago

You can refer to the map library sinomap that I implemented in 500 linesThe resolution processing logic ishttps://github.com/doodlewind…as well ashttps://github.com/doodlewind