Awesome GitHub RepositoriesImmediate Mode Canvas Renderers

Chart.js is a declarative data visualization framework that renders interactive, responsive charts directly onto an HTML5 canvas element. It functions as a configuration-driven engine, transforming structured datasets into complex graphical representations by merging user-defined settings with global defaults. The library utilizes a high-performance rendering pipeline that executes drawing commands during each animation frame to maintain smooth visual feedback. The project distinguishes itself through a modular, extensible architecture that allows developers to register custom scales, control

particles.js is a JavaScript particle animation library and visual effects engine used to create interactive, canvas-based simulations for web interfaces. It enables the generation of dynamic background animations and networked visual effects through coordinate-based particle movements. The library features a system for drawing connecting lines between particles based on proximity to create network-style visualizations. It includes mechanisms for mapping mouse movements and click events to specific particle behaviors, such as attraction or repulsion. Users can configure particle density, opa

GSAP is a comprehensive JavaScript animation library designed for orchestrating complex motion sequences and interactive user interfaces. It provides a robust property-interpolation engine that calculates intermediate values for CSS styles, attributes, and numeric properties, enabling smooth visual transitions across web elements. The framework is built on a core architecture that manages animation lifecycles, timeline-based sequence orchestration, and virtual property interception to ensure precise control over motion. The library distinguishes itself through a modular, plugin-based extensib

p5.js is a JavaScript creative coding library and generative art framework. It serves as a web-based graphics engine and a high-level HTML5 Canvas wrapper designed to produce algorithmic imagery and responsive audio-visual experiences. The project provides a simplified sketching API for rendering 2D and 3D graphics directly in a web browser. It enables the creation of interactive animations, generative art, and digital experiences that respond to user input. The library covers a range of applications including interactive data visualization, browser-based multimedia art, and educational prog

Rough is a graphics library designed to render shapes and paths with a hand-drawn, sketchy aesthetic on web pages. It functions as a generator for informal visual styles, allowing developers to create illustrations and diagrams that mimic the appearance of human-drawn sketches. The library distinguishes itself by using procedural rendering to calculate randomized offsets for lines and curves, simulating natural imperfections. It employs deterministic seeding to ensure that these variations remain consistent across renders, while providing hachure-based texture filling to apply stylized shadin

Motion Canvas is a TypeScript-based framework for creating programmatic animations and motion graphics. It functions as a code-based animation tool that allows developers to define visual transitions, element properties, and timing through scripts rather than traditional timeline-based interfaces. The library renders frame-accurate motion graphics directly in the browser using web technologies. The project utilizes a virtual scene graph to manage visual objects and their transformations, which are then rendered to an HTML5 canvas. It employs generator functions to sequence animations and reac

Lightweight Charts is a specialized library for rendering interactive time-series financial data visualizations within web applications. It provides a high-performance, responsive component designed to display historical and live market trends through various graphical formats, including candlesticks, histograms, and line series. The library distinguishes itself through a canvas-based rendering engine that decouples visual representation from raw data, enabling efficient updates and real-time monitoring of large datasets. It includes built-in support for accessibility, ensuring that interacti

Cytoscape.js is a JavaScript library designed for rendering interactive node-link diagrams and analyzing complex network structures directly within a web browser. It functions as a comprehensive framework for building responsive graph interfaces, providing the tools necessary to visualize relational datasets and manage hierarchical data models. The library distinguishes itself through a modular architecture that supports custom layout algorithms and rendering styles, allowing for the integration of physics-based engines to organize complex network structures automatically. It utilizes an even

Zdog is a JavaScript graphics library designed for rendering pseudo-three-dimensional geometric models within web browser environments. It functions as a lightweight engine that draws flat, vector-based shapes onto HTML5 canvas or SVG elements by utilizing a scene graph to manage object relationships and spatial transformations. The library distinguishes itself through a unique approach to volumetric modeling, where three-dimensional depth is simulated on flat shapes by dynamically adjusting stroke thickness. This technique allows for the creation of rounded, plump visual effects without the

