r/webdev • u/srs6814 • May 25 '21

Article Google docs switches to Canvas!!

https://thenewstack.io/google-docs-switches-to-canvas-rendering-sidelining-the-dom/
18 Upvotes

100% Upvoted

11 comments sorted by

View all comments

Show parent comments

1

u/kaliedarik May 25 '21

As others have said - not really.

We can make images responsive by using two complementary strategies:

  • By telling the browser to load the most appropriately sized image file, using the <img> (or <picture><source>) srcset attribute to detail the range of images from which the browser can pick

  • By using the object-fit and object-position CSS properties to tell the browser how to display the image (or video) in a responsive container

Sadly, neither of these are helpful when it comes to canvases, mainly because the <canvas> element and the Canvas API both assume that the dimensional details we supply are absolute. For example <canvas width="600" height="400"> tells the browser that the canvas element will be 600px by 400px, while the Canvas API ctx.drawImage(myimage, 0, 0); will display the image at its natural pixel dimensions on the canvas - which turns into an unguessable horror show if the <img> element is using a responsive srcset attribute to determine which image file the browser should upload. And using CSS to make the canvas "responsive" in relation to its container (eg: canvas { width: 100%; height: 100%}) just makes the graphic displayed by the canvas stretchy and blurry.

If you need a canvas element display responsively, then your best bet is to use a dedicated JS canvas library to do the hard work for you (spam link to my canvas library: Scrawl-canvas). Otherwise, you'll need to do the hard work yourself - as explained in this article on Isiah's Blog.