Topics / #canvas

Canvas projects on GitHub

Drawing surfaces for 2D graphics, whiteboards, and charts in apps.

As of , the most-starred Canvas projects on GitHub are excalidraw (134K stars), three.js (116.5K stars) and d3 (113.8K stars). GitHub.Locker tracks 87 Canvas repositories with 1.6M stars combined. The fastest-growing on October 16 was lemo-opuscar, with +246 stars in a day.

87Projects
1.6MStars in total
+1.3KStars in a day
Browse in the catalog →github.com/topics/canvas ↗

Hot right now

Most stars gained in a day · Oct 16

+246

lemo-opuscar

lemomo-ai/lemo-opuscar · ★ 2.8K

Lemo-Opuscar is a Claude Code skill that lets Claude Opus 5.5 direct, draw, score and mix short films entirely in code, with 43 ready-made film styles you can apply to your own story.

+202

awesome-opus5-5-videos

yihui-dev/awesome-opus5-5-videos · ★ 5.6K

A curated, growing collection of viral videos made with Claude Opus 5.5, each paired with the exact prompt its creator shared and a link to the original post.

+77

huashu-art-motion

alchaincyf/huashu-art-motion · ★ 4.2K

huashu-art-motion is an agent skill that turns a coding agent into an animator: it writes and runs JavaScript/Canvas code to produce art-style animations, rather than generating video frames directly.

+73

onetake

feitangyuan/onetake · ★ 2.6K

onetake is a Claude Agent Skill that generates product launch films, teasers and feature demos as one unbroken continuous camera take instead of a slideshow of separate scenes.

The all-time top

