canvas-ultrafast 1.0.0

package/dist/canvas-ultrafast.umd.js

@@ -0,0 +1,47 @@
+(function(b,A){typeof exports=="object"&&typeof module<"u"?A(exports):typeof define=="function"&&define.amd?define(["exports"],A):(b=typeof globalThis<"u"?globalThis:b||self,A(b.CanvasUltrafast={}))})(this,(function(b){"use strict";class A{d=[];b={};a(t,...e){this.d.push({type:"method",name:t,args:e})}c(t,e){this.b[t]=e,this.d.push({type:"property",name:t,value:e})}takeCommands(){if(this.d.length===0)return[];const t=this.d;return this.d=[],t}save(){this.a("save")}restore(){this.a("restore")}scale(t,e){this.a("scale",t,e)}rotate(t){this.a("rotate",t)}translate(t,e){this.a("translate",t,e)}transform(t,e,s,i,r,a){this.a("transform",t,e,s,i,r,a)}setTransform(t,e,s,i,r,a){this.a("setTransform",t,e,s,i,r,a)}resetTransform(){this.a("resetTransform")}clearRect(t,e,s,i){this.a("clearRect",t,e,s,i)}fillRect(t,e,s,i){this.a("fillRect",t,e,s,i)}strokeRect(t,e,s,i){this.a("strokeRect",t,e,s,i)}fillText(t,e,s,i){this.a("fillText",...i!==void 0?[t,e,s,i]:[t,e,s])}strokeText(t,e,s,i){this.a("strokeText",...i!==void 0?[t,e,s,i]:[t,e,s])}beginPath(){this.a("beginPath")}closePath(){this.a("closePath")}moveTo(t,e){this.a("moveTo",t,e)}lineTo(t,e){this.a("lineTo",t,e)}bezierCurveTo(t,e,s,i,r,a){this.a("bezierCurveTo",t,e,s,i,r,a)}quadraticCurveTo(t,e,s,i){this.a("quadraticCurveTo",t,e,s,i)}arc(t,e,s,i,r,a){this.a("arc",...a!==void 0?[t,e,s,i,r,a]:[t,e,s,i,r])}arcTo(t,e,s,i,r){this.a("arcTo",t,e,s,i,r)}ellipse(t,e,s,i,r,a,h,o){this.a("ellipse",...o!==void 0?[t,e,s,i,r,a,h,o]:[t,e,s,i,r,a,h])}rect(t,e,s,i){this.a("rect",t,e,s,i)}fill(){this.a("fill")}stroke(){this.a("stroke")}clip(){this.a("clip")}set fillStyle(t){this.c("fillStyle",t)}set strokeStyle(t){this.c("strokeStyle",t)}set lineWidth(t){this.c("lineWidth",t)}set lineCap(t){this.c("lineCap",t)}set lineJoin(t){this.c("lineJoin",t)}set miterLimit(t){this.c("miterLimit",t)}set lineDashOffset(t){this.c("lineDashOffset",t)}set font(t){this.c("font",t)}set textAlign(t){this.c("textAlign",t)}set textBaseline(t){this.c("textBaseline",t)}set globalAlpha(t){this.c("globalAlpha",t)}set globalCompositeOperation(t){this.c("globalCompositeOperation",t)}set shadowBlur(t){this.c("shadowBlur",t)}set shadowColor(t){this.c("shadowColor",t)}set shadowOffsetX(t){this.c("shadowOffsetX",t)}set shadowOffsetY(t){this.c("shadowOffsetY",t)}get fillStyle(){return this.b.fillStyle??"#000"}get strokeStyle(){return this.b.strokeStyle??"#000"}get lineWidth(){return this.b.lineWidth??1}get lineCap(){return this.b.lineCap??"butt"}get lineJoin(){return this.b.lineJoin??"miter"}get miterLimit(){return this.b.miterLimit??10}get lineDashOffset(){return this.b.lineDashOffset??0}get font(){return this.b.font??"10px sans-serif"}get textAlign(){return this.b.textAlign??"start"}get textBaseline(){return this.b.textBaseline??"alphabetic"}get globalAlpha(){return this.b.globalAlpha??1}get globalCompositeOperation(){return this.b.globalCompositeOperation??"source-over"}get shadowBlur(){return this.b.shadowBlur??0}get shadowColor(){return this.b.shadowColor??"rgba(0, 0, 0, 0)"}get shadowOffsetX(){return this.b.shadowOffsetX??0}get shadowOffsetY(){return this.b.shadowOffsetY??0}}class p{c=[];a;b;constructor(t,e){this.b=F(t,e),this.a=new Float32Array(this.b)}save(){this.c.push(new Float32Array(this.a))}restore(){this.c.length>0&&(this.a=this.c.pop())}translate(t,e){const s=this.a;s[6]+=s[0]*t+s[3]*e,s[7]+=s[1]*t+s[4]*e}rotate(t){const e=Math.cos(t),s=Math.sin(t),i=this.a,r=i[0],a=i[1],h=i[3],o=i[4];i[0]=r*e+h*s,i[1]=a*e+o*s,i[3]=r*-s+h*e,i[4]=a*-s+o*e}scale(t,e){const s=this.a;s[0]*=t,s[1]*=t,s[3]*=e,s[4]*=e}transform(t,e,s,i,r,a){const h=this.a,o=h[0],c=h[1],l=h[3],f=h[4],d=h[6],u=h[7];h[0]=o*t+l*e,h[1]=c*t+f*e,h[3]=o*s+l*i,h[4]=c*s+f*i,h[6]=o*r+l*a+d,h[7]=c*r+f*a+u}setTransform(t,e,s,i,r,a){this.a.set(this.b),this.transform(t,e,s,i,r,a)}resetTransform(){this.a.set(this.b)}resize(t,e){this.b=F(t,e),this.a=new Float32Array(this.b),this.c=[]}getMatrix(){return this.a}}function F(n,t){return new Float32Array([2/n,0,0,0,-2/t,0,-1,1,1])}const v={black:255,white:4294967295,red:4278190335,green:8388863,blue:65535,yellow:4294902015,cyan:16777215,magenta:4278255615,orange:4289003775,transparent:0},x=new Map;function E(n){const t=x.get(n);if(t)return t;const e=P(n);return x.set(n,e),e}function P(n){const t=n.trim();if(t.charCodeAt(0)===35)return L(t);if(t.charCodeAt(0)===114)return U(t);const e=v[t.toLowerCase()];return e!==void 0?new Float32Array([(e>>>24&255)/255,(e>>>16&255)/255,(e>>>8&255)/255,(e&255)/255]):new Float32Array([0,0,0,1])}function L(n){const t=n.length;if(t===4){const e=parseInt(n[1],16),s=parseInt(n[2],16),i=parseInt(n[3],16);return new Float32Array([e*17/255,s*17/255,i*17/255,1])}if(t===7){const e=parseInt(n.slice(1,3),16),s=parseInt(n.slice(3,5),16),i=parseInt(n.slice(5,7),16);return new Float32Array([e/255,s/255,i/255,1])}if(t===9){const e=parseInt(n.slice(1,3),16),s=parseInt(n.slice(3,5),16),i=parseInt(n.slice(5,7),16),r=parseInt(n.slice(7,9),16);return new Float32Array([e/255,s/255,i/255,r/255])}if(t===5){const e=parseInt(n[1],16),s=parseInt(n[2],16),i=parseInt(n[3],16),r=parseInt(n[4],16);return new Float32Array([e*17/255,s*17/255,i*17/255,r*17/255])}return new Float32Array([0,0,0,1])}function U(n){const t=n.indexOf("("),e=n.lastIndexOf(")");if(t===-1||e===-1)return new Float32Array([0,0,0,1]);const s=n.slice(t+1,e).split(","),i=parseFloat(s[0])/255,r=parseFloat(s[1])/255,a=parseFloat(s[2])/255,h=s.length>=4?parseFloat(s[3]):1;return new Float32Array([i,r,a,h])}const B=`
+  attribute vec2 a_position;
+  uniform mat3 u_matrix;
+  void main() {
+    vec3 pos = u_matrix * vec3(a_position, 1.0);
+    gl_Position = vec4(pos.xy, 0.0, 1.0);
+  }
+`,y=`
+  precision mediump float;
+  uniform vec4 u_color;
+  void main() {
+    gl_FragColor = u_color;
+  }
+`,k=`
+  attribute vec2 a_position;
+  attribute vec2 a_texCoord;
+  uniform mat3 u_matrix;
+  varying vec2 v_texCoord;
+  void main() {
+    vec3 pos = u_matrix * vec3(a_position, 1.0);
+    gl_Position = vec4(pos.xy, 0.0, 1.0);
+    v_texCoord = a_texCoord;
+  }
+`,D=`
+  precision mediump float;
+  varying vec2 v_texCoord;
+  uniform sampler2D u_texture;
+  uniform vec4 u_color;
+  void main() {
+    vec4 texel = texture2D(u_texture, v_texCoord);
+    gl_FragColor = texel * u_color;
+  }
+`,I=`
+  attribute vec2 a_position;
+  varying vec2 v_texCoord;
+  void main() {
+    v_texCoord = a_position;
+    gl_Position = vec4(a_position * 2.0 - 1.0, 0, 1);
+  }
+`,M=`
+  precision mediump float;
+  varying vec2 v_texCoord;
+  uniform sampler2D u_texture;
+  void main() {
+    gl_FragColor = texture2D(u_texture, v_texCoord);
+  }
+`;class O{c;F;A;a;i=new Float32Array([0,0,0,1]);d=new Float32Array([0,0,0,1]);f=1;e=1;g="10px sans-serif";j="start";k="alphabetic";o="butt";p="miter";G=[];t=[];l=0;m=0;u=0;v=0;q;B;r;C;D;s;b;H;X=new Float32Array(4);constructor(t,e,s){this.c=t,this.F=e,this.A=s,this.a=new p(e,s),this.q=this.I(B,y,!1),this.B=this.I(k,D,!0),this.r=t.createBuffer(),t.bindBuffer(t.ARRAY_BUFFER,this.r),t.bufferData(t.ARRAY_BUFFER,new Float32Array([0,0,1,0,0,1,0,1,1,0,1,1]),t.STATIC_DRAW),this.C=t.createBuffer(),this.D=t.createBuffer(),this.s=t.createTexture(),t.bindTexture(t.TEXTURE_2D,this.s),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MIN_FILTER,t.LINEAR),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MAG_FILTER,t.LINEAR),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_S,t.CLAMP_TO_EDGE),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_T,t.CLAMP_TO_EDGE),this.b=new OffscreenCanvas(512,128),this.H=this.b.getContext("2d"),t.enable(t.BLEND),t.blendFunc(t.SRC_ALPHA,t.ONE_MINUS_SRC_ALPHA)}executeBatch(t){for(const e of t)e.type==="property"?this.L(e.name,e.value):this.M(e.name,e.args)}resize(t,e){this.F=t,this.A=e,this.a.resize(t,e)}destroy(){const t=this.c;t.deleteBuffer(this.r),t.deleteBuffer(this.C),t.deleteBuffer(this.D),t.deleteTexture(this.s),t.deleteProgram(this.q.n),t.deleteProgram(this.B.n)}L(t,e){switch(t){case"fillStyle":this.i=E(e);break;case"strokeStyle":this.d=E(e);break;case"lineWidth":this.f=e;break;case"globalAlpha":this.e=e;break;case"font":this.g=e;break;case"textAlign":this.j=e;break;case"textBaseline":this.k=e;break;case"lineCap":this.o=e;break;case"lineJoin":this.p=e;break}}M(t,e){switch(t){case"clearRect":this.N(e[0],e[1],e[2],e[3]);break;case"fillRect":this.O(e[0],e[1],e[2],e[3]);break;case"strokeRect":this.P(e[0],e[1],e[2],e[3]);break;case"fillText":this.Q(e[0],e[1],e[2]);break;case"strokeText":this.R(e[0],e[1],e[2]);break;case"beginPath":this.t=[];break;case"closePath":(this.l!==this.u||this.m!==this.v)&&(this.t.push(this.l,this.m,this.u,this.v),this.l=this.u,this.m=this.v);break;case"moveTo":this.l=this.u=e[0],this.m=this.v=e[1];break;case"lineTo":{const s=e[0],i=e[1];this.t.push(this.l,this.m,s,i),this.l=s,this.m=i;break}case"stroke":this.S();break;case"fill":break;case"save":this.T();break;case"restore":this.U();break;case"translate":this.a.translate(e[0],e[1]);break;case"rotate":this.a.rotate(e[0]);break;case"scale":this.a.scale(e[0],e[1]);break;case"transform":this.a.transform(e[0],e[1],e[2],e[3],e[4],e[5]);break;case"setTransform":this.a.setTransform(e[0],e[1],e[2],e[3],e[4],e[5]);break;case"resetTransform":this.a.resetTransform();break}}N(t,e,s,i){const r=this.c;r.enable(r.SCISSOR_TEST),r.scissor(t,this.A-e-i,s,i),r.clearColor(0,0,0,0),r.clear(r.COLOR_BUFFER_BIT),r.disable(r.SCISSOR_TEST)}O(t,e,s,i){const r=this.c,a=this.q;r.useProgram(a.n),this.a.save(),this.a.translate(t,e),this.a.scale(s,i),r.uniformMatrix3fv(a.w,!1,this.a.getMatrix()),this.x(a.y,this.i,this.e),this.a.restore(),r.bindBuffer(r.ARRAY_BUFFER,this.r),r.enableVertexAttribArray(a.h),r.vertexAttribPointer(a.h,2,r.FLOAT,!1,0,0),r.drawArrays(r.TRIANGLES,0,6)}P(t,e,s,i){const r=this.f,a=r/2;this.z(t-a,e-a,s+r,r,this.d),this.z(t-a,e+i-a,s+r,r,this.d),this.z(t-a,e+a,r,i-r,this.d),this.z(t+s-a,e+a,r,i-r,this.d)}z(t,e,s,i,r){const a=this.c,h=this.q;a.useProgram(h.n),this.a.save(),this.a.translate(t,e),this.a.scale(s,i),a.uniformMatrix3fv(h.w,!1,this.a.getMatrix()),this.x(h.y,r,this.e),this.a.restore(),a.bindBuffer(a.ARRAY_BUFFER,this.r),a.enableVertexAttribArray(h.h),a.vertexAttribPointer(h.h,2,a.FLOAT,!1,0,0),a.drawArrays(a.TRIANGLES,0,6)}S(){const t=this.t;if(t.length===0)return;const e=this.c,s=this.q,i=Math.max(this.f/2,.5),r=t.length/4,a=new Float32Array(r*12);for(let h=0,o=0;h<t.length;h+=4){const c=t[h],l=t[h+1],f=t[h+2],d=t[h+3],u=f-c,R=d-l,_=Math.sqrt(u*u+R*R);if(_<.001)continue;const m=-R/_*i,T=u/_*i,G=c+m,H=l+T,g=c-m,S=l-T,C=f+m,w=d+T,W=f-m,Y=d-T;a[o++]=G,a[o++]=H,a[o++]=g,a[o++]=S,a[o++]=C,a[o++]=w,a[o++]=g,a[o++]=S,a[o++]=W,a[o++]=Y,a[o++]=C,a[o++]=w}e.bindBuffer(e.ARRAY_BUFFER,this.C),e.bufferData(e.ARRAY_BUFFER,a,e.DYNAMIC_DRAW),e.useProgram(s.n),e.uniformMatrix3fv(s.w,!1,this.a.getMatrix()),this.x(s.y,this.d,this.e),e.enableVertexAttribArray(s.h),e.vertexAttribPointer(s.h,2,e.FLOAT,!1,0,0),e.drawArrays(e.TRIANGLES,0,r*6)}Q(t,e,s){this.J(t,e,s,"fill")}R(t,e,s){this.J(t,e,s,"stroke")}J(t,e,s,i){const r=this.c,a=this.H;a.font=this.g,a.textAlign="left",a.textBaseline="top";const h=a.measureText(t),o=Math.ceil(h.width)+4,c=N(this.g),l=Math.ceil(c*1.5)+4;if(o<=0||l<=0)return;(this.b.width<o||this.b.height<l)&&(this.b.width=Math.max(this.b.width,o),this.b.height=Math.max(this.b.height,l),a.font=this.g,a.textAlign="left",a.textBaseline="top"),a.clearRect(0,0,this.b.width,this.b.height),i==="fill"?(a.fillStyle="white",a.fillText(t,2,2)):(a.strokeStyle="white",a.lineWidth=this.f,a.strokeText(t,2,2)),r.bindTexture(r.TEXTURE_2D,this.s),r.pixelStorei(r.UNPACK_PREMULTIPLY_ALPHA_WEBGL,1),r.texImage2D(r.TEXTURE_2D,0,r.RGBA,r.RGBA,r.UNSIGNED_BYTE,this.b),r.pixelStorei(r.UNPACK_PREMULTIPLY_ALPHA_WEBGL,0);const f=i==="fill"?this.i:this.d;let d=e-2,u=s-2;switch(this.j){case"center":d-=o/2;break;case"right":case"end":d-=o;break}switch(this.k){case"top":break;case"middle":u-=l/2;break;case"alphabetic":case"ideographic":u-=c;break;case"bottom":case"hanging":u-=l;break}this.V(d,u,o,l,o/this.b.width,l/this.b.height,f)}V(t,e,s,i,r,a,h){const o=this.c,c=this.B,l=new Float32Array([t,e,0,0,t+s,e,r,0,t,e+i,0,a,t,e+i,0,a,t+s,e,r,0,t+s,e+i,r,a]);o.bindBuffer(o.ARRAY_BUFFER,this.D),o.bufferData(o.ARRAY_BUFFER,l,o.DYNAMIC_DRAW),o.useProgram(c.n),o.uniformMatrix3fv(c.w,!1,this.a.getMatrix()),this.x(c.y,h,this.e),o.blendFunc(o.ONE,o.ONE_MINUS_SRC_ALPHA);const f=16;o.enableVertexAttribArray(c.h),o.vertexAttribPointer(c.h,2,o.FLOAT,!1,f,0),o.enableVertexAttribArray(c.E),o.vertexAttribPointer(c.E,2,o.FLOAT,!1,f,8),o.activeTexture(o.TEXTURE0),o.bindTexture(o.TEXTURE_2D,this.s),o.uniform1i(c.W,0),o.drawArrays(o.TRIANGLES,0,6),o.blendFunc(o.SRC_ALPHA,o.ONE_MINUS_SRC_ALPHA),o.disableVertexAttribArray(c.E)}T(){this.a.save(),this.G.push({i:new Float32Array(this.i),d:new Float32Array(this.d),f:this.f,e:this.e,g:this.g,j:this.j,k:this.k,o:this.o,p:this.p})}U(){this.a.restore();const t=this.G.pop();t&&(this.i=t.i,this.d=t.d,this.f=t.f,this.e=t.e,this.g=t.g,this.j=t.j,this.k=t.k,this.o=t.o,this.p=t.p)}x(t,e,s){const i=e[3]*s;this.c.uniform4f(t,e[0],e[1],e[2],i)}I(t,e,s){const i=this.c,r=this.K(i.VERTEX_SHADER,t),a=this.K(i.FRAGMENT_SHADER,e),h=i.createProgram();if(i.attachShader(h,r),i.attachShader(h,a),i.linkProgram(h),!i.getProgramParameter(h,i.LINK_STATUS))throw new Error("Shader link failed: "+i.getProgramInfoLog(h));return i.deleteShader(r),i.deleteShader(a),{n:h,w:i.getUniformLocation(h,"u_matrix"),y:i.getUniformLocation(h,"u_color"),W:s?i.getUniformLocation(h,"u_texture"):null,h:i.getAttribLocation(h,"a_position"),E:s?i.getAttribLocation(h,"a_texCoord"):-1}}K(t,e){const s=this.c,i=s.createShader(t);if(s.shaderSource(i,e),s.compileShader(i),!s.getShaderParameter(i,s.COMPILE_STATUS)){const r=s.getShaderInfoLog(i);throw s.deleteShader(i),new Error("Shader compile failed: "+r)}return i}}function N(n){const t=n.match(/(\d+(?:\.\d+)?)\s*px/);return t?parseFloat(t[1]):10}class X{b;a;h;i;d=null;c;j=0;e=1;w=2;o=!1;f;g;k=-1;constructor(t){this.a=t,this.i=new A;const e=t.getContext("webgl2",{alpha:!1,antialias:!1,desynchronized:!0,preserveDrawingBuffer:!0,powerPreference:"high-performance"});if(!e)throw new Error("WebGL2 not supported");this.b=e,e.pixelStorei(e.UNPACK_PREMULTIPLY_ALPHA_WEBGL,!1),this.s(),this.h=new O(e,t.width,t.height),this.f=this.t(I,M),this.u(),this.v(),this.startDisplay()}getCanvasAPI(){return this.i}submitBatch(t){if(t.length===0)return;const e=this.b;e.bindFramebuffer(e.FRAMEBUFFER,this.c[this.j].l),e.viewport(0,0,this.a.width,this.a.height),this.h.executeBatch(t);const s=this.j;this.j=this.e,this.e=s,this.o=!0}startDisplay(){this.d===null&&this.p()}stopDisplay(){this.d!==null&&(cancelAnimationFrame(this.d),this.d=null)}getCanvas(){return this.a}getCanvasSize(){return{width:this.a.width,height:this.a.height}}screenshot(){return this.q(),createImageBitmap(this.a)}destroy(){this.stopDisplay();const t=this.b;this.h.destroy();for(const s of this.c)t.deleteFramebuffer(s.l),t.deleteTexture(s.m);t.deleteProgram(this.f),t.deleteBuffer(this.g);const e=t.getExtension("WEBGL_lose_context");e&&e.loseContext()}getGL(){return this.b}getReadyTexture(){return this.c[this.e].m}p(){this.d=requestAnimationFrame(()=>this.p());const t=this.i.takeCommands();t.length&&this.submitBatch(t),this.q()}q(){if(!this.o)return;const t=this.b;t.bindFramebuffer(t.FRAMEBUFFER,null),t.viewport(0,0,this.a.width,this.a.height),t.activeTexture(t.TEXTURE0),t.bindTexture(t.TEXTURE_2D,this.c[this.e].m),t.useProgram(this.f),t.bindBuffer(t.ARRAY_BUFFER,this.g),t.enableVertexAttribArray(this.k),t.vertexAttribPointer(this.k,2,t.FLOAT,!1,0,0),t.disable(t.BLEND),t.drawArrays(t.TRIANGLES,0,6),t.enable(t.BLEND)}s(){this.c=[this.n(),this.n(),this.n()]}n(){const t=this.b,e=this.a.width,s=this.a.height,i=t.createFramebuffer();t.bindFramebuffer(t.FRAMEBUFFER,i);const r=t.createTexture();t.bindTexture(t.TEXTURE_2D,r),t.texStorage2D(t.TEXTURE_2D,1,t.RGBA8,e,s),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MIN_FILTER,t.LINEAR),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MAG_FILTER,t.LINEAR),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_S,t.CLAMP_TO_EDGE),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_T,t.CLAMP_TO_EDGE),t.framebufferTexture2D(t.FRAMEBUFFER,t.COLOR_ATTACHMENT0,t.TEXTURE_2D,r,0);const a=t.checkFramebufferStatus(t.FRAMEBUFFER);if(a!==t.FRAMEBUFFER_COMPLETE)throw new Error("Framebuffer incomplete: 0x"+a.toString(16));return t.bindFramebuffer(t.FRAMEBUFFER,null),{l:i,m:r}}v(){const t=this.b;for(const e of this.c)t.bindFramebuffer(t.FRAMEBUFFER,e.l),t.clearColor(0,0,0,1),t.clear(t.COLOR_BUFFER_BIT);t.bindFramebuffer(t.FRAMEBUFFER,null),t.clearColor(0,0,0,1),t.clear(t.COLOR_BUFFER_BIT)}u(){const t=this.b;this.g=t.createBuffer(),t.bindBuffer(t.ARRAY_BUFFER,this.g),t.bufferData(t.ARRAY_BUFFER,new Float32Array([0,0,1,0,0,1,0,1,1,0,1,1]),t.STATIC_DRAW),this.k=t.getAttribLocation(this.f,"a_position")}t(t,e){const s=this.b,i=this.r(s.VERTEX_SHADER,t),r=this.r(s.FRAGMENT_SHADER,e),a=s.createProgram();if(s.attachShader(a,i),s.attachShader(a,r),s.linkProgram(a),!s.getProgramParameter(a,s.LINK_STATUS))throw new Error("Shader link failed: "+s.getProgramInfoLog(a));return s.deleteShader(i),s.deleteShader(r),a}r(t,e){const s=this.b,i=s.createShader(t);if(s.shaderSource(i,e),s.compileShader(i),!s.getShaderParameter(i,s.COMPILE_STATUS)){const r=s.getShaderInfoLog(i);throw s.deleteShader(i),new Error("Shader compile failed: "+r)}return i}}b.CanvasAPI=A,b.MatrixStack=p,b.UltrafastRenderer=X,b.parseColor=E}));

