Hi there, I just created my first notebook. For some reason the thumbnail is appearing as just a black box and for people that I share it notebook with the actual canvas element inside my notebook is also appearing black.
On my machine it seems to work perfectly fine. I’ve tried clearing local storage etc etc.
I’m wondering if anyone knows how the thumbnail is generated so I can maybe change around my notebook to reflect how it works. Or if there are any nuances with the canvas element that I could watch out for.
Sure, the answer here has to do with pixel density. Most likely, you’re developing this notebook on a computer with a 1x display. ‘Retina’ / hdpi computers with a pixel ratio of 2 will automatically get a 2x canvas through DOM.context2d(image.width, image.height), which, in the computations that follow that assume that the const block_data = context.getImageData(x, y, width, height).data; can get a precise pixel, well - those computations fill fail, because width and height will be off by a factor of 2.
The simplest way to get this working for everyone is:
The third argument to context2d (documented in notebook-stdlib) lets you specify an explicit pixel ratio, and setting it to 1 will get you the desired behavior.
Sorry this isn’t quite self-explanatory, we’re still working on the stdlib docs being clearly accessible from the rest of the site, and this DOM.context2d behavior, while super convenient a lot of the time, can be a stumbling block for this type of notebook.
Interestingly enough, I actually am working on a retina display. However, I took your suggestion and set the 3rd argument of DOM.context2d to a value of 1 and it seems to work.
I get what you are saying though, it make sense to specify the pixel density. I thought the runtime was leveraging window.devicePixelRatio under the hood since it appeared clear for me initially.
My laptop specs:
MacBook Pro (Retina, 13-inch, Early 2015)
3.1 GHz Intel Core i7
16 GB 1867 MHz DDR3