87 projects · by stars

  1. #1 · excalidraw/excalidraw

    excalidraw

    An open source virtual whiteboard with a hand-drawn look for sketching diagrams, wireframes and whatever you like — use it at excalidraw.com or embed the npm package in your own app.

    134K
  2. #2 · mrdoob/three.js

    three.js

    It's a JavaScript 3D library for the browser: the project aims to be easy-to-use, lightweight, cross-browser and general-purpose. Around since 2010, now over 116,000 GitHub stars.

    116.5K
  3. #3 · d3/d3

    d3

    D3 (or D3.js) is a free, open-source JavaScript library for visualizing data.

    113.8K
  1. 4

    anime

    73.7Kjuliangarnier/anime · JavaScript

    Anime.js is a fast, multipurpose and lightweight JavaScript animation library with a simple yet powerful API for animating things on the web.

  2. 5

    AFFiNE

    73.6Ktoeverything/AFFiNE · TypeScript

    AFFiNE is an open-source, all-in-one workspace that merges docs, whiteboards and tables into one knowledge base, positioned as a privacy-first alternative to Notion and Miro.

  3. 6

    Chart.js

    67.7Kchartjs/Chart.js · JavaScript

    Chart.js is a JavaScript library for drawing simple, flexible charts using the HTML5 canvas element.

  4. 7

    echarts

    67.5Kapache/echarts · TypeScript

    Apache ECharts is a free, powerful charting and data visualization library for browsers, written in pure JavaScript, used to add interactive and highly customizable charts to products.

  5. 8

    tldraw

    51Ktldraw/tldraw · TypeScript

    tldraw is an SDK for building infinite canvas apps in React — a feature-complete canvas engine that you can use out of the box as a whiteboard or extend with custom shapes, tools, and UI.

  6. 9

    pretext

    50.8Kchenglou/pretext · TypeScript

    Pretext is a pure JavaScript/TypeScript library for multiline text measurement and layout — fast and accurate, including for languages you may not even know about.

  7. 10

    obsidian-skills

    49.7Kkepano/obsidian-skills

    This is a set of Agent Skills for Obsidian that teaches AI coding agents (like Claude Code, Codex, and OpenCode) how to work with Obsidian's Markdown, Bases, and JSON Canvas files, plus the Obsidian CLI.

  8. 11

    pixijs

    48.4Kpixijs/pixijs · TypeScript

    PixiJS is a 2D rendering engine for the web that uses WebGL and WebGPU to draw fast, interactive graphics like games, data visualizations, and creative sites.

  9. 12

    phaser

    40.5Kphaserjs/phaser · JavaScript

    Phaser is a fast, free and open source 2D game framework for building HTML5 games that run in desktop and mobile web browsers, rendering with either WebGL or Canvas. It has been actively developed for over 13 years.

  10. 13

    lottie-web

    32.2Kairbnb/lottie-web · JavaScript

    Lottie-web is a JavaScript library that parses Adobe After Effects animations exported as JSON via the Bodymovin plugin and renders them natively in the browser, so designers can ship real animations without an engineer hand-coding them.

  11. 14

    html2canvas

    31.9Kniklasvh/html2canvas · TypeScript

    html2canvas is a JavaScript library that takes 'screenshots' of webpages or parts of them directly in the user's browser, without needing a server.

  12. 15

    fabric.js

    31.5Kfabricjs/fabric.js · TypeScript

    Fabric.js is a JavaScript library for working with the HTML5 canvas, letting you create and manipulate interactive shapes, text and images, and convert between SVG and canvas.

  13. 16

    particles.js

    30.2KVincentGarreau/particles.js · JavaScript

    A lightweight JavaScript library for creating particles: you add it to a web page to get animated, interactive particle backgrounds and effects.

  14. 17

    GSAP

    29.3Kgreensock/GSAP · JavaScript

    GSAP (GreenSock Animation Platform) is a framework-agnostic JavaScript library for building high-performance animations that work in every major browser.

  15. 18

    univer

    22.6Kdream-num/univer · TypeScript

    Univer is an open-source SDK for embedding spreadsheet, document, and presentation editing directly into your own product, instead of hosting a separate office app.

  16. 19

    wechat-app-mall

    21.9KEastWorld/wechat-app-mall · JavaScript

    This is an open-source WeChat Mini Program e-commerce mall/storefront template that has been maintained long-term, now including support for live-streaming sales.

  17. 20

    rough

    21.3Krough-stuff/rough · HTML

    Rough.js is a small (<9 kB) JavaScript graphics library that makes drawings look sketchy and hand-drawn instead of clean and geometric.

  18. 21

    matter-js

    18.5Kliabru/matter-js · JavaScript

    Matter.js is a JavaScript 2D rigid body physics engine for the web — a physics simulation you drop into web pages and Node.js apps.

  19. 22

    lightweight-charts

    17.6Ktradingview/lightweight-charts · TypeScript

    TradingView Lightweight Charts is an open-source library of very small and fast financial charts drawn with HTML5 canvas, for displaying financial data as an interactive chart on a web page.

  20. 23

    WebGL-Fluid-Simulation

    16.7KPavelDoGreat/WebGL-Fluid-Simulation · JavaScript

    It is an interactive WebGL demo that simulates fluid dynamics in real time, letting you swirl colorful liquid-like effects with your mouse or finger directly in the browser.

  21. 24

    Luckysheet

    16.6Kdream-num/Luckysheet · JavaScript

    Luckysheet is a completely open source online spreadsheet like Excel — a powerful, configurable Excel-style grid with formulas, charts and pivot tables that runs in the browser.

  22. 25

    paper.js

    15.1Kpaperjs/paper.js · JavaScript

    Paper.js is an open-source vector graphics scripting framework for JavaScript, running in the browser on top of the HTML5 Canvas element. It is a JavaScript/browser port of Scriptographer, the original scripting plugin for Adobe Illustrator, built by the same authors.

  23. 26

    drawnix

    14.9Kplait-board/drawnix · TypeScript

    Drawnix is a free, open-source all-in-one whiteboard tool that combines mind mapping, flowcharts, and freehand drawing on a single infinite canvas.

  24. 27

    konva

    14.9Kkonvajs/konva · TypeScript

    Konva.js is an open-source 2D canvas framework for the web, used to build interactive graphics: design editors, whiteboards, diagrams, annotations and maps.

  25. 28

    x-spreadsheet

    14.6Kmyliang/x-spreadsheet · JavaScript

    A web-based JavaScript spreadsheet: an Excel-like, editable grid that runs in the browser.

  26. 29

    nivo

    14.1Kplouc/nivo · TypeScript

    nivo is a React component library for building data visualizations, built on top of d3 with support for SVG, HTML and Canvas rendering.

  27. 30

    noVNC

    14.1Knovnc/noVNC · JavaScript

    noVNC is an HTML5 VNC client that lets you connect to and control a remote desktop straight from a web browser, with no plugins needed. It powers browser-based remote access in projects like OpenStack, OpenNebula and ThinLinc.

  28. 31

    react-canvas

    13.2KFlipboard/react-canvas · JavaScript

    React Canvas is an open-source library from Flipboard that lets React components render to a canvas instead of the DOM, for building faster, app-like mobile web interfaces.

  29. 32

    daedalOS

    13.1KDustinBrett/daedalOS · JavaScript

    daedalOS is a full desktop environment that runs entirely in your browser, complete with a file explorer, draggable/resizable windows, a taskbar, a start menu, and dozens of built-in apps, emulators, and games.

  30. 33

    note-gen

    12.9Kcodexu/note-gen · TypeScript

    NoteGen is a local-first Markdown note app that lets you quickly capture scattered fragments like text, voice recordings, screenshots, links, or files, then use AI later to organize them into structured notes.

  31. 34

    piskel

    12.8Kpiskelapp/piskel · JavaScript

    Piskel is an easy-to-use, web-based sprite editor for creating game sprites, animations, and pixel art.

  32. 35

    canvas-confetti

    12.8Kcatdad/canvas-confetti · JavaScript

    canvas-confetti is a lightweight JavaScript library that renders performant confetti animations in the browser using a canvas element.

  33. 36

    G2

    12.6Kantvis/G2 · TypeScript

    G2 is a visualization grammar library for building charts, dashboards, data exploration, and storytelling, inspired by Leland Wilkinson's book 'The Grammar of Graphics'.

  34. 37

    highcharts

    12.5Khighcharts/highcharts · TypeScript

    Highcharts is a JavaScript charting library for building interactive charts, maps, and dashboards, rendered mainly with SVG and some canvas/WebGL.

  35. 38

    G6

    12.3Kantvis/G6 · TypeScript

    G6 is a graph visualization framework for the web: an engine for drawing, laying out, analyzing and interacting with relational data like networks, with animation, themes and plugins.

  36. 39

    signature_pad

    12.1Kszimek/signature_pad · TypeScript

    A JavaScript library for drawing smooth signatures in the browser, based on HTML5 canvas and variable-width Bézier curve interpolation from Square's Smoother Signatures post.

  37. 40

    WebRTC-Experiment

    12.1Kmuaz-khan/WebRTC-Experiment · JavaScript

    A one-stop hub of WebRTC demos, experiments and JavaScript libraries: screen sharing, video conferencing, file sharing, recording, collaborative drawing and voice translation.

  38. 41

    vega

    12Kvega/vega · JavaScript

    Vega is a declarative visualization grammar: you describe charts and interactive views in a JSON format, and Vega renders them using HTML5 Canvas or SVG.

  39. 42

    dom-to-image

    10.8Ktsayen/dom-to-image · JavaScript

    dom-to-image is a JavaScript library that turns any DOM node into an image — either a vector SVG or a raster PNG/JPEG — rendered with HTML5 canvas.

  40. 43

    node-canvas

    10.7KAutomattic/node-canvas · JavaScript

    node-canvas is a Cairo-backed implementation of the HTML5 Canvas API for Node.js, letting you draw shapes, images and text on the server and export the result as PNG, JPEG, PDF or SVG.

  41. 44

    zdog

    10.7Kmetafizzy/zdog · JavaScript

    Zdog is a round, flat, designer-friendly pseudo-3D engine for the web: you build 3D models in JavaScript by adding shapes, and it renders them with 2D drawing APIs to canvas or SVG.

  42. 45

    ai-town

    10.7Ka16z-infra/ai-town · TypeScript

    AI Town is an MIT-licensed starter kit for building a virtual town where AI characters live, chat, and socialize with each other.

  43. 46

    krita

    10.6KKDE/krita · C++

    Krita is a free, open-source digital painting application for creating professional illustrations, comics, concept art, and texture/VFX work from start to finish, built on the KDE and Qt frameworks.

  44. 47

    Pixelorama

    10.6KOrama-Interactive/Pixelorama · GDScript

    Pixelorama is a free and open-source pixel art multitool: an editor for creating sprites, tiles and animations, with a large toolbox built around pixel art and game art.

  45. 48

    uPlot

    10.6Kleeoniya/uPlot · JavaScript

    uPlot is a small (~50 KB min), fast, MIT-licensed JavaScript charting library for time series, line, area, OHLC and bar charts, drawn on Canvas 2D in the browser.

  46. 49

    leonsans

    10.2Kcmiscm/leonsans · JavaScript

    Leon Sans is a geometric sans-serif typeface that is generated with code instead of being a static font file, letting you render and animate it in the HTML5 Canvas element.

  47. 50

    trianglify

    10.1Kqrohlf/trianglify · JavaScript

    Trianglify is a JavaScript library that algorithmically generates colorful triangle-mesh background images as SVG — decorative low-poly-style patterns you can drop into a web page.

  48. 51

    react-native-skia

    8.7Kwcandillon/react-native-skia · TypeScript

    React Native Skia brings Google's Skia graphics engine (the renderer used by Chrome and Android) to React Native, letting you write high-performance 2D graphics, shaders, and animations using a React component API.

  49. 52

    html-ppt-skill

    8.7Klewislulu/html-ppt-skill · HTML

    html-ppt (HTML PPT Studio) is an AgentSkill that lets AI coding agents generate professional HTML presentations — complete with 36 themes, 31 page layouts, 15 full-deck templates and 47 animations, plus a presenter mode — all as pure static HTML/CSS/JS with no build step.

  50. 53

    infinite-canvas

    7.7Kbasketikun/infinite-canvas · TypeScript

    An open-source infinite canvas workbench for AI creation: it puts canvas orchestration, AI image generation, reference-image editing, a chat assistant, a prompt library and asset management in one interface.

  51. 54

    Cowart

    6Kzhongerxin/Cowart · JavaScript

    Cowart is a native infinite canvas widget plugin for Codex, built on tldraw, used for sketching ideas, annotating, generating images from prompts, and iterating on images based on annotations.

  52. 55

    awesome-opus5-5-videos

    5.6Kyihui-dev/awesome-opus5-5-videos

    A curated, growing collection of viral videos made with Claude Opus 5.5, each paired with the exact prompt its creator shared and a link to the original post.

  53. 56

    canvas-ui

    5KDavidHDev/canvas-ui · TypeScript

    Canvas UI is an open-source library of creative canvas components for building live, interactive web effects. Each component draws fluid simulations, shader effects, or 3D scenes directly over your real, still-clickable HTML.

  54. 57

    huashu-art-motion

    4.2Kalchaincyf/huashu-art-motion · JavaScript

    huashu-art-motion is an agent skill that turns a coding agent into an animator: it writes and runs JavaScript/Canvas code to produce art-style animations, rather than generating video frames directly.

  55. 58

    axton-obsidian-visual-skills

    3.6Kaxtonliu/axton-obsidian-visual-skills

    A Visual Skills Pack that gives Claude Code the ability to turn plain text into Obsidian Canvas, Excalidraw, and Mermaid diagrams on request.

  56. 59

    lemo-opuscar

    2.8Klemomo-ai/lemo-opuscar · JavaScript

    Lemo-Opuscar is a Claude Code skill that lets Claude Opus 5.5 direct, draw, score and mix short films entirely in code, with 43 ready-made film styles you can apply to your own story.

  57. 60

    onetake

    2.6Kfeitangyuan/onetake · Python

    onetake is a Claude Agent Skill that generates product launch films, teasers and feature demos as one unbroken continuous camera take instead of a slideshow of separate scenes.

  58. 61

    PDoomVideo

    2.2KJohnHeibel/PDoomVideo · JavaScript

    The source code behind 'I'm Upping My P(doom)', a music video generated entirely by Claude Opus 5.5 in Claude Code — every scene, character and transition came from the model, not a human animator.

  59. 62

    breakscale

    1.7Kxevrion/breakscale · TypeScript

    Breakscale is a system design simulator where you place components on a canvas, wire them together, then drag a traffic slider and watch a real discrete-event simulation show latency, queues, and failures emerge, so you can learn how distributed systems behave under load.

  60. 63

    agor

    1.5Kpreset-io/agor · TypeScript

    Agor is a web workspace that brings teams and AI coding agents together on live spatial boards, letting people run agents like Claude Code, Codex, and Gemini on isolated git branches while sharing memory, skills, and dev environments.

  61. 64

    Vela

    1.2KLuxAlgo/Vela · TypeScript

    Vela is a free, open-source library for building fast financial charts in the browser, built around a headless core with a native WebGL2 renderer (canvas2d fallback) and a plugin SDK for swapping in custom data, scripting engines, and renderers.

  62. 65

    mg-styles-15

    960Vincentwei1021/mg-styles-15 · Python

    A collection of 15 ten-second motion-design films, each in a different visual style, all made by Claude Opus 5.5 writing code from a single text prompt. The repo publishes every film along with its style notes, full prompt and complete source code.

  63. 66

    ohmygame

    900WhiteTowerAI/ohmygame · TypeScript

    OhMyGame is an open-source desktop app that acts as a one-person game studio: an AI agent writes the design doc, generates art, video and 3D assets, codes the game, playtests it, and publishes a shareable link, all from one canvas.

  64. 67

    doop

    870kgoedecke/doop · TypeScript

    Doop is an open-source, self-hosted alternative to Paper.design: a multiplayer design canvas where humans design in the browser while AI agents design through a built-in MCP server, with every edit streaming live to everyone watching.

  65. 68

    open-pencil-cloud

    591yoohoo360/open-pencil-cloud · TypeScript

    An AI-native, open-source Figma alternative: a product fork of the OpenPencil design editor. It keeps the upstream engine (.fig/.pen, CanvasKit rendering, SceneGraph) and adds a React shell, cloud documents, and internal deployment.

  66. 69

    explainroo

    579vincentsch/explainroo · JavaScript

    explainroo lets a coding agent turn a script into a narrated explainer video or product demo. It uses a local voice model for narration, Whisper for word timing, and a canvas renderer to draw synced illustrations, then ffmpeg assembles everything into an MP4.

  67. 70

    dsh-synapse

    533liangmianya/dsh-synapse · JavaScript

    dsh-synapse is a visual, non-linear conversation workspace plugin for DeepSeek Harness (DSH) that turns the follow-ups, branches, and sessions in a workspace into one browsable, draggable, zoomable map.

  68. 71

    procedural-film

    511kuhnhomeuk-cell/procedural-film · JavaScript

    An agent skill that turns a topic into a 30-second vertical film, with every pixel drawn in vanilla JavaScript on a canvas and every sound synthesised with Web Audio, so no stock footage or audio files are used. It outputs a self-contained HTML player plus MP4 exports.

  69. 72

    AdCraft

    422GML-MMGroup/AdCraft · Python

    AdCraft is an agentic AI video production platform for making advertising videos end-to-end, from a vague idea to a finished ad, orchestrated by a team of specialized AI agents on an editable infinite canvas.

  70. 73

    robot-heads

    353fayazara/robot-heads · TypeScript

    robot-heads is a React component library that renders animated, TV-headed robot avatars with LED-matrix faces showing what an AI agent is currently doing — thinking, searching, listening, speaking and more.

  71. 74

    sylva

    348MengTo/sylva · HTML

    Sylva is an interactive Three.js landscape study: a procedural, moss-covered root grows through an editorial conservation scene and reacts to the pointer as if it were alive.

  72. 75

    riso-windowseat

    297sevenevesai/riso-windowseat · HTML

    Procedural risograph-style animated films, each a single self-contained HTML file of Canvas 2D and Web Audio, plus the Claude Code skills, craft docs and tools used to make them.

  73. 76

    vistep

    240int64ago/vistep · TypeScript

    vistep.ai is a bilingual collection of short visual stories that explain everyday mechanisms, science and computation, letting you watch a process happen and then experiment with the underlying model.

  74. 77

    agent-weave

    205bushm2092-del/agent-weave · TypeScript

    AgentWeave is a local-first, spatial workspace for running individual AI agents and coordinating multi-agent teams on an infinite canvas, supporting providers like Codex, Claude, OpenCode, and Pi.

  75. 78

    bead-grid-studio

    194zwhy149/bead-grid-studio · JavaScript

    Bead Grid Studio is a local-first tool that turns an image into an editable, printable fuse-bead (pindou) pattern, with auto color matching, grid coordinates, and material usage stats.

  76. 79

    dsh-openpencil

    186ZSeven-W/dsh-openpencil · TypeScript

    DSH OpenPencil is a plugin that connects DeepSeek Harness (DSH) to OpenPencil, letting an AI agent drive a real, editable, interactive design canvas inside a conversation instead of just returning a generated image.

  77. 80

    kool-brushez

    185blakeshao/kool-brushez · JavaScript

    A small p5.js drawing app with six expressive brushes (Score, Schematic, Balloon, Subway, Crowd, Gunpla) that all draw onto one shared canvas.

  78. 81

    kindergrimm

    171albertobeiz/kindergrimm · JavaScript

    A procedural generator that draws hand-sketched doodle characters directly on canvas, rigs each one bone-by-bone for animation, and wraps them into several small browser games and tools under the name Kindergrimm.

  79. 82

    Jelly-Baby

    170scottstts/Jelly-Baby · JavaScript

    Jelly Baby is a small 3D web toy: a bouncy jelly character living on a tabletop that you poke, stretch, and bounce around on a swing or trampoline, with no goals or scoring.

  80. 83

    loadersz-core

    163lumberjacque/loadersz-core · TypeScript

    loadersz is a dependency-free Canvas loading-animation library for the browser, shipped as a native Web Component with a small imperative TypeScript API and 150 switchable motion states.

  81. 84

    genart-skill

    152camilleroux/genart-skill · JavaScript

    genart is a Claude Code plugin that teaches Claude the technical and ethical groundwork of generative art — seeding a PRNG from a token hash, deterministic rendering, trait and rarity design — and ships scripts to verify a sketch is actually deterministic before you mint it onchain.

  82. 85

    react-native-skia

    149wcandillon/react-native-skia · TypeScript

    React Native Skia brings Google's Skia Graphics Library into React Native apps, giving them the same high-performance 2D rendering engine that powers Chrome, Android, Flutter and Firefox.

  83. 86

    PCB_lightgraph_Portable

    146Ashlixy17/PCB_lightgraph_Portable · HTML

    This is a portable, browser-based web version of PCB_lightgraph — a tool that converts 2D illustrations into layered PCB production artwork (copper traces, soldermask, silkscreen, backlight layer) for making light-up PCB art pieces.

  84. 87

    astra-chatgpt-hyperframes

    141Tejashmakwana/astra-chatgpt-hyperframes · JavaScript

    This is the reproducible source for a ChatGPT-themed motion-design video, adapted from motion designer Rajmoni's (@Nexaabyraj) original reference and rendered with Hyperframes. It ships the raw assets, render scripts and a verification report so anyone can rebuild the exact MP4.

Often tagged together