JavaScript Gradient Roundrects
JavaScript Gradient Roundrects adds gradient roundrects to an HTML page, without images. It uses the WHATWG canvas tag if it’s available. Otherwise it uses a stack of divs, whose heights are adaptively chosen according to the height of the graded element, the color components, and the radius curvature. There’s a demo here.
I also wrote a JavaScript CSS parser that lets you attach gradients to an element without writing code. You do this by including CSS inside a div tag whose class is ‘style’. View the source of the demo page for an example.
August 15th, 2006 at 3:58 am
hi love your code and stuff but is it possible t print the gradient horizontally left to right…..very much appreciated your code and effort u put in it…..
thanks
aqeel ahmed
April 13th, 2007 at 6:36 pm
I just ran across your gradient and rounded corners implementation and it looks really good. To be honest, I have not looked through the JavaScript intently yet, but I am wondering if there is not a fairly easy way to make the gradient a horizontal gradient as opposed to the current vertical gradient?
September 11th, 2007 at 7:47 pm
useful tool thanks.
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
November 19th, 2007 at 9:13 am
Hello,
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.
January 8th, 2008 at 8:49 am
is there way where i can add border
April 2nd, 2008 at 5:54 pm
You should make a search on google i think there is a solution.
May 7th, 2008 at 7:29 pm
Great info, thanks for the demo!