Capt. Horatio T.P. Webb
HTML 5 -- CANVAS EXAMPLE RGBA

Parks -- Fall 2013

Methods:
name_for_the_canvas_context.fillStyle(r,g,c,a) r = red color component
g = green color component
b = blue color component
a = alpha transparency/opacity

Here is a canvas for shadows:

<canvas id="rgba_example" width="750" height="600" style="border:solid blue 1px;"></canvas>

HTML 5 Canvas is NOT supported by this browser

Here is the code: 

var rgbax = document.getElementById("rgba_example");
var gc = rgbax.getContext("2d");

opc=0.0;
y=10;
x=10;
gc.lineWidth=1;
for (j=0;j<2;j++)
    {

    for (i=0;i<11;i++)
	  {
	   gc.fillStyle="rgba(200,100,100,"+opc.toString()+")";
	   gc.fillRect(x,y,150,25);
	   gc.rect(x,y,150,25);
	   gc.stroke();
       y=y+50;
	   alph=opc.toFixed(2).toString();
	   if (j==0) gc.strokeText("alpha = "+alph,(x+170),(y-40) );
	   if (j==0) gc.strokeText("Some Text",(x+30),y-30 );
	   opc=opc+0.10;
	  }
	 opc=0.0;
	 x=20;
     y=20;
    }

opc=0.0;
y=10;
x=250;
gc.lineWidth=1;
for (j=0;j<2;j++)
    {
    for (i=0;i<11;i++)
	  {
	   if (j==1)
          gc.fillStyle="rgba(0,0,0,"+opc.toString()+")";
	    else
          gc.fillStyle="rgba(255,255,255,"+opc.toString()+")";
	   gc.fillRect(x,y,150,25);
	   gc.rect(x,y,150,25);
	   gc.stroke();
       y=y+50;
	   alph=opc.toFixed(2).toString();
	   if (j==0) gc.strokeText("alpha = "+alph,(x+180),(y-40) );
	   if (j==0) gc.strokeText("Some Text",(x+30),y-30 );
	   opc=opc+0.10;
	  }
	 opc=0.0;
	 x=270;
     y=20;
    }


opc=0.0;
y=10;
x=500;
gc.lineWidth=1;
for (j=0;j<2;j++)
    {
    for (i=0;i<11;i++)
	  {
	   if (j==1)
          gc.fillStyle="rgba(0,0,200,"+opc.toString()+")";
	    else
          gc.fillStyle="rgba(0,200,0,"+opc.toString()+")";
	   gc.fillRect(x,y,150,25);
	   gc.rect(x,y,150,25);
	   gc.stroke();
       y=y+50;
	   alph=opc.toFixed(2).toString();
	   if (j==0) gc.strokeText("alpha = "+alph,(x+180),(y-40) );
   	   if (j==0) gc.strokeText("Some Text",(x+30),y-30 );
	   opc=opc+0.10;
	  }
	 opc=0.0;
	 x=520;
     y=20;
    }