preDraw(renderer) {
		const ax = this.width * this.anchorPoint.x;
		const ay = this.height * this.anchorPoint.y;

		// save renderer context
		renderer.save();

		// apply the defined alpha value
		renderer.setGlobalAlpha(renderer.globalAlpha() * this.getOpacity());

		// apply flip
		if (this._flip.x || this._flip.y) {
			const dx = this._flip.x ? this.centerX - ax : 0;
			const dy = this._flip.y ? this.centerY - ay : 0;

			renderer.translate(dx, dy);
			renderer.scale(this._flip.x ? -1 : 1, this._flip.y ? -1 : 1);
			renderer.translate(-dx, -dy);
		}

		// apply stencil mask if defined
		if (typeof this.mask !== "undefined") {
			renderer.translate(this.pos.x, this.pos.y);
			renderer.setMask(this.mask);
			renderer.translate(-this.pos.x, -this.pos.y);
		}

		// use this renderable shader if defined
		if (typeof this.shader === "object" && typeof renderer.gl !== "undefined") {
			renderer.customShader = this.shader;
		}

		if (this.autoTransform === true && !this.currentTransform.isIdentity()) {
			// apply the renderable transformation matrix
			renderer.translate(this.pos.x, this.pos.y);
			renderer.transform(this.currentTransform);
			renderer.translate(-this.pos.x, -this.pos.y);
		}

		// offset by the anchor point
		renderer.translate(-ax, -ay);

		// apply the current tint and opacity
		renderer.setTint(this.tint, this.getOpacity());

		// apply blending if different from "normal"
		if (this.blendMode !== renderer.getBlendMode()) {
			renderer.setBlendMode(this.blendMode);
		}
	}
Prepare the rendering context before drawing (automatically called by melonJS).
This will apply any defined transforms, anchor point, tint or blend mode and translate the context accordingly to this renderable position.
@see Renderable#draw
@see Renderable#postDraw
@param {CanvasRenderer|WebGLRenderer} renderer - a renderer object