Any way to get DOM in framework like Observable HQ?

[DevinBayly]

Hi there,

I was recently working on a force collide framework page and the example I was following made its canvas using DOM.context2d(width, height) and I was wondering what the most idiomatic method for this would be in framework?

I ended up with making the canvas in html below and resizing it to be the width and height that I wanted, but it felt like there might be a more seamless way to translate from the observablehq example.

[mbostock]

See the note here: https://observablehq.com/framework/convert#standard-library

For convenience, we’ve linked to the implementations above so that you can see how they work, and if desired, copy the code into your own Framework app as vanilla JavaScript. For example, for a 2D canvas, you can replace DOM.context2d with:

function context2d(width, height, dpi = devicePixelRatio) {
  const canvas = document.createElement("canvas");
  canvas.width = width * dpi;
  canvas.height = height * dpi;
  canvas.style = `width: ${width}px;`;
  const context = canvas.getContext("2d");
  context.scale(dpi, dpi);
  return context;
}

[DevinBayly]

Great this totally works for me. Thanks @mbostock !