Mockup Generator in HTML5 with Matrix3D Transforms

Last updated on August 24, 2016 in Development

free mockup generator

A while ago, I played around with a cool Perspective Transformation using SVG and matrix3d CSS transform. It made sense to turn it into a mockup generator like Magic Mockups or PLaceIt. But, I ran into some issues when overlaying an SVG with matrix3d transforms on HTML5 canvas. I found an JSfiddle example of just using HTML5 CANVAS and transformed it into a full mockup generator.

You start by selecting a stage image. It could be a laptop screen, an phone, a poster, or maybe even a t-shirt. Then, you select an image you want to place or overlay on top of the background image. That image comes with 4 controls in each corner of the image that allows you to transform its positioning and perspective.

The matrix3d perspective is a big difference from a regular image on top of another image overlay that I have done in this image editor. You can drag the four green circles around until you place the mockup in the desired location. Finally, you press prepare to remove the controls and now the canvas can be saved with a right mouse click as the final image mockup.

Check out the HTML5 Image Mockup Generator