How to customize point in bubble chart

[hunnyUnicorn]

Hi everyone.
I am trying to customize bubble chart so that every point displays circle with it's own label.
But I noticed when I customized pointStyle function by replacing own canvas, chart.js doesn't place it to the position I want.

For example, when I have a point on (50, 50) and my canvas size is (50, 50), then the point is placed (25, 25)-(75, 75) while I want (50, 50)-(100, 100)

const options = { pointStyle: (context) => { var canvas = document.createElement('canvas'); canvas.height = 50; canvas.width = 100; var ctx = canvas.getContext("2d"); ctx.fillStyle = context.element.options.backgroundColor ctx.font = 'bold 12px' ctx.fillText(context.raw?.name ?? '', 15, 10); ctx.beginPath(); ctx.arc(5, 5, 5, 0, 2 * Math.PI); ctx.rect(0, 0, 100, 50) ctx.fill(); return canvas }, };