[HTML5/JavaScript] - Best JS Script Method To Change Color Hue Of A PNG Image At Runtime?

Hi,

We are working on version 2.0 of out HTML5/JavaScript cross-platform 2-D Web video game engine.
(Code Named: “Mustang GT 5.0 SuperCharged™”)

Does anyone know the best JavaScript script method to change color hue of a PNG image?
(changing image’s red, green, and blue hue)

What we currently use is listed below(but it is very CPU intensive - need something faster):

Let us know here, thanks!

Jesse

Game can be played and the full source code project can be downloaded on below webpage:
https://jesseleepalser.itch.io/t-crisis-v

//--------------------------------------------------------------------------------------------------------------
// "Retro Blast Tech"
function DrawSpriteOntoCanvas(index, x, y, scaleX, scaleY, rotationDegree, alpha, red, green, blue)
{
    if (scaleX === 0 || scaleY === 0)  return;

    let imageToDraw;
    let imageToDrawWidth;
    let imageToDrawHeight;

    if (index < 101 || index > 166)
    {
        imageToDraw = ImageSprites[index];
        imageToDrawWidth = ImageSprites[index].width;
        imageToDrawHeight = ImageSprites[index].height;
    }
    else
    {
        imageToDraw = document.createElement("canvas");
        imageToDraw.width = 39;
        imageToDraw.height = 30;
        imageToDrawWidth = 39;
        imageToDrawHeight = 30;
        imageToDraw = ButtonsWithCharsCanvases[index-100];
    }

    ctx.save();

    ctx.globalAlpha = alpha;

    if (red !== 255 || green !== 255 || blue !== 255)
    {
        let buff = document.createElement("canvas");
        buff.width  = imageToDrawWidth;
        buff.height = imageToDrawHeight;

        if (red !== 255)
        {
            let ctxR  = buff.getContext("2d");
            ctxR.drawImage(imageToDraw, 0, 0);

            ctxR.globalAlpha = (red / 255);
            ctxR.globalCompositeOperation = 'source-atop';
            ctxR.drawImage(ImageSprites[1], 0, 0);

            ctxR.globalAlpha = 1;

            imageToDraw = buff;
        }

        if (green !== 255)
        {
            let ctxG  = buff.getContext("2d");
            ctxG.drawImage(imageToDraw, 0, 0);

            ctxG.globalAlpha = (green / 255);
            ctxG.globalCompositeOperation = 'source-atop';
            ctxG.drawImage(ImageSprites[2], 0, 0);

            ctxG.globalAlpha = 1;

            imageToDraw = buff;
        }

        if (blue !== 255)
        {
            let ctxB  = buff.getContext("2d");
            ctxB.drawImage(imageToDraw, 0, 0);

            ctxB.globalAlpha = (blue / 255);
            ctxB.globalCompositeOperation = 'source-atop';
            ctxB.drawImage(ImageSprites[3], 0, 0);

            ctxB.globalAlpha = 1;

            imageToDraw = buff;
        }

        buff = null;
    }

    ctx.translate(x, y);

    if (rotationDegree !== 0)  ctx.rotate( DegToRad(rotationDegree) );
    
    if (scaleX !== 1 || scaleY !== 1)  ctx.scale(scaleX, scaleY);

    ctx.drawImage( imageToDraw, -(imageToDrawWidth / 2), -(imageToDrawHeight / 2) );

    ctx.globalAlpha = 1;
    ctx.restore();
}
//                                                                                            "Retro Blast Tech"

//--------------------------------------------------------------------------------------------------------------