{"id":16758143,"url":"https://github.com/foo123/gradient","last_synced_at":"2025-03-16T07:25:40.624Z","repository":{"id":64861929,"uuid":"578930238","full_name":"foo123/Gradient","owner":"foo123","description":"Class to create linear, radial, conic and elliptic gradients and image patterns as bitmaps without canvas","archived":false,"fork":false,"pushed_at":"2023-07-31T19:46:29.000Z","size":197,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-01-22T19:48:37.328Z","etag":null,"topics":["conic-gradient","elliptic-gradient","linear-gradient","radial-gradient","repeatable-pattern"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/foo123.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-12-16T08:24:16.000Z","updated_at":"2024-01-03T20:31:09.000Z","dependencies_parsed_at":"2024-11-22T07:16:50.034Z","dependency_job_id":null,"html_url":"https://github.com/foo123/Gradient","commit_stats":{"total_commits":10,"total_committers":1,"mean_commits":10.0,"dds":0.0,"last_synced_commit":"80e362bea2cb7deb3ab4c2125bf6fa49a726e4be"},"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/foo123%2FGradient","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/foo123%2FGradient/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/foo123%2FGradient/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/foo123%2FGradient/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/foo123","download_url":"https://codeload.github.com/foo123/Gradient/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243838256,"owners_count":20356005,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["conic-gradient","elliptic-gradient","linear-gradient","radial-gradient","repeatable-pattern"],"created_at":"2024-10-13T04:04:17.031Z","updated_at":"2025-03-16T07:25:40.603Z","avatar_url":"https://github.com/foo123.png","language":"JavaScript","readme":"# Gradient\n\nClass to create **linear, radial, conic and elliptic gradients** and **image patterns** as bitmaps without canvas\n\n**version 1.2.3** (13 kB minified)\n\n**API:**\n\n```javascript\n// create gradients\nconst grad = Gradient.createLinearGradient(x1, y1, x2, y2);\nconst grad = Gradient.createRadialGradient(x1, y1, r1, x2, y2, r2);\nconst grad = Gradient.createConicGradient(angle, cx, cy);\nconst grad = Gradient.createEllipticGradient(cx, cy, rx, ry, angle);\n\n// methods\ngrad.addColorStop(offset, color);\n\ngrad.transform.scale(sx, sy);\ngrad.transform.rotate(angle);\ngrad.transform.translate(tx, ty);\ngrad.transform.reflectX();\ngrad.transform.reflectY();\ngrad.transform.skewX(s);\ngrad.transform.skewY(s);\ngrad.transform.transform(a, b, c, d, e, f);\ngrad.transform.reset();\ngrad.transform.save();\ngrad.transform.restore();\n\ngrad.getColorAt(x, y);\ngrad.getBitmap(width, height);\n\n// create patterns\nconst pat = Gradient.createPattern(imageData, repetition = 'repeat');\n\n// methods\npat.transform.scale(sx, sy);\npat.transform.rotate(angle);\npat.transform.translate(tx, ty);\npat.transform.reflectX();\npat.transform.reflectY();\npat.transform.skewX(s);\npat.transform.skewY(s);\npat.transform.transform(a, b, c, d, e, f);\npat.transform.reset();\npat.transform.save();\npat.transform.restore();\n\npat.getColorAt(x, y);\npat.getBitmap(width, height);\n```\n\n**Example:**\n\n```javascript\nconst w = 200, h = 200;\nconst Matrix = Gradient.Matrix;\n\nfunction addColorStops(gradient)\n{\n    const colors = ['red', 'yellow', 'green', 'blue'];\n    const stops = [0.0, 0.33, 0.66, 1.0];\n    stops.forEach((s, i) =\u003e {\n        gradient.addColorStop(s, colors[i]);\n    });\n    return gradient;\n}\nfunction fill_transformed_rect(ctx, x, y, w, h)\n{\n    const m = ctx.getTransform();\n    const m2 = (new Matrix(m.a, m.c, m.e, m.b, m.d, m.f)).inv();\n    const p1 = m2.transform(x, y),\n        p2 = m2.transform(x+w, y),\n        p3 = m2.transform(x+w, y+h),\n        p4 = m2.transform(x, y+h);\n    ctx.beginPath();\n    ctx.moveTo(p1.x, p1.y);\n    ctx.lineTo(p2.x, p2.y);\n    ctx.lineTo(p3.x, p3.y);\n    ctx.lineTo(p4.x, p4.y);\n    ctx.closePath();\n    ctx.fill();\n}\nfunction drawLinearGradient(x1, y1, x2, y2)\n{\n    const canvas1 = document.getElementById('linear1');\n    const canvas2 = document.getElementById('linear2');\n    const ctx1 = canvas1.getContext(\"2d\");\n    const ctx2 = canvas2.getContext(\"2d\");\n\n    const gradient1 = ctx1.createLinearGradient(x1, y1, x2, y2);\n    const gradient2 = Gradient.createLinearGradient(x1, y1, x2, y2);\n\n    addColorStops(gradient1);\n    addColorStops(gradient2);\n\n    ctx1.fillStyle = gradient1;\n    ctx1.fillRect(0, 0, w, h);\n\n    const imData = ctx2.createImageData(w, h);\n    imData.data.set(gradient2.getBitmap(w, h));\n    ctx2.putImageData(imData, 0, 0);\n}\nfunction drawRadialGradient(x1, y1, r1, x2, y2, r2)\n{\n    const canvas1 = document.getElementById('radial1');\n    const canvas2 = document.getElementById('radial2');\n    const ctx1 = canvas1.getContext(\"2d\");\n    const ctx2 = canvas2.getContext(\"2d\");\n\n    const gradient1 = ctx1.createRadialGradient(x1, y1, r1, x2, y2, r2);\n    const gradient2 = Gradient.createRadialGradient(x1, y1, r1, x2, y2, r2);\n\n    addColorStops(gradient1);\n    addColorStops(gradient2);\n\n    ctx1.fillStyle = gradient1;\n    ctx1.fillRect(0, 0, w, h);\n\n    const imData = ctx2.createImageData(w, h);\n    imData.data.set(gradient2.getBitmap(w, h));\n    ctx2.putImageData(imData, 0, 0);\n}\nfunction drawEllipticGradient(cx, cy, rx, ry, angle)\n{\n    const canvas1 = document.getElementById('elliptic1');\n    const canvas2 = document.getElementById('elliptic2');\n    const canvas3 = document.getElementById('elliptic3');\n    const canvas4 = document.getElementById('elliptic4');\n    const ctx1 = canvas1.getContext(\"2d\");\n    const ctx2 = canvas2.getContext(\"2d\");\n    const ctx3 = canvas3.getContext(\"2d\");\n    const ctx4 = canvas4.getContext(\"2d\");\n\n    const r = Math.max(rx, ry), sx = rx/r, sy = ry/r;\n\n    const gradient1 = ctx1.createRadialGradient(cx/sx, cy/sy, 0, cx/sx, cy/sy, r);\n    const gradient2 = Gradient.createRadialGradient(cx/sx, cy/sy, 0, cx/sx, cy/sy, r);\n    const gradient3 = ctx3.createRadialGradient(cx, cy, 0, cx, cy, r);\n    const gradient4 = Gradient.createEllipticGradient(cx, cy, rx, ry, angle);\n\n    addColorStops(gradient1);\n    addColorStops(gradient2);\n    addColorStops(gradient3);\n    addColorStops(gradient4);\n\n    // transform radial gradient1 to become an unrotated elliptic\n    ctx1.scale(sx, sy);\n    ctx1.fillStyle = gradient1;\n    fill_transformed_rect(ctx1, 0, 0, w, h);\n\n    // create a pattern from the gradient, just for fun\n    const pattern2 = Gradient.createPattern({\n        data: gradient2.getBitmap(w/sx, h/sy),\n        width: Math.round(w/sx),\n        height: Math.round(h/sy)\n    }, 'no-repeat');\n    // gradient2/pattern2 is a transformed radial gradient\n    //pattern2.transform.translate(-cx, -cy);\n    pattern2.transform.scale(sx, sy);\n    //pattern2.transform.rotate(-angle);\n    //pattern2.transform.translate(cx, cy);\n    const imData2 = ctx2.createImageData(w, h);\n    imData2.data.set(pattern2.getBitmap(w, h));\n    ctx2.putImageData(imData2, 0, 0);\n\n    // transform radial gradient3 to become a rotated elliptic\n    ctx3.translate(cx, cy);\n    ctx3.rotate(-angle);\n    ctx3.translate(-cx*sx, -cy*sy);\n    ctx3.scale(sx, sy);\n    ctx3.fillStyle = gradient3;\n    fill_transformed_rect(ctx3, 0, 0, w, h);\n    // gradient4 is elliptic gradient\n    const imData4 = ctx4.createImageData(w, h);\n    imData4.data.set(gradient4.getBitmap(w, h));\n    ctx4.putImageData(imData4, 0, 0);\n}\nfunction drawConicGradient(angle, cx, cy)\n{\n    const canvas1 = document.getElementById('conic1');\n    const canvas2 = document.getElementById('conic2');\n    const ctx1 = canvas1.getContext(\"2d\");\n    const ctx2 = canvas2.getContext(\"2d\");\n\n    const gradient1 = ctx1.createConicGradient(angle, cx, cy);\n    const gradient2 = Gradient.createConicGradient(angle, cx, cy);\n\n    addColorStops(gradient1);\n    addColorStops(gradient2);\n\n    ctx1.fillStyle = gradient1;\n    ctx1.fillRect(0, 0, w, h);\n\n    const imData = ctx2.createImageData(w, h);\n    imData.data.set(gradient2.getBitmap(w, h));\n    ctx2.putImageData(imData, 0, 0);\n}\n\ndrawLinearGradient(20, 20, w - 20, h - 20);\ndrawRadialGradient(100, 100, 10, 160, 120, 80);\ndrawEllipticGradient(100, 100, 100, 40, Math.PI/4);\ndrawConicGradient(Math.PI/4, 60, 80);\n```\n\n![gradients example](/screenshot.png)\n\n**see also:**\n\n* [CanvasLite](https://github.com/foo123/CanvasLite) an html canvas implementation in pure JavaScript\n* [Rasterizer](https://github.com/foo123/Rasterizer) stroke and fill lines, rectangles, curves and paths, without canvaσ\n* [Gradient](https://github.com/foo123/Gradient) create linear, radial, conic and elliptic gradients and image patterns without canvas\n* [Geometrize](https://github.com/foo123/Geometrize) Computational Geometry and Rendering Library for JavaScript\n* [Plot.js](https://github.com/foo123/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\n* [MOD3](https://github.com/foo123/MOD3) 3D Modifier Library in JavaScript\n* [HAAR.js](https://github.com/foo123/HAAR.js) image feature detection based on Haar Cascades in JavaScript (Viola-Jones-Lienhart et al Algorithm)\n* [HAARPHP](https://github.com/foo123/HAARPHP) image feature detection based on Haar Cascades in PHP (Viola-Jones-Lienhart et al Algorithm)\n* [FILTER.js](https://github.com/foo123/FILTER.js) video and image processing and computer vision Library in pure JavaScript (browser and node)\n* [css-color](https://github.com/foo123/css-color) simple class to parse and manipulate colors in various formats\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffoo123%2Fgradient","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffoo123%2Fgradient","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffoo123%2Fgradient/lists"}