I recently used HTML Canvas for the first time ever (in or out of Observable), and wound up finding DOM.context2d really hard to work with.
I guess I’m hoping someone could help me understand what is going on under the hood.
I initially used DOM.canvas2d(myWidth + margin.left + margin.right, myHeight + margin.top + margin.bottom) to make the canvas.
I then made content using ctx.createImageData(myWidth, myHeight) and attached it with ctx.putImageData(img, margin.left, margin.top). When I inspected the img (data), it was the right number of values for a rectangle of size myWidth x myHeight. I wanted to maintain bottom and right margins as well, but using DOM.canvas2d, the img was stretched to take up those areas. I also noticed the the style on the specified a width but not a height? (Though had both width and height attributes that I had specified)
When I switched to just using DOM.canvas(myWidth + margins, myHeight + margins), and then set the context as 2d using JS, everything worked as expected.
Is this the expected behavior of DOM.context2d? Maybe this could be made more clear in the documentation?