UNPKG

mz-canvas

Version:

The TypeScript-based library for manipulating <canvas> element and 2D graphics in the browser.

10 lines (9 loc) 3.74 kB
/* mzCanvas v1.0.15 TypeScript-based library for manipulating canvas element and 2D graphics in the browser. https://github.com/mzusin/mz-canvas Licensed GPLv3 for open source use, or Commercial License for commercial use - https://github.com/mzusin/index/blob/main/LICENSE.md Copyright (c) 2023-present, Miriam Zusin */ var h=(e,n)=>{for(let l of n){let t=l[1];if(t===void 0)continue;let i=l[0];e.setAttribute(i,t.toString())}},d=(e,n)=>{for(let l of e){let t=l[1];if(t===void 0)continue;let i=l[0];n[i]=t}},P=e=>{let n=document.createElement("canvas");h(n,[["id",e.id],["class",e.classes],["style",e.style],["title",e.title],["tabindex",e.tabindex],["role",e.role],["aria-label",e.ariaLabel]]),e.fallback&&(n.textContent=e.fallback);let l=typeof n.getContext=="function"?n.getContext("2d",e.contextAttributes):null;return n.width=e.width,n.height=e.height,{ctx:l,$canvas:n}},r=(e,n)=>{d([["lineWidth",e.lineWidth],["strokeStyle",e.strokeStyle],["lineCap",e.lineCap],["lineJoin",e.lineJoin],["miterLimit",e.miterLimit],["lineDashOffset",e.lineDashOffset]],n),e.lineDashSegments&&n.setLineDash(e.lineDashSegments)},f=(e,n)=>{e.fillStyle!==void 0&&(n.fillStyle=e.fillStyle),d([["shadowOffsetX",e.shadowOffsetX],["shadowOffsetY",e.shadowOffsetY],["shadowBlur",e.shadowBlur],["shadowColor",e.shadowColor]],n)};var C=(e,n)=>{let{x1:l,y1:t,x2:i,y2:a}=e;n.save(),n.beginPath(),n.moveTo(l,t),n.lineTo(i,a),e.strokeStyle&&(r(e,n),n.stroke()),n.restore()},u=(e,n)=>{let{x1:l,y1:t,x2:i,y2:a}=e,o=new Path2D;return o.moveTo(l,t),o.lineTo(i,a),n&&(n.save(),e.strokeStyle&&(r(e,n),n.stroke(o)),n.restore()),o},m=(e,n)=>{let{x:l,y:t,w:i,h:a}=e;if(e.clear){n.clearRect(l,t,i,a);return}if(e.radii){n.save(),f(e,n),r(e,n),n.beginPath(),n.roundRect(l,t,i,a,e.radii),e.fillStyle&&n.fill(),e.strokeStyle&&n.stroke(),n.restore();return}n.save(),e.fillStyle&&(f(e,n),n.fillRect(l,t,i,a)),e.strokeStyle&&(r(e,n),n.strokeRect(l,t,i,a)),n.restore()},v=(e,n)=>{let{x:l,y:t,w:i,h:a}=e,o=new Path2D;return e.radii?o.roundRect(l,t,i,a,e.radii):o.rect(l,t,i,a),n&&(n.save(),e.fillStyle&&(f(e,n),n.fill(o)),e.strokeStyle&&(r(e,n),n.stroke(o)),n.restore()),o},k=(e,n)=>{let{points:l}=e;n.save(),f(e,n),r(e,n),n.beginPath();for(let t=0;t<l.length;t++){let i=l[t];t===0?n.moveTo(i[0],i[1]):n.lineTo(i[0],i[1])}e.closed&&n.closePath(),e.fillStyle&&n.fill(),e.strokeStyle&&n.stroke(),n.restore()},R=(e,n)=>{let{points:l}=e,t=new Path2D;for(let i=0;i<l.length;i++){let a=l[i];i===0?t.moveTo(a[0],a[1]):t.lineTo(a[0],a[1])}return e.closed&&t.closePath(),n&&(n.save(),e.fillStyle&&(f(e,n),n.fill(t)),e.strokeStyle&&(r(e,n),n.stroke(t)),n.restore()),t},S=(e,n)=>{let{cx:l,cy:t,r:i,sides:a}=e;n.save(),f(e,n),r(e,n),n.translate(l,t);for(let o=0;o<a;o++){let s=Math.PI*2/a*o;e.rotation!==void 0&&(s+=e.rotation),o===0?n.moveTo(i*Math.cos(s),i*Math.sin(s)):n.lineTo(i*Math.cos(s),i*Math.sin(s))}n.closePath(),e.fillStyle&&n.fill(),e.strokeStyle&&n.stroke(),n.restore()},c=(e,n)=>{let{cx:l,cy:t,r:i}=e,a=e.startAngleRad===void 0?0:e.startAngleRad,o=e.endAngleRad===void 0?2*Math.PI:e.endAngleRad;n.save(),n.beginPath(),f(e,n),r(e,n),n.arc(l,t,i,a,o,e.counterclockwise),e.fillStyle&&n.fill(),e.strokeStyle&&(r(e,n),n.stroke()),n.restore()},D=(e,n)=>{let{cx:l,cy:t,r:i}=e,a=e.startAngleRad===void 0?0:e.startAngleRad,o=e.endAngleRad===void 0?2*Math.PI:e.endAngleRad,s=new Path2D;return s.arc(l,t,i,a,o,e.counterclockwise),n&&(n.save(),e.fillStyle&&(f(e,n),n.fill(s)),e.strokeStyle&&(r(e,n),n.stroke(s)),n.restore()),s};export{P as canvas,c as circle,D as circlePath,f as fill,C as line,u as linePath,k as polynomial,S as polynomialFromCenter,R as polynomialPath,m as rect,v as rectPath,d as setContextProps,r as stroke}; //# sourceMappingURL=mz-canvas.esm.js.map