uPlot هي مكتبة تخطيط سلسلة زمنية عالية الأداء تعتمد على Canvas مصممة لعرض ملايين نقاط البيانات بمعدلات إطارات عالية. تعمل كمصور بيانات عالي التردد وراسم تدفق بيانات في الوقت الفعلي، وتستخدم واجهة برمجة تطبيقات HTML5 Canvas للحفاظ على الاستجابة عند رسم مجموعات بيانات زمنية كبيرة. يتميز المشروع كإطار عمل تصور قائم على المكونات الإضافية يسمح للمعرضين المخصصين بإنشاء صور مرئية متخصصة مثل الخرائط الحرارية ومخططات الصندوق والشارب. كما يعمل كأداة تخطيط مالي تفاعلية، تدعم بشكل خاص مخططات OHLC، والأشرطة، ونطاقات المساحة. تغطي المكتبة مجموعة واسعة من القدرات، بما في ذلك إدارة المحور بمقاييس خطية ولوغاريتمية وموحدة، والتنقل التفاعلي عبر التكبير، والتحريك، والمؤشرات المتزامنة عبر طرق عرض مرتبطة متعددة. وتوفر أنظمة لبث البيانات الديناميكي مع التخزين المؤقت للنافذة المنزلقة وأدوات لإدارة البيانات المفقودة والمعالجة الواعية بالمنطقة الزمنية. تشمل الوظائف الإضافية تجميع المخططات المكدسة والقدرة على تصدير التصورات إلى تنسيقات صور ثابتة.

react-native-skia is a cross-platform graphics framework that provides a high-performance 2D graphics engine for rendering shapes, paths, and images. It functions as a vector graphics engine and UI animation toolkit, allowing for hardware-accelerated visuals across mobile and web platforms. The project is distinguished by its integration of the Skia 2D graphics library, enabling a shader and filter pipeline for complex pixel-level effects. It supports the rendering of Lottie animations exported from After Effects and the execution of animations directly on the UI thread to maintain fluid moti

billboard.js is a JavaScript charting library built on D3.js that renders interactive data visualizations from a single declarative configuration object. It supports a wide range of chart types including bar, line, pie, scatter, area, spline, step, candlestick, funnel, gauge, heatmap, radar, polar, treemap, bubble, donut, and sparkline charts, and can overlay multiple chart types within a single visualization. The library offers an opt-in Canvas rendering mode for improved performance with large datasets and high-density axis displays, alongside its standard SVG-based rendering. The library d

XCL-Charts هي مكتبة رسوم بيانية أصلية لنظام Android مصممة كمحرك رسومات عالي الأداء لعرض تصورات بيانات تفاعلية ومعقدة. توفر إطار عمل شاملاً لرسم مخططات ثنائية وثلاثية الأبعاد متنوعة مباشرة على اللوحة الأصلية، مما يتيح إنشاء مكونات واجهة مستخدم مخصصة لتطبيقات الجوال. تتميز المكتبة ببنية قوية تتعامل مع رسم خرائط الإحداثيات والتركيب الموجه للكائنات، مما يسمح ببناء تخطيطات متطورة ومتعددة المحاور. وتدعم استكشاف البيانات في الوقت الفعلي من خلال التحويلات القائمة على الإيماءات، بما في ذلك التكبير والتحريك، وتستخدم الاستيفاء القائم على الحالة لتوفير انتقالات رسوم متحركة سلسة عند حدوث تحديثات البيانات. بعيداً عن إمكانيات العرض الأساسية، يوفر المشروع تحكماً دقيقاً في الجماليات المرئية وإدارة التخطيط. يمكن للمستخدمين دمج أنواع مخططات متعددة، وخطوط مرجعية، وطبقات بيانات معقدة لبناء لوحات تحكم مفصلة وواجهات تحليلات تفاعلية. يتم توزيع المكتبة كمكون أصلي، مما يوفر وصولاً مباشراً إلى أوليات الرسم لتصميم مرئي مخصص.