package/dist/index.d.ts

@@ -0,0 +1,229 @@
+export declare class CanvasAPI {
+    private _c;
+    private _cp;
+    private _m;
+    private _p;
+    /**
+     * Drain and return all buffered commands.
+     * No _ prefix: called cross-file from pipeline, must survive mangleProps.
+     */
+    takeCommands(): CanvasCommand[];
+    save(): void;
+    restore(): void;
+    scale(x: number, y: number): void;
+    rotate(angle: number): void;
+    translate(x: number, y: number): void;
+    transform(a: number, b: number, c: number, d: number, e: number, f: number): void;
+    setTransform(a: number, b: number, c: number, d: number, e: number, f: number): void;
+    resetTransform(): void;
+    clearRect(x: number, y: number, width: number, height: number): void;
+    fillRect(x: number, y: number, width: number, height: number): void;
+    strokeRect(x: number, y: number, width: number, height: number): void;
+    fillText(text: string, x: number, y: number, maxWidth?: number): void;
+    strokeText(text: string, x: number, y: number, maxWidth?: number): void;
+    beginPath(): void;
+    closePath(): void;
+    moveTo(x: number, y: number): void;
+    lineTo(x: number, y: number): void;
+    bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number): void;
+    quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void;
+    arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, counterclockwise?: boolean): void;
+    arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void;
+    ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, counterclockwise?: boolean): void;
+    rect(x: number, y: number, width: number, height: number): void;
+    fill(): void;
+    stroke(): void;
+    clip(): void;
+    set fillStyle(value: string | CanvasGradient | CanvasPattern);
+    set strokeStyle(value: string | CanvasGradient | CanvasPattern);
+    set lineWidth(value: number);
+    set lineCap(value: CanvasLineCap);
+    set lineJoin(value: CanvasLineJoin);
+    set miterLimit(value: number);
+    set lineDashOffset(value: number);
+    set font(value: string);
+    set textAlign(value: CanvasTextAlign);
+    set textBaseline(value: CanvasTextBaseline);
+    set globalAlpha(value: number);
+    set globalCompositeOperation(value: GlobalCompositeOperation);
+    set shadowBlur(value: number);
+    set shadowColor(value: string);
+    set shadowOffsetX(value: number);
+    set shadowOffsetY(value: number);
+    get fillStyle(): string | CanvasGradient | CanvasPattern;
+    get strokeStyle(): string | CanvasGradient | CanvasPattern;
+    get lineWidth(): number;
+    get lineCap(): CanvasLineCap;
+    get lineJoin(): CanvasLineJoin;
+    get miterLimit(): number;
+    get lineDashOffset(): number;
+    get font(): string;
+    get textAlign(): CanvasTextAlign;
+    get textBaseline(): CanvasTextBaseline;
+    get globalAlpha(): number;
+    get globalCompositeOperation(): GlobalCompositeOperation;
+    get shadowBlur(): number;
+    get shadowColor(): string;
+    get shadowOffsetX(): number;
+    get shadowOffsetY(): number;
+}
+
+/**
+ * Canvas API Wrapper
+ *
+ * Provides a Canvas 2D API that records commands locally without await.
+ * Commands are batched and sent to the worker for execution.
+ */
+export declare type CanvasCommand = {
+    type: 'property';
+    name: string;
+    value: unknown;
+} | {
+    type: 'method';
+    name: string;
+    args: unknown[];
+};
+
+/**
+ * 3×3 Affine Transform Matrix Stack
+ *
+ * Replicates Canvas 2D's save()/restore()/translate()/rotate()/scale()
+ * as a matrix stack for WebGL uniform upload.
+ *
+ * Matrices are 3×3 column-major (for gl.uniformMatrix3fv), representing
+ * 2D affine transforms. The base matrix includes an orthographic projection
+ * that maps canvas pixel coordinates (top-left origin, Y-down) to WebGL
+ * clip space ([-1,1], Y-up).
+ *
+ * Column-major layout of a 3×3 affine matrix:
+ *   [0]  [3]  [6]     a  c  tx
+ *   [1]  [4]  [7]  =  b  d  ty
+ *   [2]  [5]  [8]     0  0  1
+ */
+export declare class MatrixStack {
+    private _stack;
+    private _current;
+    private _projection;
+    /**
+     * @param width  Canvas width in pixels
+     * @param height Canvas height in pixels
+     */
+    constructor(width: number, height: number);
+    /** Push current matrix onto the stack. No _ prefix: cross-file. */
+    save(): void;
+    /** Pop and restore the top matrix. No _ prefix: cross-file. */
+    restore(): void;
+    /** Translate the current matrix. No _ prefix: cross-file. */
+    translate(x: number, y: number): void;
+    /** Rotate the current matrix by angle (radians). No _ prefix: cross-file. */
+    rotate(angle: number): void;
+    /** Scale the current matrix. No _ prefix: cross-file. */
+    scale(x: number, y: number): void;
+    /**
+     * Multiply current matrix by an arbitrary 2D affine transform.
+     * Canvas 2D transform(a, b, c, d, e, f) matrix:
+     *   a  c  e
+     *   b  d  f
+     *   0  0  1
+     * No _ prefix: cross-file.
+     */
+    transform(a: number, b: number, c: number, d: number, e: number, f: number): void;
+    /**
+     * Reset to projection then apply the given affine transform.
+     * Canvas 2D setTransform(a, b, c, d, e, f).
+     * No _ prefix: cross-file.
+     */
+    setTransform(a: number, b: number, c: number, d: number, e: number, f: number): void;
+    /** Reset to the base orthographic projection. No _ prefix: cross-file. */
+    resetTransform(): void;
+    /**
+     * Update canvas dimensions (e.g., on resize).
+     * Recomputes the projection and resets the current matrix.
+     * No _ prefix: cross-file.
+     */
+    resize(width: number, height: number): void;
+    /**
+     * Returns the current 3×3 matrix for gl.uniformMatrix3fv.
+     * No _ prefix: cross-file.
+     */
+    getMatrix(): Float32Array;
+}
+
+/**
+ * CSS Color Parser
+ *
+ * Converts CSS color strings to Float32Array [r, g, b, a] in [0, 1] range
+ * for use as WebGL uniform values.
+ *
+ * Supported formats:
+ * - Hex: #rgb, #rrggbb, #rrggbbaa
+ * - Functional: rgb(r, g, b), rgba(r, g, b, a)
+ * - Named: basic CSS color keywords
+ *
+ * Includes a cache for repeated lookups (the demo reuses ~10 colors).
+ */
+/**
+ * Parse a CSS color string into [r, g, b, a] floats in [0, 1].
+ * Returns a cached Float32Array — do NOT mutate the result.
+ *
+ * No _ prefix: called cross-file from canvas2d-shim.
+ */
+export declare function parseColor(css: string): Float32Array;
+
+export declare class UltrafastRenderer {
+    private _gl;
+    private _canvas;
+    private _shim;
+    private _api;
+    private _rafId;
+    private _fbos;
+    private _writeIdx;
+    private _readyIdx;
+    private _displayIdx;
+    private _hasContent;
+    private _passthroughProgram;
+    private _quadVBO;
+    private _quadPositionLoc;
+    constructor(canvas: HTMLCanvasElement);
+    /** Get the CanvasAPI for recording draw commands. */
+    getCanvasAPI(): CanvasAPI;
+    /**
+     * Submit a batch of Canvas 2D commands to be rendered into the write FBO.
+     * After rendering, the write and ready FBOs are swapped so the display
+     * loop picks up the latest frame.
+     */
+    submitBatch(commands: CanvasCommand[]): void;
+    /** Start the passthrough RAF display loop with auto-flush. */
+    startDisplay(): void;
+    /** Stop the passthrough RAF display loop. Last frame persists (preserveDrawingBuffer). */
+    stopDisplay(): void;
+    /** Returns the display canvas element. */
+    getCanvas(): HTMLCanvasElement;
+    /** Get canvas dimensions. */
+    getCanvasSize(): {
+        width: number;
+        height: number;
+    };
+    /** Capture the current displayed frame as an ImageBitmap. */
+    screenshot(): Promise<ImageBitmap>;
+    /** Clean up all WebGL resources. */
+    destroy(): void;
+    /** Returns the WebGL2 context for external rendering (e.g. CRT shader). */
+    getGL(): WebGL2RenderingContext;
+    /** Returns the ready FBO's texture — the latest fully rendered frame. */
+    getReadyTexture(): WebGLTexture;
+    private _displayLoop;
+    /**
+     * Render the ready FBO to the display canvas via passthrough shader.
+     * Called at vsync rate by RAF, or once synchronously for screenshots.
+     */
+    private _renderDisplay;
+    private _initFBOs;
+    private _createFBO;
+    private _clearAllFBOs;
+    private _initQuadVBO;
+    private _createShaderProgram;
+    private _compileShader;
+}
+
+export { }

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "canvas-ultrafast",
+  "version": "1.0.0",
+  "description": "WebGL-accelerated Canvas 2D rendering engine with triple-buffered FBOs",
+  "type": "module",
+  "main": "dist/canvas-ultrafast.0a27ed3f.umd.js",
+  "module": "dist/canvas-ultrafast.0a27ed3f.es.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/canvas-ultrafast.es.js",
+      "require": "./dist/canvas-ultrafast.umd.js"
+    }
+  },
+  "workspaces": [
+    "demo"
+  ],
+  "scripts": {
+    "lint": "eslint .",
+    "type-check": "tsc --noEmit && npm run lint",
+    "build": "npm run type-check && NODE_ENV=production vite build --mode production",
+    "build:dev": "npm run type-check && NODE_ENV=development vite build --mode development",
+    "build:all": "npm run build && npm run build -w demo",
+    "build:dev-all": "npm run build:dev && npm run build:dev -w demo",
+    "clean": "rm -rf dist demo/dist",
+    "serve": "node scripts/server.js demo/dist 4174",
+    "serve:demo": "npm run build:all && node scripts/server.js demo/dist 4174",
+    "verify-demo": "npm run build:dev-all && node scripts/verify-demo.js"
+  },
+  "keywords": [
+    "canvas",
+    "webgl",
+    "renderer",
+    "triple-buffer",
+    "typescript"
+  ],
+  "license": "AGPL-3.0-only",
+  "dependencies": {},
+  "files": [
+    "dist"
+  ],
+  "devDependencies": {
+    "@eslint/js": "^10.0.1",
+    "@microsoft/api-extractor": "^7.57.2",
+    "@types/node": "^22.19.11",
+    "eslint": "^10.0.1",
+    "globals": "^16.0.0",
+    "playwright": "^1.58.2",
+    "typescript": "~5.8.2",
+    "typescript-eslint": "^8.56.0",
+    "vite": "^7.3.1",
+    "vite-plugin-compression2": "^2.4.0",
+    "vite-plugin-dts": "^4.5.4"
+  }
+}