Creating a semi-transparent canvas

Mar 5, 2010 at 5:42 PM

Hi. This is a fantastic plugin for jQuery. It even supports IE6. One issue I'm having: I can't get the transparency to work in any browser. Here's the JavaScript:

 

$(document).ready(function()
{
//$(".Test").backgroundCanvas();
$(".Test").backgroundCanvas();
$(".Test").makeElementTransparent("#ffaaff");
});

function DrawBackground() {
$(".Test").backgroundCanvasPaint(TestBackgroundPaintFkt);
}
// Draw the background on load and resize
$(window).load(function () { DrawBackground(); });
$(window).resize(function() { DrawBackground(); });

function TestBackgroundPaintFkt(context, width, height, elementInfo)
{
var options = {x:0, height: height, width: width,
radius:7, border: 0 };
// Draw the red border rectangle
context.fillStyle = "#CECFC6";
$.canvasPaint.roundedRect(context,options);
// Draw the gradient filled inner rectangle
var backgroundGradient = context.createLinearGradient(0, 0,
0, height - 10);
backgroundGradient.addColorStop(0 ,'#F7F7EF');
backgroundGradient.addColorStop(1, '#CECFCE');
options.border = 1;
context.fillStyle = backgroundGradient;
$.canvasPaint.roundedRect(context,options);
}

 

Here's the element:

 

<div class="Test">
something here
</div>

 

Here's the CSS for it:

.Test {
  width: 300px;
  height: 300px;
}

How do you create a semi-transparent canvas? Can you control the opacity level? Thank you.