Question: I'm trying to draw text to a canvas with a certain alpha level and clip the text and draw a background color with it's own alpha level:

```
ctx.globalCompositeOperation = '...';
    ctx.fillStyle = 'rgba(' + fgcolor.r + ', ' +  fgcolor.g + ', ' + fgcolor.b + ',' + (fgcolor.a / 255.0) + ')';
       ctx.fillText(String.fromCharCode(chr), x,y);
ctx.globalCompositeOperation = '...';
    ctx.fillStyle = 'rgba(' + bgcolor.r + ', ' +  bgcolor.g + ', ' + bgcolor.b + ',' + (bgcolor.a / 255.0) + ')';
    ctx.fillRect(x, y, chr_width, chr_height);

```

I've tried playing with globalCompositeOperation and beginPath but I have been unable to achieve the desired result. I would also like to avoid drawImage and off screen canvases as speed is a major concern.

Answer: 
This function will convert RGBA colors to RGB:

```
function RGBAtoRGB(r, g, b, a, backgroundR,backgroundG,backgroundB){
  var r3 = Math.round(((1 - a) * backgroundR) + (a * r))
  var g3 = Math.round(((1 - a) * backgroundG) + (a * g))
  var b3 = Math.round(((1 - a) * backgroundB) + (a * b))
  return "rgb("+r3+","+g3+","+b3+")";
}  

```

1. Convert the background RGBA to RGB and fill the background with RGB.
2. Convert the foreground RGBA to RGB and fill the foreground text with RGB.
This is exactly what I'm trying to do:

```
                  ctx.clearRect(x, y, chr_width, chr_height);
                 ctx.save();
            ctx.beginPath();
            ctx.rect(x, y, chr_width, chr_height);
            ctx.clip();     

            if (fgcolor.a != 255) {
                ctx.fillStyle = 'rgba(' + fgcolor.r + ', ' +  fgcolor.g + ', ' + fgcolor.b + ',' + (fgcolor.a / 255.0) + ')';

                ctx.fillText(String.fromCharCode(chr), x,y);

                var imgData=ctx.getImageData(x,y,chr_width,chr_height);
                for (var idx = 0; idx < imgData.data.length; idx+=4) {
                    if (! imgData.data[idx+3]) {
                        imgData.data[idx] = bgcolor.r;
                        imgData.data[idx+1] = bgcolor.g;
                        imgData.data[idx+2] = bgcolor.b;
                        imgData.data[idx+3] = bgcolor.a;
                    }
                }

                ctx.putImageData(imgData,x,y);
            }
            else {
                ctx.fillStyle = 'rgba(' + bgcolor.r + ', ' +  bgcolor.g + ', ' + bgcolor.b + ',' + (bgcolor.a / 255.0) + ')';   
                ctx.fillRect(x, y, chr_width, chr_height);
                ctx.fillStyle = 'rgba(' + fgcolor.r + ', ' +  fgcolor.g + ', ' + fgcolor.b + ',' + (fgcolor.a / 255.0) + ')';
                ctx.fillText(String.fromCharCode(chr), x,y);

            }

            ctx.globalAlpha = 1.0;

            ctx.globalCompositeOperation = 'source-over';

            ctx.restore();

```

Are there any speedier ways of accomplishing this avoiding accessing the data directly? Thanks.