I’m quite aware that CSS styles are preferably used with DEV elements, but I wanted to use roundrects in html table. Unfortunately the result is wrong, the roundrect is positionned in absolute coordinates 0,0, both in firefox and safari on mac. You can see my test page and the corresponding screen dumps here :

http://membres.lycos.fr/jfbouzereau/gradient.html

Thanks in advance for any ideas …

Cheers.

altering the createCanvasGradient function as follows will allow you to pass a ‘direction’ parm via the enhanced style.
possible values are:: ‘horizontal’, ‘vertical’, ‘diagonal-down’, ‘diagonal-up’

OSGradient.prototype.createCanvasGradient = function(e, width, height) {

var canvas = document.createElement(‘canvas’);
var ctx;
// Return null if canvas isn’t supported. The caller will
// fall back on divs.
try {ctx = canvas.getContext(‘2d’)} catch (e) {return null}

// Safari requires the following prior to rendering
e.appendChild(canvas);
if (navigator.appVersion.match(/Konqueror|Safari|KHTML/))
canvas.style.position = ‘fixed’;

canvas.setAttribute(‘width’, width);
canvas.setAttribute(‘height’, height);

var style = this.style;

var c0 = style[‘gradient-start-color’];
var c1 = style[‘gradient-end-color’];
var r = style[‘border-radius’];
var direction = style[‘direction’];

ctx.beginPath();
ctx.moveTo(0,r);
//arcTo() produces NS_ERROR_NOT_IMPLEMENT in Firefox 1.5; use arc() instead:
//ctx.arcTo(0,0,r,0,r);
ctx.arc(r,r,r,Math.PI,-Math.PI/2,false);
ctx.lineTo(width-r,0);
//ctx.arcTo(width,0,width,r,r);
ctx.arc(width-r,r,r,-Math.PI/2,0,false);
ctx.lineTo(width,height-r);
//ctx.arcTo(width,height,width-r,height,r);
ctx.arc(width-r,height-r,r,0,Math.PI/2,false);
ctx.lineTo(r,height);
//ctx.arcTo(0,height,0,height-r,r);
ctx.arc(r,height-r,r,Math.PI/2,Math.PI,false);
ctx.clip();

switch (direction){
case “vertical”:
var g = ctx.fillStyle = ctx.createLinearGradient(0,0,0,height);
break;
case “horizontal”:
var g = ctx.fillStyle = ctx.createLinearGradient(0,0,width,0);
break;
case “diagonal-down”:
var g = ctx.fillStyle = ctx.createLinearGradient(0,0,width,height);
break;
case “diagonal-up”:
var g = ctx.fillStyle = ctx.createLinearGradient(0,height,width,0);
break;
default: //maintain backwards compatibility with code not passing direction parm
var g = ctx.fillStyle = ctx.createLinearGradient(0,0,0,height);
break;

}

g.addColorStop(0, OSUtils.color.long2css(c0));
g.addColorStop(1, OSUtils.color.long2css(c1));
ctx.rect(0,0,width,height);
ctx.fill();

return canvas;
};

Cheers

thanks
aqeel ahmed