#

API Docs for: 1.4.3
Show: Inherited Protected Private Deprecated

# File: src/pixi/renderers/canvas/utils/CanvasTinter.js

    /**
     * @author Mat Groves
     *
     *
     */

    PIXI.CanvasTinter = function()
    {
        /// this.textureCach
    };

    //PIXI.CanvasTinter.cachTint = true;

    PIXI.CanvasTinter.getTintedTexture = function(sprite, color)
    {
        //
        // cache on sprite
        // cache on texture
        // no cache

        var texture = sprite.texture;

        color = PIXI.CanvasTinter.roundColor(color);

        var stringColor = "#" + ("00000" + ( color | 0).toString(16)).substr(-6);

        texture.tintCache = texture.tintCache || {};

        if(texture.tintCache[stringColor]) return texture.tintCache[stringColor];

         // clone texture..
        var canvas = PIXI.CanvasTinter.canvas || document.createElement("canvas");

        //PIXI.CanvasTinter.tintWithPerPixel(texture, stringColor, canvas);

        PIXI.CanvasTinter.tintMethod(texture, color, canvas);

        if(PIXI.CanvasTinter.convertTintToImage)
        {
            // is this better?
            var tintImage = new Image();
            tintImage.src = canvas.toDataURL();

            texture.tintCache[stringColor] = tintImage;
        }
        else
        {

            texture.tintCache[stringColor] = canvas;
            // if we are not converting the texture to an image then we need to lose the reference to the canvas
            PIXI.CanvasTinter.canvas = null;

        }

        return canvas;
    };

    PIXI.CanvasTinter.tintWithMultiply = function(texture, color, canvas)
    {
        var context = canvas.getContext( "2d" );

        var frame = texture.frame;

        canvas.width = frame.width;
        canvas.height = frame.height;

        context.fillStyle = "#" + ("00000" + ( color | 0).toString(16)).substr(-6);

        context.fillRect(0, 0, frame.width, frame.height);

        context.globalCompositeOperation = "multiply";

        context.drawImage(texture.baseTexture.source,
                               frame.x,
                               frame.y,
                               frame.width,
                               frame.height,
                               0,
                               0,
                               frame.width,
                               frame.height);

        context.globalCompositeOperation = "destination-atop";

        context.drawImage(texture.baseTexture.source,
                               frame.x,
                               frame.y,
                               frame.width,
                               frame.height,
                               0,
                               0,
                               frame.width,
                               frame.height);
    };

    PIXI.CanvasTinter.tintWithOverlay = function(texture, color, canvas)
    {
        var context = canvas.getContext( "2d" );

        var frame = texture.frame;

        canvas.width = frame.width;
        canvas.height = frame.height;

        context.globalCompositeOperation = "copy";
        context.fillStyle = "#" + ("00000" + ( color | 0).toString(16)).substr(-6);
        context.fillRect(0, 0, frame.width, frame.height);

        context.globalCompositeOperation = "destination-atop";
        context.drawImage(texture.baseTexture.source,
                               frame.x,
                               frame.y,
                               frame.width,
                               frame.height,
                               0,
                               0,
                               frame.width,
                               frame.height);

        //context.globalCompositeOperation = "copy";

    };

    PIXI.CanvasTinter.tintWithPerPixel = function(texture, color, canvas)
    {
        var context = canvas.getContext( "2d" );

        var frame = texture.frame;

        canvas.width = frame.width;
        canvas.height = frame.height;

        context.globalCompositeOperation = "copy";
        context.drawImage(texture.baseTexture.source,
                               frame.x,
                               frame.y,
                               frame.width,
                               frame.height,
                               0,
                               0,
                               frame.width,
                               frame.height);

        var rgbValues = PIXI.hex2rgb(color);
        var r = rgbValues[0], g = rgbValues[1], b = rgbValues[2];

        var pixelData = context.getImageData(0, 0, frame.width, frame.height);

        var pixels = pixelData.data;

        for (var i = 0; i < pixels.length; i += 4)
        {
            pixels[i+0] *= r;
            pixels[i+1] *= g;
            pixels[i+2] *= b;
        }

        context.putImageData(pixelData, 0, 0);
    };

    PIXI.CanvasTinter.roundColor = function(color)
    {
        var step = PIXI.CanvasTinter.cacheStepsPerColorChannel;

        var rgbValues = PIXI.hex2rgb(color);

        rgbValues[0] = Math.min(255, (rgbValues[0] / step) * step);
        rgbValues[1] = Math.min(255, (rgbValues[1] / step) * step);
        rgbValues[2] = Math.min(255, (rgbValues[2] / step) * step);

        return PIXI.rgb2hex(rgbValues);
    };

    PIXI.CanvasTinter.cacheStepsPerColorChannel = 8;
    PIXI.CanvasTinter.convertTintToImage = false;

    PIXI.CanvasTinter.canUseMultiply = PIXI.canUseNewCanvasBlendModes();

    PIXI.CanvasTinter.tintMethod = PIXI.CanvasTinter.canUseMultiply ? PIXI.CanvasTinter.tintWithMultiply :  PIXI.CanvasTinter.tintWithPerPixel;