It seems like a <canvas> is used for drawing these. That canvas is likely just created with a wrong resolution (i.e. too low). You also have to consider the UI scaling factor when creating the canvas.

I would probably suggest to get rid of the canvas altogether and simply use <div>s for these bars. I don't see why a canvas is required/better here.

Slide marks are implemented with a playback bar plugin. This type of plugin was originally created to draw anything on the playback bar, such as a hot map. This is the reason to use a canvas instead of DOM elements.

In version 2.x of paella, which I have been working on for a little over a year now, I have removed this type of plugins because no one has developed any apart from the slide marks, so I see no need to keep them. In version 2, this feature is integrated in the core and the tags are placed using DOM elements.

To solve this problem without having to upgrade to version 2 (which, by the way, I don't know when it will be released), I have modified the API of this type of plugins to support a scaling factor. The new API is in version 1.50.0 of paella-core, and this very morning I am going to update the slide mark plugin to use it.