This project is a high-performance library for rendering interactive, force-directed network visualizations within an HTML5 canvas. It provides a physics-based engine that calculates node positioning through simulated attraction and repulsion forces, enabling the representation of complex relational data structures as dynamic, navigable graphs. The library distinguishes itself through its ability to handle large-scale datasets containing thousands of nodes and links while maintaining interface responsiveness. It offers granular control over the visual representation of data, allowing for cust

هذا المشروع هو محرك ألعاب أركيد قائم على المتصفح تم تنفيذه بلغة JavaScript. يوفر إطار عمل أساسي لتطوير ألعاب المتاهة القائمة على الشبكة، باستخدام HTML5 canvas للرسم الفوري وكائنات البيانات المهيكلة لتحديد تخطيطات المستويات ومواضع العناصر. يدير المحرك آليات تفاعلية أساسية، بما في ذلك تنقل اللاعب، واكتشاف التصادم، والبحث عن المسار في الوقت الفعلي للكيانات التي يتحكم فيها الكمبيوتر. يدمج حلقة لعبة قائمة على آلة الحالة للتعامل مع الانتقالات بين اللعب النشط، والحالات المؤقتة، وتقدم المستوى، مع تتبع النتائج وجمع العناصر لضبط الصعوبة. يعمل التنفيذ كمرجع لتطوير الألعاب القائمة على المتصفح، موضحاً كيفية دمج تقنيات الويب القياسية لبناء بيئات تفاعلية. يغطي منطق اللعبة الأساسي مثل تعيين الإحداثيات، وقيود الحدود، وحركة الشخصيات المستقلة.

Tower Game هو محرك JavaScript قائم على المتصفح مصمم لبناء محاكيات التكديس القائمة على الفيزياء. يوفر إطار عمل لتطوير تحديات تفاعلية بأسلوب الأركيد حيث يقوم اللاعبون بمحاذاة الكتل لبناء هياكل، مع أنظمة أساسية تدير منطق التصادم، وتتبع الصحة، والتسجيل القائم على الدقة. يتميز المحرك ببنية نمطية تسمح بتخصيص عميق لآليات اللعب. يمكن للمطورين حقن وظائف مخصصة لتجاوز سرعات الحركة الافتراضية، وزوايا التذبذب، ومشغلات التسجيل في وقت التشغيل. بالإضافة إلى ذلك، يدعم النظام إدارة الأصول المنفصلة، مما يتيح استبدال الوسائط المرئية والسمعية الافتراضية دون الحاجة إلى تعديلات على الكود المصدري الأساسي. تستخدم المنصة نهج عرض فوري على HTML5 canvas، متزامناً مع معدل تحديث الشاشة للحفاظ على توقيت محاكاة متسق. يوفر بيئة شاملة لإنشاء نماذج أولية لقواعد اللعبة ومحاكيات ميكانيكية، يمكن الوصول إليها مباشرة داخل متصفح الويب دون الحاجة إلى ملحقات خارجية.

Canvas-datagrid is a web component designed to render and manage large-scale datasets within a browser-based spreadsheet interface. By utilizing an immediate-mode rendering approach on a single canvas element, it bypasses the performance limitations associated with traditional document object model structures, allowing for the display of millions of rows and columns without the need for pagination. The component distinguishes itself through its ability to handle complex, nested data structures by flattening hierarchical relationships into a single coordinate system. It incorporates a virtual

This project is a high-performance data grid component designed for React applications. It provides a declarative framework for rendering large-scale datasets and complex tabular structures by utilizing a canvas-based drawing engine instead of traditional document object model nodes. The library distinguishes itself through a windowed virtualization engine that maintains constant memory usage by rendering only the visible portion of the grid. It translates pointer interactions into specific cell references through coordinate-based mapping and supports the injection of external application sta