Gist for describing problem with several image

BaseComponent.hx

package ui.components;

import ui.CursorStyle;
import kha.input.Mouse;
import kha.Framebuffer;
import kha.graphics2.Graphics;
import ui.geom.Rectangle;
import ui.geom.Point;
import kha.Color;

class BaseComponent {

	public var cursorStyle: String;

	public var children: List<BaseComponent>;

	public var width(get, set): Int;

	public var height(get, set): Int;

	private var rect(get, null): Rectangle;

	public var color: Color;

	public var visible : Bool = true;

	public function new (x: Int, y: Int, width: Int, height: Int, ?color: Color, ?cursorStyle: String) {
		rect = new Rectangle(new Point(x,y), width, height);

		this.color = (color != null) ? color : Color.Black;
		this.cursorStyle = (cursorStyle != null) ? cursorStyle : CursorStyle.DEFAULT;
	}

	public function get_width(): Int {
		return rect.width;
	}

	private function set_width(value : Int): Int {
		rect.width = value;
		return rect.width;
	}

	public function get_height(): Int {
		return rect.height;
	}

	private function set_height(value : Int): Int {
		rect.height = value;
		return rect.height;
	}

	public function get_rect(): Rectangle {
		return rect;
	}

	public function render(g: Graphics): Void {
		g.color = this.color;

		g.fillRect(
			rect.origin.x,
			rect.origin.y,
			rect.width,
			rect.height);
	}

	public function onHovered(mousePosition: Point): Void {
		trace("I am onHovered");
		trace(mousePosition);
		this.color = Color.Orange;
	}

}

Manager.hx

package ui;

import kha.input.Mouse;
import ui.geom.Rectangle;
import ui.geom.Point;
import ui.components.BaseComponent;
import kha.Color;
import kha.Image;
import kha.graphics2.Graphics;

class Manager {

	public var layers: Array<List<BaseComponent>>;
	public var layersIndex: Array<Int>;
    public var baseColor: Color;
    private var backbuffer: Image;

	public function new(w: Int, h: Int, ?color: Color) {

        backbuffer = Image.createRenderTarget(w,h);

        // Init the base color
        baseColor = (color != null) ? color : Color.White;

        // Initialise the layers informations
		layers = [];
		layersIndex = [];
	}

	/**
	 * Register the Mouse to listeners
	 */
	public function initInputs() {
		if (Mouse.get() != null) Mouse.get().notify(mouseDown, mouseUp, mouseMove, mouseWheel);
	}

	/**
	 * Add the component to the specified layer index
	 * @param component Component to add
	 * @param layer The layer index
	 * @return The instance of the manager to allow chaining methods
	 */
	public function addComponent(component: BaseComponent, layer: Int = 1) : Manager {

		if (layersIndex.indexOf(layer) != -1) {
			layers[layer].add(component);
		} else {
			layersIndex.push(layer);
			layers[layer] = new List<BaseComponent>();
			layers[layer].add(component);
			layersIndex.sort(sortAscIndexes);
		}

		return this;
	}

	/**
	 * A method able to the sort ASC integer
	 * @param a First number to compare
	 * @param b Second number to compare
	 * @return The result of the computation.
	 * 1 : If a > b
	 * -1 : If a < b
	 * 0 : Otherwise
	 */
	private function sortAscIndexes(a: Int, b: Int): Int {
		if (a == b)
        	return 0;
	    if (a > b)
	        return 1;
	    else
	        return -1;
	}

	private function sortDescIndexes(a: Int, b: Int): Int {
		if (a == b)
        	return 0;
	    if (a > b)
	        return -1;
	    else
	        return 1;
	}

	/**
	 * Render each component ordered by the layer indexes
	 * @param g Graphics to draw with
	 */
	public function render(refGraphics: Graphics) {

        var g: Graphics = backbuffer.g2;
        
        // Here if I set it to g.begin() it's will not rendez the red rect draw by Sample backbuffer
        g.begin(false); // I have to it to false here. Is it normal ?
		for(index in layersIndex) {
			for(component in layers[index]) {
				component.render(g);
			}
		}
        g.end();

        refGraphics.begin(false);
        refGraphics.color = Color.White;
        refGraphics.drawImage(backbuffer, 0, 0);
        refGraphics.end();
	}

	private function mouseDown(button: Int, x: Int, y: Int): Void {
		trace('down');
	}

	private function mouseUp(button: Int, x: Int, y: Int): Void {
		trace('up');
	}

	private function mouseMove(x: Int, y: Int, movementX: Int, movementY: Int): Void {
		var mousePosition: Point = new Point(x, y);
		var shouldBreak: Bool = false;
		var localLayersIndex : Array<Int> = layersIndex.concat([]); // Force a copy of the array
		localLayersIndex.sort(sortDescIndexes); // Reverse the order of the table
		// We reversed the array indexes as we want to stop the hover event on the
		// top most component and let it handle the propagation of the event
		for(index in localLayersIndex) {
			for(component in layers[index]) {
				if (component.get_rect().contains(mousePosition)) {
					component.onHovered(mousePosition.translate(-component.get_rect().origin.x, -component.get_rect().origin.y));
					shouldBreak = true;
					break;
				}
			}
			if (shouldBreak)
				break;
		}
	}

	private function mouseWheel(delta: Int): Void {
		trace('Wheel');
	}

}

Samples.hx

package;
import kha.Framebuffer;
import ui.Manager;
import kha.graphics2.Graphics;
import kha.Color;
import kha.Scaler;
import kha.Image;
import kha.System;

class Sample {


	public var backbuffer: Image;
	public var manager: Manager;

	public function new() {

		backbuffer = Image.createRenderTarget(800, 600);
        // Init manager
		manager = new Manager(800, 600);
		manager.initInputs();


		manager.addComponent(new ui.components.BaseComponent(50, 50, 200, 200, Color.Cyan), 1);
		manager.addComponent(new ui.components.BaseComponent(100, 100, 200, 200, Color.Magenta), 3);
		manager.addComponent(new ui.components.BaseComponent(0, 0, 200, 200, Color.Black), -2);
	}

    /**
     * Called each frame to render them
     * @param framebuffer The framebuffer to draw on
     */
	public function render(framebuffer: Framebuffer): Void {
		var g: Graphics = backbuffer.g2;

		g.begin();
            // Draw your stuff here
            g.color = Color.Red;
            g.fillRect(200, 200, 300, 300);
        g.end();

        // Call manger render method to draw your ui
		manager.render(g);


        // Apply the new backbuffer state to the framebuffer
        // It's actually show the frame to the user
		framebuffer.g2.begin();
            Scaler.scale(backbuffer, framebuffer, System.screenRotation);
		framebuffer.g2.end();
	}

	public function update(): Void {

	}
}