Gradient

Class to create linear, radial, conic and elliptic gradients and image patterns as bitmaps without canvas

version 1.2.4 (16 kB minified)

API:

// create gradientsconstgrad=Gradient.createLinearGradient(x1,y1,x2,y2);constgrad=Gradient.createRadialGradient(x1,y1,r1,x2,y2,r2);constgrad=Gradient.createConicGradient(angle,cx,cy);constgrad=Gradient.createEllipticGradient(cx,cy,rx,ry,angle);// methodsgrad.addColorStop(offset,color);grad.transform.scale(sx,sy);grad.transform.rotate(angle);grad.transform.translate(tx,ty);grad.transform.reflectX();grad.transform.reflectY();grad.transform.skewX(s);grad.transform.skewY(s);grad.transform.transform(a,b,c,d,e,f);grad.transform.reset();grad.transform.save();grad.transform.restore();grad.getColorAt(x,y);grad.getBitmap(width,height);// create patternsconstpat=Gradient.createPattern(imageData,repetition='repeat');// methodspat.transform.scale(sx,sy);pat.transform.rotate(angle);pat.transform.translate(tx,ty);pat.transform.reflectX();pat.transform.reflectY();pat.transform.skewX(s);pat.transform.skewY(s);pat.transform.transform(a,b,c,d,e,f);pat.transform.reset();pat.transform.save();pat.transform.restore();pat.getColorAt(x,y);pat.getBitmap(width,height);

Example:

constw=200,h=200;constMatrix=Gradient.Matrix;functionaddColorStops(gradient){constcolors=['red','yellow','green','blue'];conststops=[0.0,0.33,0.66,1.0];stops.forEach((s,i)=>{gradient.addColorStop(s,colors[i]);});returngradient;}functionfill_transformed_rect(ctx,x,y,w,h){constm=ctx.getTransform();constm2=(newMatrix(m.a,m.c,m.e,m.b,m.d,m.f)).inv();constp1=m2.transform(x,y),p2=m2.transform(x+w,y),p3=m2.transform(x+w,y+h),p4=m2.transform(x,y+h);ctx.beginPath();ctx.moveTo(p1.x,p1.y);ctx.lineTo(p2.x,p2.y);ctx.lineTo(p3.x,p3.y);ctx.lineTo(p4.x,p4.y);ctx.closePath();ctx.fill();}functiondrawLinearGradient(x1,y1,x2,y2){constcanvas1=document.getElementById('linear1');constcanvas2=document.getElementById('linear2');constctx1=canvas1.getContext("2d");constctx2=canvas2.getContext("2d");constgradient1=ctx1.createLinearGradient(x1,y1,x2,y2);constgradient2=Gradient.createLinearGradient(x1,y1,x2,y2);addColorStops(gradient1);addColorStops(gradient2);ctx1.fillStyle=gradient1;ctx1.fillRect(0,0,w,h);constimData=ctx2.createImageData(w,h);imData.data.set(gradient2.getBitmap(w,h));ctx2.putImageData(imData,0,0);}functiondrawRadialGradient(x1,y1,r1,x2,y2,r2){constcanvas1=document.getElementById('radial1');constcanvas2=document.getElementById('radial2');constctx1=canvas1.getContext("2d");constctx2=canvas2.getContext("2d");constgradient1=ctx1.createRadialGradient(x1,y1,r1,x2,y2,r2);constgradient2=Gradient.createRadialGradient(x1,y1,r1,x2,y2,r2);addColorStops(gradient1);addColorStops(gradient2);ctx1.fillStyle=gradient1;ctx1.fillRect(0,0,w,h);constimData=ctx2.createImageData(w,h);imData.data.set(gradient2.getBitmap(w,h));ctx2.putImageData(imData,0,0);}functiondrawEllipticGradient(cx,cy,rx,ry,angle){constcanvas1=document.getElementById('elliptic1');constcanvas2=document.getElementById('elliptic2');constcanvas3=document.getElementById('elliptic3');constcanvas4=document.getElementById('elliptic4');constctx1=canvas1.getContext("2d");constctx2=canvas2.getContext("2d");constctx3=canvas3.getContext("2d");constctx4=canvas4.getContext("2d");constr=Math.max(rx,ry),sx=rx/r,sy=ry/r;constgradient1=ctx1.createRadialGradient(cx/sx,cy/sy,0,cx/sx,cy/sy,r);constgradient2=Gradient.createRadialGradient(cx/sx,cy/sy,0,cx/sx,cy/sy,r);constgradient3=ctx3.createRadialGradient(cx,cy,0,cx,cy,r);constgradient4=Gradient.createEllipticGradient(cx,cy,rx,ry,angle);addColorStops(gradient1);addColorStops(gradient2);addColorStops(gradient3);addColorStops(gradient4);// transform radial gradient1 to become an unrotated ellipticctx1.scale(sx,sy);ctx1.fillStyle=gradient1;fill_transformed_rect(ctx1,0,0,w,h);// create a pattern from the gradient, just for funconstpattern2=Gradient.createPattern({data: gradient2.getBitmap(w/sx,h/sy),width: Math.round(w/sx),height: Math.round(h/sy)},'no-repeat');// gradient2/pattern2 is a transformed radial gradient//pattern2.transform.translate(-cx, -cy);pattern2.transform.scale(sx,sy);//pattern2.transform.rotate(-angle);//pattern2.transform.translate(cx, cy);constimData2=ctx2.createImageData(w,h);imData2.data.set(pattern2.getBitmap(w,h));ctx2.putImageData(imData2,0,0);// transform radial gradient3 to become a rotated ellipticctx3.translate(cx,cy);ctx3.rotate(-angle);ctx3.translate(-cx*sx,-cy*sy);ctx3.scale(sx,sy);ctx3.fillStyle=gradient3;fill_transformed_rect(ctx3,0,0,w,h);// gradient4 is elliptic gradientconstimData4=ctx4.createImageData(w,h);imData4.data.set(gradient4.getBitmap(w,h));ctx4.putImageData(imData4,0,0);}functiondrawConicGradient(angle,cx,cy){constcanvas1=document.getElementById('conic1');constcanvas2=document.getElementById('conic2');constctx1=canvas1.getContext("2d");constctx2=canvas2.getContext("2d");constgradient1=ctx1.createConicGradient(angle,cx,cy);constgradient2=Gradient.createConicGradient(angle,cx,cy);addColorStops(gradient1);addColorStops(gradient2);ctx1.fillStyle=gradient1;ctx1.fillRect(0,0,w,h);constimData=ctx2.createImageData(w,h);imData.data.set(gradient2.getBitmap(w,h));ctx2.putImageData(imData,0,0);}drawLinearGradient(20,20,w-20,h-20);drawRadialGradient(100,100,10,160,120,80);drawEllipticGradient(100,100,100,40,Math.PI/4);drawConicGradient(Math.PI/4,60,80);

see also:

• CanvasLite an html canvas implementation in pure JavaScript
• Rasterizer stroke and fill lines, rectangles, curves and paths, without canvaσ
• Gradient create linear, radial, conic and elliptic gradients and image patterns without canvas
• Geometrize Computational Geometry and Rendering Library for JavaScript
• Plot.js simple and small library which can plot graphs of functions and various simple charts and can render to Canvas, SVG and plain HTML
• MOD3 3D Modifier Library in JavaScript
• HAAR.js image feature detection based on Haar Cascades in JavaScript (Viola-Jones-Lienhart et al Algorithm)
• HAARPHP image feature detection based on Haar Cascades in PHP (Viola-Jones-Lienhart et al Algorithm)
• FILTER.js video and image processing and computer vision Library in pure JavaScript (browser and node)
• css-color simple class to parse and manipulate colors in various formats