Mouse down on specific positions of an element in WebdriverIO

Question

I would like to move my mouse pointer to a specific position over a canvas relative to its top left (0, 0) coordinates, hold my mouse down, move it to another position on the canvas and release (similar to drag and drop but on a single canvas/same element).

I cant figure out how to do this. I have tried using .performActions() as so:

browser.performActions([{
  ....
  actions: [
    { type: 'pointerMove', origin: canvas, x: canvasOffset.x, y: canvasOffset.y },
    { type: 'pointerDown', button: 0 },
    { type: 'pointerMove', origin: 'pointer', targetOffset.x, targetOffset.y },
    { type: 'pointerUp', button: 0 }
}])

but it seems that using this moves the mouse pointer relative to the center of the canvas instead of its top left corner, so the pointerDown action happens at canvas' center + offsets, instead of canvas top left + offsets

I am on version 6 of webdriverIO so that means using:

 browser.moveToElement('#canvas-selector', canvasOffset.x, canvasOffset.y)

or

canvas.moveTo({xOffset: x, yOffset: y})

doesn't work either as it seems these methods are no longer provided in wdio's api.

Any help on this would be greatly appreciated.