canvas2gl 1.0.0

package/dist/index.js

@@ -0,0 +1,409 @@
+import { triangulateRect, triangulateArc, triangulateFillPath, triangulateStrokePath, arcToPoints, cubicBezierPoints, quadraticBezierPoints, } from './shapes.js';
+import { WebGLRenderer } from './renderer.js';
+import { Gradient } from './gradient.js';
+const NAMED_COLORS = {
+    black: [0, 0, 0, 1], white: [1, 1, 1, 1], red: [1, 0, 0, 1],
+    green: [0, 0.502, 0, 1], blue: [0, 0, 1, 1], yellow: [1, 1, 0, 1],
+    cyan: [0, 1, 1, 1], magenta: [1, 0, 1, 1], orange: [1, 0.647, 0, 1],
+    gray: [0.502, 0.502, 0.502, 1], grey: [0.502, 0.502, 0.502, 1],
+    transparent: [0, 0, 0, 0],
+};
+export default class Canvas2gl {
+    renderer;
+    pathCommands = [];
+    pathPoints = [];
+    pathSubpaths = [];
+    pathClosed = false;
+    texCache = new WeakMap();
+    _offscreen = document.createElement('canvas');
+    _offCtx = this._offscreen.getContext('2d');
+    _transform = new Float32Array([1, 0, 0, 0, 1, 0, 0, 0, 1]);
+    _stateStack = [];
+    fillStyle = '#000000';
+    strokeStyle = '#000000';
+    lineWidth = 1;
+    globalAlpha = 1;
+    globalCompositeOperation = 'source-over';
+    font = '10px sans-serif';
+    textAlign = 'start';
+    textBaseline = 'alphabetic';
+    direction = 'inherit';
+    letterSpacing = '0px';
+    currentX = 0;
+    currentY = 0;
+    subStartIdx = 0;
+    constructor(canvas) {
+        this.renderer = new WebGLRenderer(canvas);
+    }
+    beginPath() {
+        this.pathCommands = [];
+        this.pathPoints = [];
+        this.pathSubpaths = [];
+        this.pathClosed = false;
+        this.currentX = 0;
+        this.currentY = 0;
+        this.subStartIdx = 0;
+    }
+    moveTo(x, y) {
+        if (this.pathPoints.length > this.subStartIdx) {
+            this.pathSubpaths.push(this.pathPoints.slice(this.subStartIdx));
+        }
+        this.subStartIdx = this.pathPoints.length;
+        this.pathCommands.push({ type: 'moveTo', x, y });
+        this.pathPoints.push({ x, y });
+        this.currentX = x;
+        this.currentY = y;
+    }
+    lineTo(x, y) {
+        this.pathCommands.push({ type: 'lineTo', x, y });
+        this.pathPoints.push({ x, y });
+        this.currentX = x;
+        this.currentY = y;
+    }
+    arc(cx, cy, radius, startAngle, endAngle, anticlockwise = false) {
+        this.pathCommands.push({
+            type: 'arc', cx, cy, radius, startAngle, endAngle, anticlockwise,
+        });
+        const endX = cx + radius * Math.cos(endAngle);
+        const endY = cy + radius * Math.sin(endAngle);
+        this.pathPoints.push({ x: endX, y: endY });
+        this.currentX = endX;
+        this.currentY = endY;
+    }
+    bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) {
+        this.pathCommands.push({
+            type: 'bezierCurveTo', cp1x, cp1y, cp2x, cp2y, x, y,
+        });
+        const pts = cubicBezierPoints(this.currentX, this.currentY, cp1x, cp1y, cp2x, cp2y, x, y);
+        for (const p of pts)
+            this.pathPoints.push(p);
+        this.currentX = x;
+        this.currentY = y;
+    }
+    quadraticCurveTo(cpx, cpy, x, y) {
+        this.pathCommands.push({
+            type: 'quadraticCurveTo', x, y,
+            cp1x: cpx, cp1y: cpy,
+        });
+        const pts = quadraticBezierPoints(this.currentX, this.currentY, cpx, cpy, x, y);
+        for (const p of pts)
+            this.pathPoints.push(p);
+        this.currentX = x;
+        this.currentY = y;
+    }
+    rect(x, y, w, h) {
+        this.pathCommands.push({ type: 'rect', rx: x, ry: y, rw: w, rh: h });
+    }
+    fillRect(x, y, w, h) {
+        const verts = triangulateRect(x, y, w, h);
+        this._drawShape(flattenVerts(verts), this.fillStyle);
+    }
+    strokeRect(x, y, w, h) {
+        const pts = [
+            { x, y }, { x: x + w, y },
+            { x: x + w, y: y + h }, { x, y: y + h },
+        ];
+        const verts = triangulateStrokePath(pts, this.lineWidth, true);
+        this._drawShape(flattenVerts(verts), this.strokeStyle);
+    }
+    closePath() {
+        this.pathClosed = true;
+        if (this.pathPoints.length > this.subStartIdx) {
+            this.pathSubpaths.push(this.pathPoints.slice(this.subStartIdx));
+            this.subStartIdx = this.pathPoints.length;
+        }
+    }
+    fill() {
+        const allVerts = [];
+        for (const cmd of this.pathCommands) {
+            switch (cmd.type) {
+                case 'rect':
+                    allVerts.push(...triangulateRect(cmd.rx, cmd.ry, cmd.rw, cmd.rh));
+                    break;
+                case 'arc':
+                    allVerts.push(...triangulateArc(cmd.cx, cmd.cy, cmd.radius, cmd.startAngle, cmd.endAngle, cmd.anticlockwise));
+                    break;
+            }
+        }
+        for (const sub of this.pathSubpaths) {
+            if (sub.length >= 3) {
+                allVerts.push(...triangulateFillPath(sub));
+            }
+        }
+        if (allVerts.length > 0) {
+            const verts = flattenVerts(allVerts);
+            this._drawShape(verts, this.fillStyle);
+        }
+        this.beginPath();
+    }
+    stroke() {
+        const allVerts = [];
+        for (const cmd of this.pathCommands) {
+            switch (cmd.type) {
+                case 'rect': {
+                    const { rx: x, ry: y, rw: w, rh: h } = cmd;
+                    const pts = [
+                        { x: x, y: y }, { x: x + w, y: y },
+                        { x: x + w, y: y + h }, { x: x, y: y + h },
+                    ];
+                    allVerts.push(...triangulateStrokePath(pts, this.lineWidth, true));
+                    break;
+                }
+                case 'arc': {
+                    const pts = arcToPoints(cmd.cx, cmd.cy, cmd.radius, cmd.startAngle, cmd.endAngle, cmd.anticlockwise);
+                    allVerts.push(...triangulateStrokePath(pts, this.lineWidth, false));
+                    break;
+                }
+            }
+        }
+        if (this.pathPoints.length > this.subStartIdx) {
+            this.pathSubpaths.push(this.pathPoints.slice(this.subStartIdx));
+        }
+        for (const sub of this.pathSubpaths) {
+            if (sub.length >= 2) {
+                allVerts.push(...triangulateStrokePath(sub, this.lineWidth, this.pathClosed));
+            }
+        }
+        if (allVerts.length > 0) {
+            const verts = flattenVerts(allVerts);
+            this._drawShape(verts, this.strokeStyle);
+        }
+        this.beginPath();
+    }
+    clearRect(x, y, w, h) {
+        this.renderer.clearRect(x, y, w, h);
+    }
+    clear() {
+        this.renderer.clear();
+    }
+    getImageData(sx, sy, sw, sh) {
+        const pixels = this.renderer.readPixels(sx, sy, sw, sh);
+        return new ImageData(new Uint8ClampedArray(pixels), sw, sh);
+    }
+    createLinearGradient(x0, y0, x1, y1) {
+        return new Gradient(x0, y0, x1, y1);
+    }
+    resize() {
+        this.renderer.resize();
+    }
+    drawImage(source, ...args) {
+        let sx, sy, sw, sh;
+        let dx, dy, dw, dh;
+        if (args.length === 2) {
+            [dx, dy] = args;
+            dw = getSourceWidth(source);
+            dh = getSourceHeight(source);
+            sx = 0;
+            sy = 0;
+            sw = dw;
+            sh = dh;
+        }
+        else if (args.length === 4) {
+            [dx, dy, dw, dh] = args;
+            sx = 0;
+            sy = 0;
+            sw = getSourceWidth(source);
+            sh = getSourceHeight(source);
+        }
+        else {
+            [sx, sy, sw, sh, dx, dy, dw, dh] = args;
+        }
+        let tex = this.texCache.get(source);
+        if (!tex) {
+            tex = this.renderer.createTexture(source);
+            this.texCache.set(source, tex);
+        }
+        else {
+            this.renderer.updateTexture(tex, source);
+        }
+        this.renderer.drawTexture(tex, sx, sy, sw, sh, dx, dy, dw, dh, getSourceWidth(source), getSourceHeight(source), this.globalAlpha, this.globalCompositeOperation, this._transform);
+    }
+    fillText(text, x, y, maxWidth) {
+        this._renderText(text, x, y, maxWidth, false);
+    }
+    strokeText(text, x, y, maxWidth) {
+        this._renderText(text, x, y, maxWidth, true);
+    }
+    measureText(text) {
+        this._syncToOffscreen();
+        return this._offCtx.measureText(text);
+    }
+    save() {
+        const transformCopy = new Float32Array(9);
+        transformCopy.set(this._transform);
+        this._stateStack.push({
+            transform: transformCopy,
+            fillStyle: this.fillStyle,
+            strokeStyle: this.strokeStyle,
+            lineWidth: this.lineWidth,
+            globalAlpha: this.globalAlpha,
+            globalCompositeOperation: this.globalCompositeOperation,
+        });
+    }
+    restore() {
+        if (this._stateStack.length > 0) {
+            const saved = this._stateStack.pop();
+            const transformCopy = new Float32Array(9);
+            transformCopy.set(saved.transform);
+            this._transform = transformCopy;
+            this.fillStyle = saved.fillStyle;
+            this.strokeStyle = saved.strokeStyle;
+            this.lineWidth = saved.lineWidth;
+            this.globalAlpha = saved.globalAlpha;
+            this.globalCompositeOperation = saved.globalCompositeOperation;
+        }
+    }
+    translate(x, y) {
+        this._multiplyTransform(new Float32Array([1, 0, 0, 0, 1, 0, x, y, 1]));
+    }
+    rotate(angle) {
+        const c = Math.cos(angle);
+        const s = Math.sin(angle);
+        this._multiplyTransform(new Float32Array([c, -s, 0, s, c, 0, 0, 0, 1]));
+    }
+    scale(x, y) {
+        this._multiplyTransform(new Float32Array([x, 0, 0, 0, y, 0, 0, 0, 1]));
+    }
+    transform(a, b, c, d, e, f) {
+        this._multiplyTransform(new Float32Array([a, b, 0, c, d, 0, e, f, 1]));
+    }
+    setTransform(a, b, c, d, e, f) {
+        this._transform = new Float32Array([a, b, 0, c, d, 0, e, f, 1]);
+    }
+    resetTransform() {
+        this._transform = new Float32Array([1, 0, 0, 0, 1, 0, 0, 0, 1]);
+    }
+    _multiplyTransform(m) {
+        const a = this._transform;
+        const result = new Float32Array(9);
+        for (let i = 0; i < 3; i++) {
+            for (let j = 0; j < 3; j++) {
+                result[i * 3 + j] = m[i * 3 + 0] * a[0 * 3 + j] + m[i * 3 + 1] * a[1 * 3 + j] + m[i * 3 + 2] * a[2 * 3 + j];
+            }
+        }
+        this._transform = result;
+    }
+    _drawShape(verts, colorOrGradient) {
+        if (colorOrGradient instanceof Gradient) {
+            this.renderer.drawGradient(verts, colorOrGradient, this.globalCompositeOperation, this._transform);
+        }
+        else {
+            this.renderer.draw(verts, this.parseColor(colorOrGradient), this.globalCompositeOperation, this._transform);
+        }
+    }
+    _renderText(text, x, y, maxWidth, stroke) {
+        this._syncToOffscreen();
+        const ctx = this._offCtx;
+        const metrics = ctx.measureText(text);
+        const padding = 2;
+        const baselineOffY = metrics.fontBoundingBoxAscent + padding;
+        const totalH = metrics.fontBoundingBoxAscent + metrics.fontBoundingBoxDescent + 2 * padding;
+        const w = Math.ceil(metrics.width + 2 * padding);
+        const h = Math.ceil(Math.max(totalH, 1));
+        if (w <= 0 || h <= 0)
+            return;
+        const dpr = window.devicePixelRatio || 1;
+        this._offscreen.width = Math.ceil(w * dpr);
+        this._offscreen.height = Math.ceil(h * dpr);
+        this._syncToOffscreen();
+        ctx.save();
+        ctx.scale(dpr, dpr);
+        const args = [text, padding, baselineOffY];
+        if (maxWidth !== undefined)
+            args.push(maxWidth);
+        ctx.fillText(...args);
+        if (stroke)
+            ctx.strokeText(...args);
+        ctx.restore();
+        const drawX = x - padding;
+        const drawY = y - baselineOffY;
+        const adjustedX = this._applyTextAlignX(drawX, metrics);
+        this.drawImage(this._offscreen, adjustedX, drawY, w, h);
+    }
+    _syncToOffscreen() {
+        const ctx = this._offCtx;
+        ctx.font = this.font;
+        ctx.fillStyle = this.fillStyle instanceof Gradient ? this.fillStyle.toCanvasGradient(ctx) : this.fillStyle;
+        ctx.strokeStyle = this.strokeStyle instanceof Gradient ? this.strokeStyle.toCanvasGradient(ctx) : this.strokeStyle;
+        ctx.lineWidth = this.lineWidth;
+        ctx.globalAlpha = this.globalAlpha;
+        ctx.textAlign = 'left';
+        ctx.textBaseline = this.textBaseline;
+        ctx.letterSpacing = this.letterSpacing;
+        ctx.direction = this.direction;
+    }
+    _applyTextAlignX(x, metrics) {
+        const w = metrics.width;
+        const isRTL = this.direction === 'rtl';
+        switch (this.textAlign) {
+            case 'center': return x - w / 2;
+            case 'end': return isRTL ? x : x - w;
+            case 'right': return x - w;
+            case 'start': return isRTL ? x - w : x;
+            default: return x;
+        }
+    }
+    parseColor(color) {
+        const trimmed = color.trim().toLowerCase();
+        if (trimmed in NAMED_COLORS) {
+            const c = NAMED_COLORS[trimmed];
+            return [c[0], c[1], c[2], c[3] * this.globalAlpha];
+        }
+        const hex = trimmed.match(/^#([0-9a-f]{3,8})$/);
+        if (hex) {
+            const h = hex[1];
+            if (h.length === 3) {
+                return [
+                    parseInt(h[0] + h[0], 16) / 255,
+                    parseInt(h[1] + h[1], 16) / 255,
+                    parseInt(h[2] + h[2], 16) / 255,
+                    this.globalAlpha,
+                ];
+            }
+            if (h.length === 6) {
+                return [
+                    parseInt(h.slice(0, 2), 16) / 255,
+                    parseInt(h.slice(2, 4), 16) / 255,
+                    parseInt(h.slice(4, 6), 16) / 255,
+                    this.globalAlpha,
+                ];
+            }
+            if (h.length === 8) {
+                return [
+                    parseInt(h.slice(0, 2), 16) / 255,
+                    parseInt(h.slice(2, 4), 16) / 255,
+                    parseInt(h.slice(4, 6), 16) / 255,
+                    parseInt(h.slice(6, 8), 16) / 255 * this.globalAlpha,
+                ];
+            }
+        }
+        const rgb = trimmed.match(/^rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(?:,\s*([\d.]+)\s*)?\)$/);
+        if (rgb) {
+            return [
+                parseInt(rgb[1], 10) / 255,
+                parseInt(rgb[2], 10) / 255,
+                parseInt(rgb[3], 10) / 255,
+                (rgb[4] ? parseFloat(rgb[4]) : 1) * this.globalAlpha,
+            ];
+        }
+        return [0, 0, 0, this.globalAlpha];
+    }
+}
+function flattenVerts(verts) {
+    const arr = new Float32Array(verts.length * 2);
+    for (let i = 0; i < verts.length; i++) {
+        arr[i * 2] = verts[i].x;
+        arr[i * 2 + 1] = verts[i].y;
+    }
+    return arr;
+}
+function getSourceWidth(source) {
+    if (source instanceof HTMLVideoElement)
+        return source.videoWidth;
+    return source.width;
+}
+function getSourceHeight(source) {
+    if (source instanceof HTMLVideoElement)
+        return source.videoHeight;
+    return source.height;
+}

