draw(renderer, viewport) {
		let isFloating = false;
		const bounds = this.getBounds();

		this.drawCount = 0;

		// clip the containter children to the container bounds
		if (
			this.root === false &&
			this.clipping === true &&
			bounds.isFinite() === true
		) {
			renderer.clipRect(bounds.left, bounds.top, bounds.width, bounds.height);
		}

		// adjust position if required (e.g. canvas/window centering)
		renderer.translate(this.pos.x, this.pos.y);

		// color background if defined
		if (this.backgroundColor.alpha > 1 / 255) {
			renderer.clearColor(this.backgroundColor);
		}

		const children = this.getChildren();
		for (let i = children.length, obj; i--, (obj = children[i]); ) {
			if (obj.isRenderable) {
				isFloating = obj.floating === true;

				if (obj.inViewport || isFloating) {
					if (isFloating) {
						// translate to screen coordinates
						renderer.save();
						renderer.resetTransform();
					}

					// predraw (apply transforms)
					obj.preDraw(renderer);

					// draw the object
					obj.draw(renderer, viewport);

					// postdraw (clean-up);
					obj.postDraw(renderer);

					// restore the previous "state"
					if (isFloating) {
						renderer.restore();
					}

					this.drawCount++;
				}
			}
		}
	}
draw this renderable (automatically called by melonJS)
@param {CanvasRenderer|WebGLRenderer} renderer - a renderer instance
@param {Camera2d} [viewport] - the viewport to (re)draw