Creating a semi-transparent canvas

Mar 5, 2010 at 4: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:



function DrawBackground() {
// 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";
// 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;


Here's the element:


<div class="Test">
something here


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.