magenta.js Visualizer() renders blurry notes

user_8887068 0
Viewed 157

I've noticed that whenever I use magenta.js's built in Visualizer method, it renders ever so slightly blurry (perhaps an anti-aliasing issue?) notes. I've attached an image:

blurry edges

I can see this with varying intensities across many of the documentation's examples as well, such as https://piano-scribe.glitch.me/. Is there a way I can get sharp edges or at the least minimize the blurriness? I'm not sure whether this issue has been addressed or is suitable in the magenta github, so I'm posting here.

Edit: with image-rendering: pixelated on the canvas element, zoomed in. blurry edges

magenta tensorflow.js css
1 Answers

This is a bug (if you call it that) with magenta-js's visualizer. Taking a look at the redraw method in their source reveals that the x position and w(idth) of each note are determined with the following lines.

const x = (this.getNoteStartTime(note) * this.config.pixelsPerTimeStep) +
    offset;
const w = (this.getNoteEndTime(note) - this.getNoteStartTime(note)) *
    this.config.pixelsPerTimeStep;

Now, when drawing on a canvas, if you don't draw at an integer, the browser will interpolate and try to draw a close representation, resulting in the miscolored pixels you noticed.

All that's left to do is confirm that x and/or w are not integers. I loaded the demo page, opened the relevant js file in the sources tab, searched for this line and put a breakpoint.

breakpoint when debugging

Sure enough. x = 13.8 and w = 15.35999. I've submitted magenta-js#238 with a fix.

user_71865980
Related