When looking to create an ImageElement from a CanvasElement’s context, toDataURL is your friend. An example use case of this would be creating screen shots of a canvas after some routine has ended. Another could be taking a screen shot when a playing a game that was developed with context 2d or webgl. toDataURL returns a data: URL containing a representation of the image in the format specified by type (defaults to PNG).

The following example shows the use of canvas 2d for creating a jpeg image and inserting it into the body of a document. If you run this example you might notice the loss of the alpha channel, that would be a good reason to switch to png format when calling toDataURL.