Getting cropped image results from canvas elements

[JohnnyRacer]

I am currently trying to obtain a cropped image from a canvas element. I have tried to update the code to work with a canvas instead of the standard img I have seen in examples, but so far its just outputting a blank image for the result. Any help on how to correctly implement this functionality would be much appreciated. Thanks.

CodeSandbox example