🟧 HOWTO: 4. "Fancy" Crop a Canvas Background Image

[TIMAI2]

This howto demonstrates how a developer can apply "fancy" crops with transparent background to images loaded to a canvas background, without use of extensions.

Fancy Crop a Canvas Background Image

To get a full understanding of how this all works, it is recommended to review the 3 previous howtos in this series:

HOWTO: 1. Set Canvas to Image Dimensions without Extension

[canvassize1] Here a method to get the dimensions / aspect ratio of an image for display in a canvas, without the use of extensions. The same method should also work with image components, buttons and vertical/horizontal arrangements. Set Canvas to Image Dimensions without Extension

HOWTO: 2. Canvas Convert Background Image to Foreground Image

This howto shows how you can convert your canvas background image to the same image made up of pixels "drawn" on the canvas. Canvas Image to Foreground [canvasfg1]

HOWTO: 3. Crop a Canvas Background Image to a Square Image

This is not normal image cropping, this is canvas background image cropping, achieved, without extensions, by pixelising the background to the foreground, resetting the canvas size to square, then drawing out the square image in pixels. [imgCropBG2Sqr1] Crop a Canvas Background Image to Square Image