Search code examples
javascriptjqueryhtmlcanvashtml2canvas

Divide canvas to pieces

I'm using html2canvas to generate a screenshot of a url. This screenshot is displayed on the page and I want to be able to break it into pieces when it's clicked.

The output file that I get from html2canvas is a canvas element. How can I "break" it to random pieces? Should I create new canvas element for every piece that I want?

Solution

  • Html2Canvas does not click . It just renders the DOM elements provided to it.So I dont think you can break the rendered canvas into pieces.

    How it works

    The script traverses through the DOM of the page it is loaded on. It gathers information on all the elements there, which it then uses to build a representation of the page. In other words, it does not actually take a screenshot of the page, but builds a representation of it based on the properties it reads from the DOM.

    But one thing you can do is divide your DOM content into parts and the you can use Html2Canvas for every DOM pieces and you get the required result.