Is it normal that svg has smoother edges than using canvas?

[mirabledictu]

I have this sample output from SVG rendering

It looks really good, smooth, but when I tried Canvas instead:

Same implementation but instead passing the path to 2d constructor:

const pathData = getSvgPathFromStroke(getStroke(point, options))
const myPath = new Path2D(pathData)
ctx.fill(myPath)

It's using default options btw

[steveruizok]

Hey, my guess from that screenshot is that the canvas is at a lower dpi than your screen. Google around for “hi dpi html canvas” and you should be able to solve the issue.

[mirabledictu]

After some research I ended up with this:

const canvas = this.getCanvasElement()
const rect = canvas.getBoundingClientRect()
const dpr =  window.devicePixelRatio || 1

canvas.width = rect.width * dpr
canvas.height = rect.height * dpr
const ctx = canvas.getContext('2d')
ctx?.scale(dpr, dpr)

canvas.style.width = rect.width + 'px'
canvas.style.height = rect.height + 'px'

Tho the edges are still a bit rough, but changing the dpr to 2 made it look like this

Weird that window.devicePixelRatio gives 1 but 2 looks better...

[mirabledictu]

Also I make it perfect looking like svg by doing ctx?.clearRect(0,0,canvas.width,canvas.height)

[steveruizok]

Looks good! If you'd like to adapt the new example project to canvas rendering, I'd be happy to add it to the README. Otherwise I'll add it to my own todo list.