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...

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

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.