package/dist/renderer.d.ts

@@ -0,0 +1,55 @@
+import { Gradient } from './gradient.js';
+export declare class WebGLRenderer {
+    private gl;
+    private canvas;
+    private program;
+    private buffer;
+    private aPosition;
+    private uResolution;
+    private uColor;
+    private uTransform;
+    private texProgram;
+    private texBuffer;
+    private aTexCoords;
+    private uTexResolution;
+    private uTexture;
+    private uTexAlpha;
+    private uTexTransform;
+    private screenTex;
+    private srcTex;
+    private screenW;
+    private screenH;
+    private mulProgram;
+    private aMulPosition;
+    private aMulTexCoords;
+    private uMulResolution;
+    private uSrcTexture;
+    private uDstTexture;
+    private uMulTransform;
+    private gradProgram;
+    private aGradPosition;
+    private uGradResolution;
+    private uGradTransform;
+    private uGradP0;
+    private uGradP1;
+    private uGradTex;
+    private uGradAlpha;
+    constructor(canvas: HTMLCanvasElement);
+    resize(): void;
+    clear(): void;
+    readPixels(x: number, y: number, w: number, h: number): Uint8Array;
+    private captureScreen;
+    private drawScreenTexture;
+    private drawCompositeShader;
+    private _drawShaderComposite;
+    private _drawTextureShaderComposite;
+    draw(vertices: Float32Array, color: [number, number, number, number], compositeOp: string, transform: Float32Array): void;
+    drawGradient(vertices: Float32Array, gradient: Gradient, compositeOp: string, transform: Float32Array): void;
+    private drawGradientFBO;
+    createTexture(source: TexImageSource): WebGLTexture;
+    updateTexture(tex: WebGLTexture, source: TexImageSource): void;
+    drawTexture(texture: WebGLTexture, sx: number, sy: number, sw: number, sh: number, dx: number, dy: number, dw: number, dh: number, texW: number, texH: number, alpha: number, compositeOp: string, transform: Float32Array): void;
+    clearRect(x: number, y: number, w: number, h: number): void;
+    private createProgram;
+    private compileShader;
+}