nanovgjs 0.1.0

package/example.js

@@ -0,0 +1,1386 @@
+let ctx = null;
+let premult = 0;
+let canvas = null;
+let gl = null;
+let mx = null;
+let my = null;
+let demoFontsReady = false;
+let demoFontsLoading = null;
+let demoImages = [];
+let perfGraph = {
+    style: 0,
+    name: "Frame Time",
+    values: new Array(100).fill(0),
+    head: 0
+};
+let prevFrameTime = 0;
+let inputControls = [];
+let inputMeta = {};
+let inputState = {
+    activeId: null,
+    caret: 0,
+    blink: 0,
+    values: {
+        "login:email": "",
+        "login:password": "",
+        "diameter": "123.00",
+    },
+};
+const ICON_SEARCH = 0x1F50D;
+const ICON_CIRCLED_CROSS = 0x2716;
+const ICON_CHEVRON_RIGHT = 0xE75E;
+const ICON_CHECK = 0x2713;
+const ICON_LOGIN = 0xE740;
+const ICON_TRASH = 0xE729;
+const GRAPH_RENDER_FPS = 0;
+const GRAPH_HISTORY_COUNT = 100;
+
+function renderOriginalDemo(mx, my, width, height, t, blowup) {
+    drawEyes(width - 250, 50, 150, 100, mx, my, t);
+    drawParagraph(width - 450, 50, 150, 100, mx, my);
+    drawGraph(0, height / 2, width, height / 2, t);
+    drawColorwheel(width - 300, height - 300, 250, 250, t);
+    drawLines(120, height - 50, 600, 50, t);
+    drawWidths(10, 50, 30);
+    drawCaps(10, 300, 30);
+    drawScissor(50, height - 80, t);
+    ctx.nvgSave();
+    if (blowup) {
+        ctx.nvgRotate(Math.sin(t * 0.3) * 5.0 / 180.0 * Math.PI);
+        ctx.nvgScale(2.0, 2.0);
+    }
+    drawWidgetDemo(50, 50, t);
+    ctx.nvgRestore();
+}
+
+function ensureDemoFonts() {
+    if (!ctx) return Promise.resolve(false);
+    if (demoFontsReady) return Promise.resolve(true);
+    if (demoFontsLoading) return demoFontsLoading;
+
+    const sansId = ctx.nvgCreateFont("sans", "example/Roboto-Regular.ttf");
+    const boldId = ctx.nvgCreateFont("sans-bold", "example/Roboto-Bold.ttf");
+    const iconsId = ctx.nvgCreateFont("icons", "example/entypo.ttf");
+    const fontIds = [sansId, boldId, iconsId].filter((id) => id >= 0);
+    const loaders = fontIds
+        .map((id) => ctx.fs && ctx.fs.fonts[id] ? ctx.fs.fonts[id].loading : null)
+        .filter(Boolean);
+
+    demoFontsLoading = Promise.all(loaders).then(() => {
+        demoFontsReady = true;
+        demoFontsLoading = null;
+        return true;
+    }).catch(() => {
+        demoFontsLoading = null;
+        return false;
+    });
+
+    return demoFontsLoading;
+}
+
+function clampf(v, mn, mx) {
+    return Math.max(mn, Math.min(mx, v));
+}
+
+function pointInRect(px, py, x, y, w, h) {
+    return px >= x && px <= x + w && py >= y && py <= y + h;
+}
+
+function beginInputFrame(now) {
+    inputControls = [];
+    inputMeta = {};
+    inputState.blink = now;
+}
+
+function registerInput(control) {
+    inputControls.push(control);
+    inputMeta[control.id] = control;
+}
+
+function hitInputControl(px, py) {
+    for (let i = inputControls.length - 1; i >= 0; i--) {
+        const c = inputControls[i];
+        if (pointInRect(px, py, c.x, c.y, c.w, c.h)) return c;
+    }
+    return null;
+}
+
+function setActiveInput(control) {
+    if (!control) {
+        inputState.activeId = null;
+        return;
+    }
+    inputState.activeId = control.id;
+    const value = inputState.values[control.id] ?? "";
+    inputState.caret = value.length;
+}
+
+function insertInputText(id, textValue) {
+    const value = inputState.values[id] ?? "";
+    const caret = inputState.caret;
+    inputState.values[id] = value.slice(0, caret) + textValue + value.slice(caret);
+    inputState.caret = caret + textValue.length;
+}
+
+function deleteInputLeft(id) {
+    const value = inputState.values[id] ?? "";
+    const caret = inputState.caret;
+    if (caret <= 0) return;
+    inputState.values[id] = value.slice(0, caret - 1) + value.slice(caret);
+    inputState.caret = caret - 1;
+}
+
+function deleteInputRight(id) {
+    const value = inputState.values[id] ?? "";
+    const caret = inputState.caret;
+    if (caret >= value.length) return;
+    inputState.values[id] = value.slice(0, caret) + value.slice(caret + 1);
+}
+
+function adjustNumericInput(control, dir, scale = 1) {
+    const id = control.id;
+    const step = control.step ?? 1;
+    const decimals = control.decimals ?? 0;
+    const min = control.min ?? -Infinity;
+    const max = control.max ?? Infinity;
+    const current = parseFloat(inputState.values[id] ?? "0");
+    const base = Number.isFinite(current) ? current : 0;
+    const next = clampf(base + step * dir * scale, min, max);
+    inputState.values[id] = decimals > 0 ? next.toFixed(decimals) : `${Math.round(next)}`;
+    inputState.caret = inputState.values[id].length;
+}
+
+function handleInputKeydown(event) {
+    const id = inputState.activeId;
+    if (!id) return;
+    const control = inputMeta[id];
+    if (!control) return;
+
+    if (event.key === "Escape") {
+        inputState.activeId = null;
+        event.preventDefault();
+        return;
+    }
+
+    if (control.type === "number" && (event.key === "ArrowUp" || event.key === "ArrowDown")) {
+        adjustNumericInput(control, event.key === "ArrowUp" ? 1 : -1, event.shiftKey ? 10 : 1);
+        event.preventDefault();
+        return;
+    }
+
+    if (event.key === "ArrowLeft") {
+        inputState.caret = Math.max(0, inputState.caret - 1);
+        event.preventDefault();
+        return;
+    }
+
+    if (event.key === "ArrowRight") {
+        const value = inputState.values[id] ?? "";
+        inputState.caret = Math.min(value.length, inputState.caret + 1);
+        event.preventDefault();
+        return;
+    }
+
+    if (event.key === "Home") {
+        inputState.caret = 0;
+        event.preventDefault();
+        return;
+    }
+
+    if (event.key === "End") {
+        const value = inputState.values[id] ?? "";
+        inputState.caret = value.length;
+        event.preventDefault();
+        return;
+    }
+
+    if (event.key === "Backspace") {
+        deleteInputLeft(id);
+        event.preventDefault();
+        return;
+    }
+
+    if (event.key === "Delete") {
+        deleteInputRight(id);
+        event.preventDefault();
+        return;
+    }
+
+    if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+        if (control.type === "number") {
+            const value = inputState.values[id] ?? "";
+            if (event.key === "-" && inputState.caret === 0 && !value.includes("-")) {
+                insertInputText(id, event.key);
+                event.preventDefault();
+            } else if (event.key === "." && !value.includes(".")) {
+                insertInputText(id, event.key);
+                event.preventDefault();
+            } else if ("0123456789".includes(event.key)) {
+                insertInputText(id, event.key);
+                event.preventDefault();
+            }
+            return;
+        }
+        insertInputText(id, event.key);
+        event.preventDefault();
+    }
+}
+
+function updateGraph(graph, frameTime) {
+    graph.head = (graph.head + 1) % GRAPH_HISTORY_COUNT;
+    graph.values[graph.head] = frameTime;
+}
+
+function getGraphAverage(graph) {
+    let avg = 0;
+    for (let i = 0; i < GRAPH_HISTORY_COUNT; i++) avg += graph.values[i];
+    return avg / GRAPH_HISTORY_COUNT;
+}
+
+function renderGraph(x, y, graph) {
+    const avg = getGraphAverage(graph);
+    const w = 200;
+    const h = 35;
+
+    ctx.nvgBeginPath();
+    ctx.nvgRect(x, y, w, h);
+    ctx.nvgFillColor(NVGcolor.nvgRGBA(0, 0, 0, 128));
+    ctx.nvgFill();
+
+    ctx.nvgBeginPath();
+    for (let i = 0; i < GRAPH_HISTORY_COUNT; i++) {
+        let v = 1.0 / (0.00001 + graph.values[(graph.head + i) % GRAPH_HISTORY_COUNT]);
+        if (v > 80.0) v = 80.0;
+        const vx = x + (i / (GRAPH_HISTORY_COUNT - 1)) * w;
+        const vy = y + h - (v / 80.0) * h;
+        if (i === 0) ctx.nvgMoveTo(vx, vy);
+        else ctx.nvgLineTo(vx, vy);
+    }
+    ctx.nvgLineTo(x + w, y + h);
+    ctx.nvgLineTo(x, y + h);
+    ctx.nvgFillColor(NVGcolor.nvgRGBA(255, 192, 0, 128));
+    ctx.nvgFill();
+
+    ctx.nvgFontFace("sans");
+    ctx.nvgFontSize(12.0);
+    ctx.nvgTextAlign(NVG_ALIGN_LEFT | NVG_ALIGN_TOP);
+    ctx.nvgFillColor(NVGcolor.nvgRGBA(240, 240, 240, 192));
+    ctx.nvgText(x + 3, y + 3, graph.name, null);
+
+    ctx.nvgFontSize(15.0);
+    ctx.nvgTextAlign(NVG_ALIGN_RIGHT | NVG_ALIGN_TOP);
+    ctx.nvgFillColor(NVGcolor.nvgRGBA(240, 240, 240, 255));
+    ctx.nvgText(x + w - 3, y + 3, `${(1.0 / Math.max(avg, 0.00001)).toFixed(2)} FPS`, null);
+
+    ctx.nvgFontSize(13.0);
+    ctx.nvgTextAlign(NVG_ALIGN_RIGHT | NVG_ALIGN_BASELINE);
+    ctx.nvgFillColor(NVGcolor.nvgRGBA(240, 240, 240, 160));
+    ctx.nvgText(x + w - 3, y + h - 3, `${(avg * 1000.0).toFixed(2)} ms`, null);
+}
+
+function loadImageTexture(path) {
+    return new Promise((resolve) => {
+        const img = new Image();
+        img.crossOrigin = "anonymous";
+        img.onload = function() {
+            const id = ctx.params.renderCreateTexture(
+                ctx.params.userPtr,
+                NVG_TEXTURE_RGBA,
+                img.naturalWidth,
+                img.naturalHeight,
+                0,
+                img
+            );
+            resolve(id);
+        };
+        img.onerror = function() {
+            resolve(0);
+        };
+        img.src = path;
+    });
+}
+
+function loadDemoImages() {
+    if (!ctx) return;
+    demoImages = new Array(12).fill(0);
+    for (let i = 0; i < 12; i++) {
+        const index = i;
+        loadImageTexture(`example/images/image${i + 1}.jpg`).then((id) => {
+            demoImages[index] = id;
+        });
+    }
+}
+
+function cpToUTF8(cp) {
+    return String.fromCodePoint(cp);
+}
+
+function isBlack(col) {
+    return col.r === 0 && col.g === 0 && col.b === 0 && col.a === 0;
+}
+
+function drawWindow(title, x, y, w, h) {
+    const cornerRadius = 3.0;
+    ctx.nvgSave();
+    ctx.nvgBeginPath();
+    ctx.nvgRoundedRect(x, y, w, h, cornerRadius);
+    ctx.nvgFillColor(NVGcolor.nvgRGBA(28, 30, 34, 192));
+    ctx.nvgFill();
+
+    let shadowPaint = ctx.nvgBoxGradient(x, y + 2, w, h, cornerRadius * 2, 10, NVGcolor.nvgRGBA(0, 0, 0, 128), NVGcolor.nvgRGBA(0, 0, 0, 0));
+    ctx.nvgBeginPath();
+    ctx.nvgRect(x - 10, y - 10, w + 20, h + 30);
+    ctx.nvgRoundedRect(x, y, w, h, cornerRadius);
+    ctx.nvgPathWinding(NVG_HOLE);
+    ctx.nvgFillPaint(shadowPaint);
+    ctx.nvgFill();
+
+    let headerPaint = ctx.nvgLinearGradient(x, y, x, y + 15, NVGcolor.nvgRGBA(255, 255, 255, 8), NVGcolor.nvgRGBA(0, 0, 0, 16));
+    ctx.nvgBeginPath();
+    ctx.nvgRoundedRect(x + 1, y + 1, w - 2, 30, cornerRadius - 1);
+    ctx.nvgFillPaint(headerPaint);
+    ctx.nvgFill();
+    ctx.nvgBeginPath();
+    ctx.nvgMoveTo(x + 0.5, y + 30.5);
+    ctx.nvgLineTo(x + w - 0.5, y + 30.5);
+    ctx.nvgStrokeColor(NVGcolor.nvgRGBA(0, 0, 0, 32));
+    ctx.nvgStroke();
+
+    ctx.nvgFontSize(15);
+    ctx.nvgFontFace("sans-bold");
+    ctx.nvgTextAlign(NVG_ALIGN_CENTER | NVG_ALIGN_MIDDLE);
+    ctx.nvgFontBlur(2);
+    ctx.nvgFillColor(NVGcolor.nvgRGBA(0, 0, 0, 128));
+    ctx.nvgText(x + w * 0.5, y + 17, title, null);
+    ctx.nvgFontBlur(0);
+    ctx.nvgFillColor(NVGcolor.nvgRGBA(220, 220, 220, 160));
+    ctx.nvgText(x + w * 0.5, y + 16, title, null);
+    ctx.nvgRestore();
+}
+
+function drawSearchBox(text, x, y, w, h) {
+    const cornerRadius = h * 0.5 - 1;
+    const bg = ctx.nvgBoxGradient(x, y + 1.5, w, h, h * 0.5, 5, NVGcolor.nvgRGBA(0, 0, 0, 16), NVGcolor.nvgRGBA(0, 0, 0, 92));
+    ctx.nvgBeginPath();
+    ctx.nvgRoundedRect(x, y, w, h, cornerRadius);
+    ctx.nvgFillPaint(bg);
+    ctx.nvgFill();
+
+    ctx.nvgFontSize(h * 1.3);
+    ctx.nvgFontFace("icons");
+    ctx.nvgFillColor(NVGcolor.nvgRGBA(255, 255, 255, 64));
+    ctx.nvgTextAlign(NVG_ALIGN_CENTER | NVG_ALIGN_MIDDLE);
+    ctx.nvgText(x + h * 0.55, y + h * 0.55, cpToUTF8(ICON_SEARCH), null);
+
+    ctx.nvgFontSize(17);
+    ctx.nvgFontFace("sans");
+    ctx.nvgFillColor(NVGcolor.nvgRGBA(255, 255, 255, 32));
+    ctx.nvgTextAlign(NVG_ALIGN_LEFT | NVG_ALIGN_MIDDLE);
+    ctx.nvgText(x + h * 1.05, y + h * 0.5, text, null);
+
+    ctx.nvgFontSize(h * 1.3);
+    ctx.nvgFontFace("icons");
+    ctx.nvgTextAlign(NVG_ALIGN_CENTER | NVG_ALIGN_MIDDLE);
+    ctx.nvgText(x + w - h * 0.55, y + h * 0.55, cpToUTF8(ICON_CIRCLED_CROSS), null);
+}
+
+function drawDropDown(text, x, y, w, h) {
+    const cornerRadius = 4.0;
+    const bg = ctx.nvgLinearGradient(x, y, x, y + h, NVGcolor.nvgRGBA(255, 255, 255, 16), NVGcolor.nvgRGBA(0, 0, 0, 16));
+    ctx.nvgBeginPath();
+    ctx.nvgRoundedRect(x + 1, y + 1, w - 2, h - 2, cornerRadius - 1);
+    ctx.nvgFillPaint(bg);
+    ctx.nvgFill();
+    ctx.nvgBeginPath();
+    ctx.nvgRoundedRect(x + 0.5, y + 0.5, w - 1, h - 1, cornerRadius - 0.5);
+    ctx.nvgStrokeColor(NVGcolor.nvgRGBA(0, 0, 0, 48));
+    ctx.nvgStroke();
+
+    ctx.nvgFontSize(17);
+    ctx.nvgFontFace("sans");
+    ctx.nvgFillColor(NVGcolor.nvgRGBA(255, 255, 255, 160));
+    ctx.nvgTextAlign(NVG_ALIGN_LEFT | NVG_ALIGN_MIDDLE);
+    ctx.nvgText(x + h * 0.3, y + h * 0.5, text, null);
+
+    ctx.nvgFontSize(h * 1.3);
+    ctx.nvgFontFace("icons");
+    ctx.nvgFillColor(NVGcolor.nvgRGBA(255, 255, 255, 64));
+    ctx.nvgTextAlign(NVG_ALIGN_CENTER | NVG_ALIGN_MIDDLE);
+    ctx.nvgText(x + w - h * 0.5, y + h * 0.5, cpToUTF8(ICON_CHEVRON_RIGHT), null);
+}
+
+function drawLabel(text, x, y, w, h) {
+    ctx.nvgFontSize(15);
+    ctx.nvgFontFace("sans");
+    ctx.nvgFillColor(NVGcolor.nvgRGBA(255, 255, 255, 128));
+    ctx.nvgTextAlign(NVG_ALIGN_LEFT | NVG_ALIGN_MIDDLE);
+    ctx.nvgText(x, y + h * 0.5, text, null);
+}
+
+function drawEditBoxBase(x, y, w, h, strokeColor = null) {
+    const bg = ctx.nvgBoxGradient(x + 1, y + 2.5, w - 2, h - 2, 3, 4, NVGcolor.nvgRGBA(255, 255, 255, 32), NVGcolor.nvgRGBA(32, 32, 32, 32));
+    ctx.nvgBeginPath();
+    ctx.nvgRoundedRect(x + 1, y + 1, w - 2, h - 2, 3);
+    ctx.nvgFillPaint(bg);
+    ctx.nvgFill();
+    ctx.nvgBeginPath();
+    ctx.nvgRoundedRect(x + 0.5, y + 0.5, w - 1, h - 1, 3.5);
+    ctx.nvgStrokeColor(strokeColor ?? NVGcolor.nvgRGBA(0, 0, 0, 48));
+    ctx.nvgStroke();
+}
+
+function drawEditBox(id, placeholder, x, y, w, h, options = {}) {
+    const isActive = inputState.activeId === id;
+    drawEditBoxBase(x, y, w, h, isActive ? NVGcolor.nvgRGBA(126, 188, 255, 160) : null);
+    const value = inputState.values[id] ?? "";
+    const display = value.length ?
+        (options.password ? "•".repeat(value.length) : value) :
+        placeholder;
+    ctx.nvgFontSize(17);
+    ctx.nvgFontFace("sans");
+    ctx.nvgFillColor(value.length ? NVGcolor.nvgRGBA(255, 255, 255, 160) : NVGcolor.nvgRGBA(255, 255, 255, 64));
+    ctx.nvgTextAlign(NVG_ALIGN_LEFT | NVG_ALIGN_MIDDLE);
+    ctx.nvgText(x + h * 0.3, y + h * 0.5, display, null);
+
+    if (isActive && Math.floor(inputState.blink * 2) % 2 === 0) {
+        const caretText = (options.password ? "•".repeat(value.length) : value).slice(0, inputState.caret);
+        const caretW = caretText ? ctx.nvgTextBounds(0, 0, caretText, null, null) : 0;
+        const caretX = Math.min(x + w - 6, x + h * 0.3 + caretW);
+        ctx.nvgBeginPath();
+        ctx.nvgMoveTo(caretX, y + 5);
+        ctx.nvgLineTo(caretX, y + h - 5);
+        ctx.nvgStrokeWidth(1);
+        ctx.nvgStrokeColor(NVGcolor.nvgRGBA(240, 240, 240, 200));
+        ctx.nvgStroke();
+    }
+
+    registerInput({
+        id,
+        type: options.password ? "password" : "text",
+        x,
+        y,
+        w,
+        h
+    });
+}
+
+function drawEditBoxNum(id, units, x, y, w, h, options = {}) {
+    const isActive = inputState.activeId === id;
+    drawEditBoxBase(x, y, w, h, isActive ? NVGcolor.nvgRGBA(126, 188, 255, 160) : null);
+    ctx.nvgFontSize(15);
+    ctx.nvgFontFace("sans");
+    ctx.nvgFillColor(NVGcolor.nvgRGBA(255, 255, 255, 64));
+    ctx.nvgTextAlign(NVG_ALIGN_RIGHT | NVG_ALIGN_MIDDLE);
+    const unitsW = ctx.nvgTextBounds(0, 0, units, null, null);
+    ctx.nvgText(x + w - h * 0.3, y + h * 0.5, units, null);
+    ctx.nvgFontSize(17);
+    ctx.nvgFillColor(NVGcolor.nvgRGBA(255, 255, 255, 128));
+    const value = inputState.values[id] ?? "";
+    const showValue = value.length ? value : "0";
+    const textRight = x + w - unitsW - h * 0.5;
+    ctx.nvgTextAlign(NVG_ALIGN_RIGHT | NVG_ALIGN_MIDDLE);
+    ctx.nvgText(textRight, y + h * 0.5, showValue, null);
+
+    if (isActive && Math.floor(inputState.blink * 2) % 2 === 0) {
+        const valueW = showValue ? ctx.nvgTextBounds(0, 0, showValue, null, null) : 0;
+        const caretText = showValue.slice(0, inputState.caret);
+        const caretW = caretText ? ctx.nvgTextBounds(0, 0, caretText, null, null) : 0;
+        const textLeft = textRight - valueW;
+        const caretX = Math.min(x + w - unitsW - 6, textLeft + caretW);
+        ctx.nvgBeginPath();
+        ctx.nvgMoveTo(caretX, y + 5);
+        ctx.nvgLineTo(caretX, y + h - 5);
+        ctx.nvgStrokeWidth(1);
+        ctx.nvgStrokeColor(NVGcolor.nvgRGBA(240, 240, 240, 200));
+        ctx.nvgStroke();
+    }
+
+    registerInput({
+        id,
+        type: "number",
+        x,
+        y,
+        w,
+        h,
+        step: options.step ?? 1,
+        min: options.min ?? -Infinity,
+        max: options.max ?? Infinity,
+        decimals: options.decimals ?? 0,
+    });
+}
+
+function drawCheckBox(text, x, y, w, h) {
+    drawLabel(text, x + 28, y, w, h);
+    const bg = ctx.nvgBoxGradient(x + 1, y + Math.floor(h * 0.5) - 8, 18, 18, 3, 3, NVGcolor.nvgRGBA(0, 0, 0, 32), NVGcolor.nvgRGBA(0, 0, 0, 92));
+    ctx.nvgBeginPath();
+    ctx.nvgRoundedRect(x + 1, y + Math.floor(h * 0.5) - 9, 18, 18, 3);
+    ctx.nvgFillPaint(bg);
+    ctx.nvgFill();
+    ctx.nvgFontSize(33);
+    ctx.nvgFontFace("icons");
+    ctx.nvgFillColor(NVGcolor.nvgRGBA(255, 255, 255, 128));
+    ctx.nvgTextAlign(NVG_ALIGN_CENTER | NVG_ALIGN_MIDDLE);
+    ctx.nvgText(x + 11, y + h * 0.5, cpToUTF8(ICON_CHECK), null);
+}
+
+function drawButton(preicon, text, x, y, w, h, col) {
+    const cornerRadius = 4.0;
+    const bg = ctx.nvgLinearGradient(x, y, x, y + h, NVGcolor.nvgRGBA(255, 255, 255, isBlack(col) ? 16 : 32), NVGcolor.nvgRGBA(0, 0, 0, isBlack(col) ? 16 : 32));
+    ctx.nvgBeginPath();
+    ctx.nvgRoundedRect(x + 1, y + 1, w - 2, h - 2, cornerRadius - 1);
+    if (!isBlack(col)) {
+        ctx.nvgFillColor(col);
+        ctx.nvgFill();
+    }
+    ctx.nvgFillPaint(bg);
+    ctx.nvgFill();
+    ctx.nvgBeginPath();
+    ctx.nvgRoundedRect(x + 0.5, y + 0.5, w - 1, h - 1, cornerRadius - 0.5);
+    ctx.nvgStrokeColor(NVGcolor.nvgRGBA(0, 0, 0, 48));
+    ctx.nvgStroke();
+
+    ctx.nvgFontSize(17);
+    ctx.nvgFontFace("sans-bold");
+    const tw = ctx.nvgTextBounds(0, 0, text, null, null);
+    let iw = 0;
+    if (preicon !== 0) {
+        ctx.nvgFontSize(h * 1.3);
+        ctx.nvgFontFace("icons");
+        iw = ctx.nvgTextBounds(0, 0, cpToUTF8(preicon), null, null) + h * 0.15;
+        ctx.nvgFillColor(NVGcolor.nvgRGBA(255, 255, 255, 96));
+        ctx.nvgTextAlign(NVG_ALIGN_LEFT | NVG_ALIGN_MIDDLE);
+        ctx.nvgText(x + w * 0.5 - tw * 0.5 - iw * 0.75, y + h * 0.5, cpToUTF8(preicon), null);
+    }
+
+    ctx.nvgFontSize(17);
+    ctx.nvgFontFace("sans-bold");
+    ctx.nvgTextAlign(NVG_ALIGN_LEFT | NVG_ALIGN_MIDDLE);
+    ctx.nvgFillColor(NVGcolor.nvgRGBA(0, 0, 0, 160));
+    ctx.nvgText(x + w * 0.5 - tw * 0.5 + iw * 0.25, y + h * 0.5 - 1, text, null);
+    ctx.nvgFillColor(NVGcolor.nvgRGBA(255, 255, 255, 160));
+    ctx.nvgText(x + w * 0.5 - tw * 0.5 + iw * 0.25, y + h * 0.5, text, null);
+}
+
+function drawSlider(pos, x, y, w, h) {
+    const cy = y + Math.floor(h * 0.5);
+    const kr = Math.floor(h * 0.25);
+    ctx.nvgSave();
+    let bg = ctx.nvgBoxGradient(x, cy - 1, w, 4, 2, 2, NVGcolor.nvgRGBA(0, 0, 0, 32), NVGcolor.nvgRGBA(0, 0, 0, 128));
+    ctx.nvgBeginPath();
+    ctx.nvgRoundedRect(x, cy - 2, w, 4, 2);
+    ctx.nvgFillPaint(bg);
+    ctx.nvgFill();
+
+    bg = ctx.nvgRadialGradient(x + Math.floor(pos * w), cy + 1, kr - 3, kr + 3, NVGcolor.nvgRGBA(0, 0, 0, 64), NVGcolor.nvgRGBA(0, 0, 0, 0));
+    ctx.nvgBeginPath();
+    ctx.nvgRect(x + Math.floor(pos * w) - kr - 5, cy - kr - 5, kr * 2 + 10, kr * 2 + 13);
+    ctx.nvgCircle(x + Math.floor(pos * w), cy, kr);
+    ctx.nvgPathWinding(NVG_HOLE);
+    ctx.nvgFillPaint(bg);
+    ctx.nvgFill();
+
+    let knob = ctx.nvgLinearGradient(x, cy - kr, x, cy + kr, NVGcolor.nvgRGBA(255, 255, 255, 16), NVGcolor.nvgRGBA(0, 0, 0, 16));
+    ctx.nvgBeginPath();
+    ctx.nvgCircle(x + Math.floor(pos * w), cy, kr - 1);
+    ctx.nvgFillColor(NVGcolor.nvgRGBA(40, 43, 48, 255));
+    ctx.nvgFill();
+    ctx.nvgFillPaint(knob);
+    ctx.nvgFill();
+    ctx.nvgBeginPath();
+    ctx.nvgCircle(x + Math.floor(pos * w), cy, kr - 0.5);
+    ctx.nvgStrokeColor(NVGcolor.nvgRGBA(0, 0, 0, 92));
+    ctx.nvgStroke();
+    ctx.nvgRestore();
+}
+
+function drawThumbnails(x, y, w, h, images, nimages, t) {
+    const cornerRadius = 3.0;
+    const thumb = 60.0;
+    const arry = 30.5;
+    const stackh = (nimages / 2) * (thumb + 10) + 10;
+    const u = (1 + Math.cos(t * 0.5)) * 0.5;
+    const u2 = (1 - Math.cos(t * 0.2)) * 0.5;
+
+    ctx.nvgSave();
+    let shadowPaint = ctx.nvgBoxGradient(x, y + 4, w, h, cornerRadius * 2, 20, NVGcolor.nvgRGBA(0, 0, 0, 128), NVGcolor.nvgRGBA(0, 0, 0, 0));
+    ctx.nvgBeginPath();
+    ctx.nvgRect(x - 10, y - 10, w + 20, h + 30);
+    ctx.nvgRoundedRect(x, y, w, h, cornerRadius);
+    ctx.nvgPathWinding(NVG_HOLE);
+    ctx.nvgFillPaint(shadowPaint);
+    ctx.nvgFill();
+
+    ctx.nvgBeginPath();
+    ctx.nvgRoundedRect(x, y, w, h, cornerRadius);
+    ctx.nvgMoveTo(x - 10, y + arry);
+    ctx.nvgLineTo(x + 1, y + arry - 11);
+    ctx.nvgLineTo(x + 1, y + arry + 11);
+    ctx.nvgFillColor(NVGcolor.nvgRGBA(200, 200, 200, 255));
+    ctx.nvgFill();
+
+    ctx.nvgSave();
+    ctx.nvgScissor(x, y, w, h);
+    ctx.nvgTranslate(0, -(stackh - h) * u);
+
+    const dv = nimages > 1 ? 1.0 / (nimages - 1) : 1.0;
+    for (let i = 0; i < nimages; i++) {
+        const imageId = images[i];
+        let tx = x + 10 + (i % 2) * (thumb + 10);
+        let ty = y + 10 + Math.floor(i / 2) * (thumb + 10);
+        let ix = 0;
+        let iy = 0;
+        let iw = thumb;
+        let ih = thumb;
+        let imgw = thumb;
+        let imgh = thumb;
+        if (imageId) {
+            [imgw, imgh] = ctx.nvgImageSize(imageId);
+            if (imgw > 0 && imgh > 0) {
+                if (imgw < imgh) {
+                    iw = thumb;
+                    ih = iw * imgh / imgw;
+                    iy = -(ih - thumb) * 0.5;
+                } else {
+                    ih = thumb;
+                    iw = ih * imgw / imgh;
+                    ix = -(iw - thumb) * 0.5;
+                }
+            }
+        }
+
+        const v = i * dv;
+        const a = Math.max(0, Math.min(1, (u2 - v) / dv));
+        if (a < 1.0) {
+            drawSpinner(tx + thumb * 0.5, ty + thumb * 0.5, thumb * 0.25, t);
+        }
+
+        if (imageId) {
+            const imgPaint = ctx.nvgImagePattern(tx + ix, ty + iy, iw, ih, 0, imageId, a);
+            ctx.nvgBeginPath();
+            ctx.nvgRoundedRect(tx, ty, thumb, thumb, 5);
+            ctx.nvgFillPaint(imgPaint);
+            ctx.nvgFill();
+        } else {
+            ctx.nvgBeginPath();
+            ctx.nvgRoundedRect(tx, ty, thumb, thumb, 5);
+            ctx.nvgFillColor(NVGcolor.nvgRGBA(150, 150, 150, 80));
+            ctx.nvgFill();
+        }
+
+        shadowPaint = ctx.nvgBoxGradient(tx - 1, ty, thumb + 2, thumb + 2, 5, 3, NVGcolor.nvgRGBA(0, 0, 0, 128), NVGcolor.nvgRGBA(0, 0, 0, 0));
+        ctx.nvgBeginPath();
+        ctx.nvgRect(tx - 5, ty - 5, thumb + 10, thumb + 10);
+        ctx.nvgRoundedRect(tx, ty, thumb, thumb, 6);
+        ctx.nvgPathWinding(NVG_HOLE);
+        ctx.nvgFillPaint(shadowPaint);
+        ctx.nvgFill();
+
+        ctx.nvgBeginPath();
+        ctx.nvgRoundedRect(tx + 0.5, ty + 0.5, thumb - 1, thumb - 1, 3.5);
+        ctx.nvgStrokeWidth(1.0);
+        ctx.nvgStrokeColor(NVGcolor.nvgRGBA(255, 255, 255, 192));
+        ctx.nvgStroke();
+    }
+    ctx.nvgRestore();
+
+    let fadePaint = ctx.nvgLinearGradient(x, y, x, y + 6, NVGcolor.nvgRGBA(200, 200, 200, 255), NVGcolor.nvgRGBA(200, 200, 200, 0));
+    ctx.nvgBeginPath();
+    ctx.nvgRect(x + 4, y, w - 8, 6);
+    ctx.nvgFillPaint(fadePaint);
+    ctx.nvgFill();
+
+    fadePaint = ctx.nvgLinearGradient(x, y + h, x, y + h - 6, NVGcolor.nvgRGBA(200, 200, 200, 255), NVGcolor.nvgRGBA(200, 200, 200, 0));
+    ctx.nvgBeginPath();
+    ctx.nvgRect(x + 4, y + h - 6, w - 8, 6);
+    ctx.nvgFillPaint(fadePaint);
+    ctx.nvgFill();
+
+    shadowPaint = ctx.nvgBoxGradient(x + w - 11, y + 5, 8, h - 8, 3, 4, NVGcolor.nvgRGBA(0, 0, 0, 32), NVGcolor.nvgRGBA(0, 0, 0, 92));
+    ctx.nvgBeginPath();
+    ctx.nvgRoundedRect(x + w - 12, y + 4, 8, h - 8, 3);
+    ctx.nvgFillPaint(shadowPaint);
+    ctx.nvgFill();
+
+    const scrollh = (h / stackh) * (h - 8);
+    shadowPaint = ctx.nvgBoxGradient(x + w - 13, y + 4 + (h - 8 - scrollh) * u - 1, 8, scrollh, 3, 4, NVGcolor.nvgRGBA(220, 220, 220, 255), NVGcolor.nvgRGBA(128, 128, 128, 255));
+    ctx.nvgBeginPath();
+    ctx.nvgRoundedRect(x + w - 11, y + 5 + (h - 8 - scrollh) * u, 6, scrollh - 2, 2);
+    ctx.nvgFillPaint(shadowPaint);
+    ctx.nvgFill();
+    ctx.nvgRestore();
+}
+
+function drawWidgetDemo(x, y, t) {
+    if (!demoFontsReady) {
+        drawWindow("Widgets `n Stuff", x, y, 300, 400);
+        return;
+    }
+    drawWindow("Widgets `n Stuff", x, y, 300, 400);
+    drawSearchBox("Search", x + 10, y + 45, 280, 25);
+    drawDropDown("Effects", x + 10, y + 85, 280, 28);
+    const popy = y + 99;
+    let cy = y + 130;
+    drawLabel("Login", x + 10, cy, 280, 20);
+    cy += 25;
+    drawEditBox("login:email", "Email", x + 10, cy, 280, 28);
+    cy += 35;
+    drawEditBox("login:password", "Password", x + 10, cy, 280, 28, {
+        password: true
+    });
+    cy += 38;
+    drawCheckBox("Remember me", x + 10, cy, 140, 28);
+    drawButton(ICON_LOGIN, "Sign in", x + 148, cy, 140, 28, NVGcolor.nvgRGBA(0, 96, 128, 255));
+    cy += 45;
+    drawLabel("Diameter", x + 10, cy, 280, 20);
+    cy += 25;
+    drawEditBoxNum("diameter", "px", x + 190, cy, 100, 28, {
+        step: 1,
+        min: 0,
+        max: 9999,
+        decimals: 2
+    });
+    drawSlider(0.4, x + 10, cy, 170, 28);
+    cy += 55;
+    drawButton(ICON_TRASH, "Delete", x + 10, cy, 160, 28, NVGcolor.nvgRGBA(128, 16, 8, 255));
+    drawButton(0, "Cancel", x + 180, cy, 110, 28, NVGcolor.nvgRGBA(0, 0, 0, 0));
+    drawThumbnails(x + 315, popy - 30, 160, 300, demoImages, 12, t);
+}
+
+function drawEyes(x, y, w, h, mx, my, t) {
+    let ex = w * 0.23;
+    let ey = h * 0.5;
+    let lx = x + ex;
+    let ly = y + ey;
+    let rx = x + w - ex;
+    let ry = y + ey;
+    let br = (ex < ey ? ex : ey) * 0.5;
+    let blink = 1 - Math.pow(Math.sin(t * 0.5), 200) * 0.8;
+
+    let bg = ctx.nvgLinearGradient(x, y + h * 0.5, x + w * 0.1, y + h, NVGcolor.nvgRGBA(0, 0, 0, 32), NVGcolor.nvgRGBA(0, 0, 0, 16));
+    ctx.nvgBeginPath();
+    ctx.nvgEllipse(lx + 3.0, ly + 16.0, ex, ey);
+    ctx.nvgEllipse(rx + 3.0, ry + 16.0, ex, ey);
+    ctx.nvgFillPaint(bg);
+    ctx.nvgFill();
+
+    bg = ctx.nvgLinearGradient(x, y + h * 0.25, x + w * 0.1, y + h, NVGcolor.nvgRGBA(220, 220, 220, 255), NVGcolor.nvgRGBA(128, 128, 128, 255));
+    ctx.nvgBeginPath();
+    ctx.nvgEllipse(lx, ly, ex, ey);
+    ctx.nvgEllipse(rx, ry, ex, ey);
+    ctx.nvgFillPaint(bg);
+    ctx.nvgFill();
+
+    let dx = (mx - rx) / (ex * 10);
+    let dy = (my - ry) / (ey * 10);
+    let d = Math.sqrt(dx * dx + dy * dy);
+    if (d > 1.0) {
+        dx /= d;
+        dy /= d;
+    }
+    dx *= ex * 0.4;
+    dy *= ey * 0.5;
+    ctx.nvgBeginPath();
+    ctx.nvgEllipse(lx + dx, ly + dy + ey * 0.25 * (1 - blink), br, br * blink);
+    ctx.nvgFillColor(NVGcolor.nvgRGBA(32, 32, 32, 255));
+    ctx.nvgFill();
+
+    dx = (mx - rx) / (ex * 10);
+    dy = (my - ry) / (ey * 10);
+    d = Math.sqrt(dx * dx + dy * dy);
+    if (d > 1.0) {
+        dx /= d;
+        dy /= d;
+    }
+    dx *= ex * 0.4;
+    dy *= ey * 0.5;
+    ctx.nvgBeginPath();
+    ctx.nvgEllipse(rx + dx, ry + dy + ey * 0.25 * (1 - blink), br, br * blink);
+    ctx.nvgFillColor(NVGcolor.nvgRGBA(32, 32, 32, 255));
+    ctx.nvgFill();
+
+    let gloss = ctx.nvgRadialGradient(lx - ex * 0.25, ly - ey * 0.5, ex * 0.1, ex * 0.75, NVGcolor.nvgRGBA(255, 255, 255, 128), NVGcolor.nvgRGBA(255, 255, 255, 0));
+    ctx.nvgBeginPath();
+    ctx.nvgEllipse(lx, ly, ex, ey);
+    ctx.nvgFillPaint(gloss);
+    ctx.nvgFill();
+
+    gloss = ctx.nvgRadialGradient(rx - ex * 0.25, ry - ey * 0.5, ex * 0.1, ex * 0.75, NVGcolor.nvgRGBA(255, 255, 255, 128), NVGcolor.nvgRGBA(255, 255, 255, 0));
+    ctx.nvgBeginPath();
+    ctx.nvgEllipse(rx, ry, ex, ey);
+    ctx.nvgFillPaint(gloss);
+    ctx.nvgFill();
+}
+
+function drawGraph(x, y, w, h, t) {
+    let samples = new Array(6);
+    let sx = new Array(6);
+    let sy = new Array(6);
+    let dx = w / 5.0;
+
+    samples[0] = (1 + Math.sin(t * 1.2345 + Math.cos(t * 0.33457) * 0.44)) * 0.5;
+    samples[1] = (1 + Math.sin(t * 0.68363 + Math.cos(t * 1.3) * 1.55)) * 0.5;
+    samples[2] = (1 + Math.sin(t * 1.1642 + Math.cos(t * 0.33457) * 1.24)) * 0.5;
+    samples[3] = (1 + Math.sin(t * 0.56345 + Math.cos(t * 1.63) * 0.14)) * 0.5;
+    samples[4] = (1 + Math.sin(t * 1.6245 + Math.cos(t * 0.254) * 0.3)) * 0.5;
+    samples[5] = (1 + Math.sin(t * 0.345 + Math.cos(t * 0.03) * 0.6)) * 0.5;
+
+    for (let i = 0; i < 6; i++) {
+        sx[i] = x + i * dx;
+        sy[i] = y + h * samples[i] * 0.8;
+    }
+
+    let bg = ctx.nvgLinearGradient(x, y, x, y + h, NVGcolor.nvgRGBA(0, 160, 192, 0), NVGcolor.nvgRGBA(0, 160, 192, 64));
+
+    ctx.nvgBeginPath();
+    ctx.nvgMoveTo(sx[0], sy[0]);
+    for (let i = 1; i < 6; i++) {
+        ctx.nvgBezierTo(sx[i - 1] + dx * 0.5, sy[i - 1], sx[i] - dx * 0.5, sy[i], sx[i], sy[i]);
+    }
+    ctx.nvgLineTo(x + w, y + h);
+    ctx.nvgLineTo(x, y + h);
+    ctx.nvgFillPaint(bg);
+    ctx.nvgFill();
+
+    ctx.nvgBeginPath();
+    ctx.nvgMoveTo(sx[0], sy[0] + 2);
+    for (let i = 1; i < 6; i++) {
+        ctx.nvgBezierTo(sx[i - 1] + dx * 0.5, sy[i - 1] + 2, sx[i] - dx * 0.5, sy[i] + 2, sx[i], sy[i] + 2);
+    }
+    ctx.nvgStrokeColor(NVGcolor.nvgRGBA(0, 0, 0, 32));
+    ctx.nvgStrokeWidth(3.0);
+    ctx.nvgStroke();
+
+    ctx.nvgBeginPath();
+    ctx.nvgMoveTo(sx[0], sy[0]);
+    for (let i = 1; i < 6; i++) {
+        ctx.nvgBezierTo(sx[i - 1] + dx * 0.5, sy[i - 1], sx[i] - dx * 0.5, sy[i], sx[i], sy[i]);
+    }
+    ctx.nvgStrokeColor(NVGcolor.nvgRGBA(0, 160, 192, 255));
+    ctx.nvgStrokeWidth(3.0);
+    ctx.nvgStroke();
+
+    for (let i = 0; i < 6; i++) {
+        bg = ctx.nvgRadialGradient(sx[i], sy[i] + 2, 3.0, 8.0, NVGcolor.nvgRGBA(0, 0, 0, 32), NVGcolor.nvgRGBA(0, 0, 0, 0));
+        ctx.nvgBeginPath();
+        ctx.nvgRect(sx[i] - 10, sy[i] - 10 + 2, 20, 20);
+        ctx.nvgFillPaint(bg);
+        ctx.nvgFill();
+    }
+    ctx.nvgBeginPath();
+    for (let i = 0; i < 6; i++) ctx.nvgCircle(sx[i], sy[i], 4.0);
+    ctx.nvgFillColor(NVGcolor.nvgRGBA(0, 160, 192, 255));
+    ctx.nvgFill();
+    ctx.nvgBeginPath();
+    for (let i = 0; i < 6; i++) ctx.nvgCircle(sx[i], sy[i], 2.0);
+    ctx.nvgFillColor(NVGcolor.nvgRGBA(220, 220, 220, 255));
+    ctx.nvgFill();
+    ctx.nvgStrokeWidth(1.0);
+}
+
+function drawLines(x, y, w, h, t) {
+    const pad = 5.0;
+    const s = w / 9.0 - pad * 2;
+    const pts = new Float32Array(8);
+    const joins = [NVG_MITER, NVG_ROUND, NVG_BEVEL];
+    //const joins = [NVG_BEVEL, NVG_BEVEL, NVG_BEVEL];
+    const caps = [NVG_BUTT, NVG_ROUND, NVG_SQUARE];
+
+    pts[0] = -s * 0.25 + Math.cos(t * 0.3) * s * 0.5;
+    pts[1] = Math.sin(t * 0.3) * s * 0.5;
+    pts[2] = -s * 0.25;
+    pts[3] = 0;
+    pts[4] = s * 0.25;
+    pts[5] = 0;
+    pts[6] = s * 0.25 + Math.cos(-t * 0.3) * s * 0.5;
+    pts[7] = Math.sin(-t * 0.3) * s * 0.5;
+
+    ctx.nvgSave();
+    for (let i = 0; i < 3; i++) {
+        for (let j = 0; j < 3; j++) {
+            const fx = x + s * 0.5 + (i * 3 + j) / 9.0 * w + pad;
+            const fy = y - s * 0.5 + pad;
+
+            ctx.nvgLineCap(caps[i]);
+            ctx.nvgLineJoin(joins[j]);
+            ctx.nvgStrokeWidth(s * 0.3);
+            ctx.nvgStrokeColor(NVGcolor.nvgRGBA(0, 0, 0, 160));
+            ctx.nvgBeginPath();
+            ctx.nvgMoveTo(fx + pts[0], fy + pts[1]);
+            ctx.nvgLineTo(fx + pts[2], fy + pts[3]);
+            ctx.nvgLineTo(fx + pts[4], fy + pts[5]);
+            ctx.nvgLineTo(fx + pts[6], fy + pts[7]);
+            ctx.nvgStroke();
+
+            ctx.nvgLineCap(NVG_BUTT);
+            ctx.nvgLineJoin(NVG_BEVEL);
+            ctx.nvgStrokeWidth(1.0);
+            ctx.nvgStrokeColor(NVGcolor.nvgRGBA(0, 192, 255, 255));
+            ctx.nvgBeginPath();
+            ctx.nvgMoveTo(fx + pts[0], fy + pts[1]);
+            ctx.nvgLineTo(fx + pts[2], fy + pts[3]);
+            ctx.nvgLineTo(fx + pts[4], fy + pts[5]);
+            ctx.nvgLineTo(fx + pts[6], fy + pts[7]);
+            ctx.nvgStroke();
+        }
+    }
+    ctx.nvgRestore();
+}
+
+function drawParagraph(x, y, width, height, mx, my) {
+    const text = "This is longer chunk of text.\n  \n  Would have used lorem ipsum but she    was busy jumping over the lazy dog with the fox and all the men who came to the aid of the party.";
+    const hoverText = "Hover your mouse over the text to see calculated caret position.";
+    const rows = [];
+    const glyphs = new Array(100);
+    const bounds = [0, 0, 0, 0];
+    const lineh = {
+        value: 0
+    };
+    let lnum = 0;
+    let gutter = 0;
+    let gx = 0;
+    let gy = 0;
+
+    ctx.nvgSave();
+    ctx.nvgFontSize(15.0);
+    ctx.nvgFontFace("sans");
+    ctx.nvgTextAlign(NVG_ALIGN_LEFT | NVG_ALIGN_TOP);
+    ctx.nvgTextMetrics(null, null, lineh);
+
+    const allRows = [];
+    for (const chunk of text.split("\n")) {
+        if (chunk.trim().length === 0) {
+            allRows.push({
+                start: "",
+                end: "",
+                next: null,
+                width: 0,
+                minx: 0,
+                maxx: 0
+            });
+            continue;
+        }
+        const part = [];
+        ctx.nvgTextBreakLines(chunk, null, width, part, 32);
+        if (part.length === 0) {
+            allRows.push({
+                start: chunk,
+                end: chunk,
+                next: null,
+                width: ctx.nvgTextBounds(0, 0, chunk, null, null),
+                minx: 0,
+                maxx: ctx.nvgTextBounds(0, 0, chunk, null, null)
+            });
+        } else {
+            for (const row of part) allRows.push(row);
+        }
+    }
+
+    for (const row of allRows) {
+        const hit = mx > x && mx < x + width && my >= y && my < y + lineh.value;
+
+        ctx.nvgBeginPath();
+        ctx.nvgFillColor(NVGcolor.nvgRGBA(255, 255, 255, hit ? 64 : 16));
+        ctx.nvgRect(x + (row.minx || 0), y, (row.maxx || row.width || 0) - (row.minx || 0), lineh.value);
+        ctx.nvgFill();
+
+        ctx.nvgFillColor(NVGcolor.nvgRGBA(255, 255, 255, 255));
+        ctx.nvgText(x, y, row.start || "", null);
+
+        if (hit && row.start && row.start.length > 0) {
+            let caretx = mx < x + (row.width || 0) * 0.5 ? x : x + (row.width || 0);
+            let px = x;
+            const nglyphs = ctx.nvgTextGlyphPositions(x, y, row.start, null, glyphs, glyphs.length);
+            for (let j = 0; j < nglyphs; j++) {
+                const x0 = glyphs[j].x;
+                const x1 = j + 1 < nglyphs ? glyphs[j + 1].x : x + (row.width || 0);
+                const mxSplit = x0 * 0.3 + x1 * 0.7;
+                if (mx >= px && mx < mxSplit) {
+                    caretx = glyphs[j].x;
+                    break;
+                }
+                px = mxSplit;
+            }
+
+            ctx.nvgBeginPath();
+            ctx.nvgFillColor(NVGcolor.nvgRGBA(255, 192, 0, 255));
+            ctx.nvgRect(caretx, y, 1, lineh.value);
+            ctx.nvgFill();
+
+            gutter = lnum + 1;
+            gx = x - 10;
+            gy = y + lineh.value * 0.5;
+        }
+
+        lnum++;
+        y += lineh.value;
+    }
+
+    if (gutter) {
+        const txt = String(gutter);
+        ctx.nvgFontSize(12.0);
+        ctx.nvgTextAlign(NVG_ALIGN_RIGHT | NVG_ALIGN_MIDDLE);
+        ctx.nvgTextBounds(gx, gy, txt, null, bounds);
+
+        ctx.nvgBeginPath();
+        ctx.nvgFillColor(NVGcolor.nvgRGBA(255, 192, 0, 255));
+        ctx.nvgRoundedRect(Math.floor(bounds[0]) - 4, Math.floor(bounds[1]) - 2, Math.floor(bounds[2] - bounds[0]) + 8, Math.floor(bounds[3] - bounds[1]) + 4, (Math.floor(bounds[3] - bounds[1]) + 4) / 2 - 1);
+        ctx.nvgFill();
+
+        ctx.nvgFillColor(NVGcolor.nvgRGBA(32, 32, 32, 255));
+        ctx.nvgText(gx, gy, txt, null);
+    }
+
+    y += 20.0;
+    ctx.nvgFontSize(11.0);
+    ctx.nvgTextAlign(NVG_ALIGN_LEFT | NVG_ALIGN_TOP);
+    ctx.nvgTextLineHeight(1.2);
+    ctx.nvgTextBoxBounds(x, y, 150, hoverText, null, bounds);
+
+    const dx = clampf(mx, bounds[0], bounds[2]) - mx;
+    const dy = clampf(my, bounds[1], bounds[3]) - my;
+    let a = Math.sqrt(dx * dx + dy * dy) / 30.0;
+    a = clampf(a, 0, 1);
+    ctx.nvgGlobalAlpha(a);
+
+    ctx.nvgBeginPath();
+    ctx.nvgFillColor(NVGcolor.nvgRGBA(220, 220, 220, 255));
+    ctx.nvgRoundedRect(bounds[0] - 2, bounds[1] - 2, Math.floor(bounds[2] - bounds[0]) + 4, Math.floor(bounds[3] - bounds[1]) + 4, 3);
+    const px = Math.floor((bounds[2] + bounds[0]) / 2);
+    ctx.nvgMoveTo(px, bounds[1] - 10);
+    ctx.nvgLineTo(px + 7, bounds[1] + 1);
+    ctx.nvgLineTo(px - 7, bounds[1] + 1);
+    ctx.nvgFill();
+
+    ctx.nvgFillColor(NVGcolor.nvgRGBA(0, 0, 0, 220));
+    ctx.nvgTextBox(x, y, 150, hoverText, null);
+    ctx.nvgRestore();
+}
+
+function drawSpinner(cx, cy, r, t) {
+    let a0 = t * 6.0;
+    let a1 = Math.PI + t * 6.0;
+    let r0 = r;
+    let r1 = r * 0.75;
+    let ax = cx + Math.cos(a0) * (r0 + r1) * 0.5;
+    let ay = cy + Math.sin(a0) * (r0 + r1) * 0.5;
+    let bx = cx + Math.cos(a1) * (r0 + r1) * 0.5;
+    let by = cy + Math.sin(a1) * (r0 + r1) * 0.5;
+
+    ctx.nvgSave();
+    ctx.nvgBeginPath();
+    ctx.nvgArc(cx, cy, r0, a0, a1, NVG_CW);
+    ctx.nvgArc(cx, cy, r1, a1, a0, NVG_CCW);
+    ctx.nvgClosePath();
+    ctx.nvgFillPaint(ctx.nvgLinearGradient(ax, ay, bx, by, NVGcolor.nvgRGBA(0, 0, 0, 0), NVGcolor.nvgRGBA(0, 0, 0, 128)));
+    ctx.nvgFill();
+    ctx.nvgRestore();
+}
+
+function drawWidths(x, y, width) {
+    ctx.nvgSave();
+    ctx.nvgStrokeColor(NVGcolor.nvgRGBA(0, 0, 0, 255));
+    for (let i = 0; i < 20; i++) {
+        let w = (i + 0.5) * 0.1;
+        ctx.nvgStrokeWidth(w);
+        ctx.nvgBeginPath();
+        ctx.nvgMoveTo(x, y);
+        ctx.nvgLineTo(x + width, y + width * 0.3);
+        ctx.nvgStroke();
+        y += 10;
+    }
+    ctx.nvgRestore();
+}
+
+function drawCaps(x, y, width) {
+    const caps = [NVG_BUTT, NVG_ROUND, NVG_SQUARE];
+    const lineWidth = 8.0;
+
+    ctx.nvgSave();
+    ctx.nvgBeginPath();
+    ctx.nvgRect(x - lineWidth / 2, y, width + lineWidth, 40);
+    ctx.nvgFillColor(NVGcolor.nvgRGBA(255, 255, 255, 32));
+    ctx.nvgFill();
+
+    ctx.nvgBeginPath();
+    ctx.nvgRect(x, y, width, 40);
+    ctx.nvgFillColor(NVGcolor.nvgRGBA(255, 255, 255, 32));
+    ctx.nvgFill();
+
+    ctx.nvgStrokeWidth(lineWidth);
+    for (let i = 0; i < 3; i++) {
+        ctx.nvgLineCap(caps[i]);
+        ctx.nvgStrokeColor(NVGcolor.nvgRGBA(0, 0, 0, 255));
+        ctx.nvgBeginPath();
+        ctx.nvgMoveTo(x, y + i * 10 + 5);
+        ctx.nvgLineTo(x + width, y + i * 10 + 5);
+        ctx.nvgStroke();
+    }
+    ctx.nvgRestore();
+}
+
+function drawScissor(x, y, t) {
+    ctx.nvgSave();
+    ctx.nvgTranslate(x, y);
+    ctx.nvgRotate(nvgDegToRad(5));
+
+    ctx.nvgBeginPath();
+    ctx.nvgRect(-20, -20, 60, 40);
+    ctx.nvgFillColor(NVGcolor.nvgRGBA(255, 0, 0, 255));
+    ctx.nvgFill();
+    ctx.nvgScissor(-20, -20, 60, 40);
+
+    ctx.nvgTranslate(40, 0);
+    ctx.nvgRotate(t);
+
+    ctx.nvgSave();
+    ctx.nvgResetScissor();
+    ctx.nvgBeginPath();
+    ctx.nvgRect(-20, -10, 60, 30);
+    ctx.nvgFillColor(NVGcolor.nvgRGBA(255, 128, 0, 64));
+    ctx.nvgFill();
+    ctx.nvgRestore();
+
+    ctx.nvgIntersectScissor(-20, -10, 60, 30);
+    ctx.nvgBeginPath();
+    ctx.nvgRect(-20, -10, 60, 30);
+    ctx.nvgFillColor(NVGcolor.nvgRGBA(255, 128, 0, 255));
+    ctx.nvgFill();
+    ctx.nvgRestore();
+}
+
+function drawColorwheel(x, y, w, h, t) {
+    let cx = x + w * 0.5;
+    let cy = y + h * 0.5;
+    let r1 = Math.min(w, h) * 0.5 - 5.0;
+    let r0 = r1 - 20.0;
+    let aeps = 0.5 / r1;
+    let hue = Math.sin(t * 0.12);
+
+    ctx.nvgSave();
+
+    for (let i = 0; i < 6; i++) {
+        let a0 = i / 6.0 * Math.PI * 2.0 - aeps;
+        let a1 = (i + 1.0) / 6.0 * Math.PI * 2.0 + aeps;
+        let ax = cx + Math.cos(a0) * (r0 + r1) * 0.5;
+        let ay = cy + Math.sin(a0) * (r0 + r1) * 0.5;
+        let bx = cx + Math.cos(a1) * (r0 + r1) * 0.5;
+        let by = cy + Math.sin(a1) * (r0 + r1) * 0.5;
+
+        ctx.nvgBeginPath();
+        ctx.nvgArc(cx, cy, r0, a0, a1, NVG_CW);
+        ctx.nvgArc(cx, cy, r1, a1, a0, NVG_CCW);
+        ctx.nvgClosePath();
+        ctx.nvgFillPaint(ctx.nvgLinearGradient(ax, ay, bx, by, NVGcolor.nvgHSLA(a0 / (Math.PI * 2), 1.0, 0.55, 255), NVGcolor.nvgHSLA(a1 / (Math.PI * 2), 1.0, 0.55, 255)));
+        ctx.nvgFill();
+    }
+
+    ctx.nvgBeginPath();
+    ctx.nvgCircle(cx, cy, r0 - 0.5);
+    ctx.nvgCircle(cx, cy, r1 + 0.5);
+    ctx.nvgStrokeColor(NVGcolor.nvgRGBA(0, 0, 0, 64));
+    ctx.nvgStrokeWidth(1.0);
+    ctx.nvgStroke();
+
+    ctx.nvgSave();
+    ctx.nvgTranslate(cx, cy);
+    ctx.nvgRotate(hue * Math.PI * 2);
+
+    ctx.nvgStrokeWidth(2.0);
+    ctx.nvgBeginPath();
+    ctx.nvgRect(r0 - 1, -3, r1 - r0 + 2, 6);
+    ctx.nvgStrokeColor(NVGcolor.nvgRGBA(255, 255, 255, 192));
+    ctx.nvgStroke();
+
+    ctx.nvgFillPaint(ctx.nvgBoxGradient(r0 - 3, -5, r1 - r0 + 6, 10, 2, 4, NVGcolor.nvgRGBA(0, 0, 0, 128), NVGcolor.nvgRGBA(0, 0, 0, 0)));
+    ctx.nvgBeginPath();
+    ctx.nvgRect(r0 - 12, -14, r1 - r0 + 24, 28);
+    ctx.nvgRect(r0 - 2, -4, r1 - r0 + 4, 8);
+    ctx.nvgPathWinding(NVG_HOLE);
+    ctx.nvgFill();
+
+    let r = r0 - 6;
+    let ax = Math.cos(120.0 / 180.0 * Math.PI) * r;
+    let ay = Math.sin(120.0 / 180.0 * Math.PI) * r;
+    let bx = Math.cos(-120.0 / 180.0 * Math.PI) * r;
+    let by = Math.sin(-120.0 / 180.0 * Math.PI) * r;
+
+    ctx.nvgBeginPath();
+    ctx.nvgMoveTo(r, 0);
+    ctx.nvgLineTo(ax, ay);
+    ctx.nvgLineTo(bx, by);
+    ctx.nvgClosePath();
+    ctx.nvgFillPaint(ctx.nvgLinearGradient(r, 0, ax, ay, NVGcolor.nvgHSLA(hue, 1.0, 0.5, 255), NVGcolor.nvgRGBA(255, 255, 255, 255)));
+    ctx.nvgFill();
+    ctx.nvgFillPaint(ctx.nvgLinearGradient((r + ax) * 0.5, (ay) * 0.5, bx, by, NVGcolor.nvgRGBA(0, 0, 0, 0), NVGcolor.nvgRGBA(0, 0, 0, 255)));
+    ctx.nvgFill();
+    ctx.nvgStrokeColor(NVGcolor.nvgRGBA(0, 0, 0, 64));
+    ctx.nvgStroke();
+
+    ax = Math.cos(120.0 / 180.0 * Math.PI) * r * 0.3;
+    ay = Math.sin(120.0 / 180.0 * Math.PI) * r * 0.4;
+    ctx.nvgStrokeWidth(2.0);
+    ctx.nvgBeginPath();
+    ctx.nvgCircle(ax, ay, 5);
+    ctx.nvgStrokeColor(NVGcolor.nvgRGBA(255, 255, 255, 192));
+    ctx.nvgStroke();
+
+    ctx.nvgFillPaint(ctx.nvgRadialGradient(ax, ay, 7, 9, NVGcolor.nvgRGBA(0, 0, 0, 64), NVGcolor.nvgRGBA(0, 0, 0, 0)));
+    ctx.nvgBeginPath();
+    ctx.nvgRect(ax - 20, ay - 20, 40, 40);
+    ctx.nvgCircle(ax, ay, 7);
+    ctx.nvgPathWinding(NVG_HOLE);
+    ctx.nvgFill();
+
+    ctx.nvgRestore();
+    ctx.nvgRestore();
+}
+
+function checkGLError(context = "unknown") {
+    const error = gl.getError();
+    if (error !== gl.NO_ERROR) {
+        console.error(`WebGL error (${context}):`, error);
+    }
+}
+
+
+//
+// start here
+//
+function main() {
+
+    canvas = document.querySelector("#glcanvas");
+
+    function resizeCanvas() {
+        const dpr = window.devicePixelRatio || 1;
+        canvas.width = Math.max(1, Math.floor(window.innerWidth * dpr));
+        canvas.height = Math.max(1, Math.floor(window.innerHeight * dpr));
+        canvas.style.width = `${window.innerWidth}px`;
+        canvas.style.height = `${window.innerHeight}px`;
+    }
+    resizeCanvas();
+    // Initialize the GL context
+    gl = canvas.getContext("experimental-webgl", {
+        stencil: true,
+        alpha: true,
+        antialias: true
+    });
+
+    // Only continue if WebGL is available and working
+    if (gl === null) {
+        alert(
+            "Unable to initialize WebGL. Your browser or machine may not support it."
+        );
+        return;
+    }
+
+    canvas.addEventListener("mousemove", (event) => {
+        const rect = canvas.getBoundingClientRect();
+        mx = event.clientX - rect.left;
+        my = event.clientY - rect.top;
+    });
+
+    canvas.tabIndex = 0;
+    canvas.addEventListener("mousedown", (event) => {
+        const rect = canvas.getBoundingClientRect();
+        mx = event.clientX - rect.left;
+        my = event.clientY - rect.top;
+        const control = hitInputControl(mx, my);
+        setActiveInput(control);
+        canvas.focus();
+    });
+    canvas.addEventListener("keydown", handleInputKeydown);
+
+    let blowup = false;
+    window.addEventListener("keydown", (event) => {
+        if (event.code === "Space") blowup = !blowup;
+    });
+
+    let winWidth, winHeight;
+    let fbWidth, fbHeight;
+    let pxRatio;
+
+    let params = new NVGparams();
+
+    params.renderCreate = function(userPtr) {
+        return glnvg__renderCreate(userPtr);
+    };
+    params.renderCreateTexture = function(userPtr, type, width, height, imageFlags, data) {
+        return glnvg__renderCreateTexture(userPtr, type, width, height, imageFlags, data);
+    };
+    params.renderDeleteTexture = function(userPtr, image) {
+        return glnvg__renderDeleteTexture(userPtr, image);
+    };
+    params.renderUpdateTexture = function(userPtr, image, x, y, w, h, data) {
+        return glnvg__renderUpdateTexture(userPtr, image, x, y, w, h, data);
+    };
+    params.renderGetTextureSize = function(userPtr, image) {
+        return glnvg__renderGetTextureSize(userPtr, image);
+    };
+    params.renderViewport = function(userPtr, width, height, devicePixelRatio) {
+        glnvg__renderViewport(userPtr, width, height, devicePixelRatio);
+    };
+    params.renderCancel = function(userPtr) {
+        glnvg__renderCancel(userPtr);
+    };
+    params.renderFlush = function(ctx) {
+        glnvg__renderFlush(ctx);
+    };
+    params.renderFill = function(userPtr, fillPaint, compositeOperation, scissor, fringeWidth, bounds, paths, npaths) {
+        glnvg__renderFill(userPtr, fillPaint, compositeOperation, scissor, fringeWidth, bounds, paths, npaths);
+    };
+    params.renderStroke = function(userPtr, strokePaint, compositeOperation, scissor, fringe, strokeWidth, paths, npaths) {
+        glnvg__renderStroke(userPtr, strokePaint, compositeOperation, scissor, fringe, strokeWidth, paths, npaths);
+    };
+    params.renderTriangles = function(userPtr, paint, compositeOperation, scissor, verts, nverts, fringe) {
+        glnvg__renderTriangles(userPtr, paint, compositeOperation, scissor, verts, nverts, fringe);
+    };
+    params.renderDelete = function(userPtr) {
+        glnvg__renderDelete(userPtr);
+    };
+    params.userPtr = gl;
+    params.edgeAntiAlias = true;
+
+    gl.edgeAntiAlias = params.edgeAntiAlias;
+
+    ctx = nvgCreateInternal(params);
+    ensureDemoFonts();
+    loadDemoImages();
+
+    window.addEventListener("resize", resizeCanvas);
+
+    // Render loop
+    function render() {
+        resizeCanvas();
+        winWidth = Math.max(1, canvas.clientWidth);
+        winHeight = Math.max(1, canvas.clientHeight);
+        fbWidth = gl.drawingBufferWidth;
+        fbHeight = gl.drawingBufferHeight;
+        pxRatio = fbWidth / winWidth;
+        const now = performance.now() * 0.001;
+        if (prevFrameTime === 0) prevFrameTime = now;
+        updateGraph(perfGraph, now - prevFrameTime);
+        prevFrameTime = now;
+
+        if (premult)
+            gl.clearColor(0.0, 0.0, 0.0, 0.0);
+        else
+            gl.clearColor(0.3, 0.3, 0.32, 1.0);
+
+        gl.viewport(0, 0, fbWidth, fbHeight);
+        gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT | gl.STENCIL_BUFFER_BIT);
+
+        beginInputFrame(now);
+        ctx.nvgBeginFrame(winWidth, winHeight, pxRatio);
+        renderOriginalDemo(mx ?? winWidth * 0.5, my ?? winHeight * 0.5, winWidth, winHeight, now, blowup);
+        renderGraph(5, 5, perfGraph);
+        ctx.nvgEndFrame();
+
+        // Call the render function again for the next frame
+        requestAnimationFrame(render);
+    }
+    // Start the render loop
+    render();
+}
+document.addEventListener("DOMContentLoaded", function() {
+    main();
+});