Jak przekonwertować element HTML na canvas lub img?

Mam potrzebę konwertować z poziomu JS zawartość elementu HTML DIV na element CANVAS a konkretnie na obraz/bitmapę 2D.
Na początku spodziewałem się, ze znajdę w MDN funkcję typu element.saveToImage() lub coś podobnego ale po godzinie poszukiwań zacząłem wątpić, że coś takiego istnieje i w końcu zajrzałem na natrętnie wyszukiwaną stronę https://html2canvas.hertzen.com

Niby problem rozwiązałem biblioteka, generalnie w moim przypadku robi co trzeba ale jest strasznie wolna i w sumie nie ma w tym nic dziwnego ta zajmuje ponad 400kB kodu i jest chyba zaimplementowaną w JS "przeglądarką" - zatem tak trochę od d.. strony :-)

Problem na pozór wydawał się być banalny a funkcjonalność oczywista jednak w praktyce wygląda jakby na świecie była do tego tylko ta jedna biblioteka.
Przynajmniej tak piszą tu: https://hackernoon.com/how-to-take-screenshots-in-the-browser-using-javascript-l92k3xq7

Powiedzmy, że na dzień dzisiejszy znalezione rozwiązanie jest OK choć czuję duży niedosyt dlatego pytam...
...bo może ktoś coś gdzieś kiedyś...

jest jeszcze https://github.com/tsayen/dom-to-image - podobno lepszy
z natywnie obsługiwanych jest opcja udostępniania ekranu:

const capture = async () => {
  const canvas = document.createElement("canvas");
  const context = canvas.getContext("2d");
  const video = document.createElement("video");

  try {
    const captureStream = await navigator.mediaDevices.getDisplayMedia();
    video.srcObject = captureStream;
    context.drawImage(video, 0, 0, window.width, window.height);
    const frame = canvas.toDataURL("image/png");
    captureStream.getTracks().forEach(track => track.stop());
    window.location.href = frame;
  } catch (err) {
    console.error("Error: " + err);
  }
};

capture();

z ciekawości - po co to? można po prostu poprosić usera o naciśnięcie alt + print screen, ctrl + v jeśli to do jakiejś pomocy technicznej

obscurity napisał(a):

z ciekawości - po co to? można po prostu poprosić usera o naciśnięcie alt + print screen, ctrl + v jeśli to do jakiejś pomocy technicznej

Wielkie dzięki. Powód taki, że chcę syna zapoznać z podstawami programowania więc zacząłem z nim pisać prostą grę 2D, żeby pokazać o co w tym w ogóle chodzi.
Zacząłem ją pisać na elementach HTML (bo tak czytelniej) aż w pewnym momencie pokazała się potrzeba zrobienia celownika z powiększeniem - no i tu mnie mocno przytkało.
Jak wcześniej pisałem funkcjonalność taka wydawała się oczywista - przynajmniej w znanych mi językach programowania nigdy nie stanowiło problemu zrobienie zrzutu ekranu :-) Teraz wiem, że lepiej było wszystko od początku robić na Canvasie ale już nie chce mi się tego przerabiać.

Gra w budowie: https://ms.xksi.pl/_shooter/ - pewnie i tak nigdy nie będzie ukończona :-)