JavaScript Canvas

Open-source JavaScript projects categorized as Canvas

Top 23 JavaScript Canva Projects

  • three.js

    JavaScript 3D Library.

    Project mention: | | 2023-03-22

    I combined first person perspective with golf to make this game. I saw some other games that already did this, but I wasn't satisfied with them. I used three.js for the 3D physics engine and Blender for modeling the levels. The other balls in the game are other players' previous runs -- they aren't live / real-time.

  • Chart.js

    Simple HTML5 Charts using the <canvas> tag

    Project mention: GUI w/ powershell scripts | | 2023-03-22

    Chart.js for really nice data visuals (jQuery to load/update data)

  • Appwrite

    Appwrite - The Open Source Firebase alternative introduces iOS support . Appwrite is an open source backend server that helps you build native iOS applications much faster with realtime APIs for authentication, databases, files storage, cloud functions and much more!

  • anime.js

    JavaScript animation engine

    Project mention: Adding animated objects | | 2023-03-14

    Look into some animation frameworks like GSAP or Anime.js.

  • Phaser

    Phaser is a fun, free and fast 2D game framework for making HTML5 games for desktop and mobile web browsers, supporting Canvas and WebGL rendering.

    Project mention: Looking for unfiltered feedback on my browser-based platform fighter trailer | | 2023-03-15

    Hmm I don't know about tutorials, but I would recommend staying away from the DOM for any game that's real time (so, no React). Instead use a WebGL rendering library like pixi.js. You could also try out a framework/engine like Phaser, which uses pixi under the hood but provides more structure for your project if you're into that.

  • A-Frame

    :a: Web framework for building virtual reality experiences.

    Project mention: Is it worth learning Three.js in 2023 ? | | 2023-03-03

    Right now I believe it's still very niche, but with time it will continue to grow and grow. There are a lot of emerging technologies built on three.js that are barely just starting to get off the ground. It's really the core of most Web XR technologies and will still be here when you are ready if you feel node.js is a safer bet right now. If you don't feel confident math wise for it just yet, you can also look into the frameworks built on top of it like A-Frame to create 3D XR sites and build your knowledge of three.js more slowly over time with a lower bar of entry.

  • matter-js

    a 2D rigid body physics engine for the web ▲● ■

    Project mention: Phaser vs PixiJS for making 2D games | | 2022-08-18

    Another option is to add a third-party physics library such as Matter.js, although setting up and integrating the physics library can be tricky. If you need physics in your game, especially more complex physics effects, Phaser is a better choice.

  • Luckysheet

    Luckysheet is an online spreadsheet like excel that is powerful, simple to configure, and completely open source.

    Project mention: config for luckysheet | | 2023-03-22

    You might be better off asking their community.

  • InfluxDB

    Access the most powerful time series database as a service. Ingest, store, & analyze all types of time series data in a fully-managed, purpose-built database. Keep data forever with low-cost storage and superior data compression.

  • x-spreadsheet

    A web-based JavaScript(canvas) spreadsheet

    Project mention: Roast my app: After 2 weeks learning Rust and Tauri, I hacked a few libraries together to build a simple Spreadsheet | | 2023-03-22 for the spreadsheet app in js

  • react-canvas

    High performance <canvas> rendering for React components

  • vega

    A visualization grammar.

    Project mention: If you had to pick a library from another language (Rust, JS, etc.) that isn’t currently available in Python and have it instantly converted into Python for you to use, what would it be? | | 2023-03-06

    It’s based on Vega which means it’s an already matured backend. Vega-lite is the Javascript package and Altair is the Python.

  • piskel

    A simple web-based tool for Spriting and Pixel art.

    Project mention: My somewhat first attempt at pixel art, Definitely not as good as some people out there, but I think this one turned out good | | 2022-12-07

    You're welcome! You got me interested now that I know piskel can be downloaded. From looking at their github pages I think the major diffrence is piskel is more for pixel sprites and pixelorama is more towards pixel art.

  • zdog

    Flat, round, designer-friendly pseudo-3D engine for canvas & SVG

    Project mention: Web Scraping GitHub Page | | 2022-09-27
  • dom-to-image

    Generates an image from a DOM node using HTML5 canvas

    Project mention: Exporting html dom elements as png in javascript | | 2022-07-01
  • two.js

    A renderer agnostic two-dimensional drawing api for the web.

    Project mention: Trying to build a front end interactive browser or app experience where touch to screen simulates a visual heat map. | | 2022-11-25

    Javascript touch events paired with WebGL would be the route I’d go. There are some really great libraries for WebGL (twojs) or working with SVG (mojs) if you want to keep it simple

  • jspaint

    🎨 Classic MS Paint, REVIVED + ✨Extras

    Project mention: Why is your data tech stack? | | 2023-03-21

    I found a browser-based clone that I use probably every day to whiteboard with my coworkers over zoom. It's probably become a meme at this point.

  • heatmap.js

    🔥 JavaScript Library for HTML5 canvas based heatmaps

  • tui.image-editor

    🍞🎨 Full-featured photo image editor using canvas. It is really easy, and it comes with great filters.

  • canvas-confetti

    🎉 on-demand confetti gun

    Project mention: 4 new cool svelte actions | | 2023-03-17

    My personal favorite is confettiAction, thanks to Kiril Vatev, for canvas-confetti.

  • JsBarcode

    Barcode generation library written in JavaScript that works in both the browser and on Node.js

    Project mention: Make your own temple recommend! | | 2022-04-06

    As discussed previously, the barcode is the key printed part of a TR as far as access control goes. Generating a barcode by hand is tedious, but computers can do it easily. In fact, there are a lot of free software libraries that will generate barcodes for you and allow you to customize pretty much every aspect of them. For this demo, I used the JsBarcode library, which can be imported directly into a webpage without needing to download anything:

  • ccapture.js

    A library to capture canvas-based animations at a fixed framerate

    Project mention: Making YouTube video with React | | 2023-02-25

    I also tried to find a better recording method. Since I’m now using canvas, there are some solutions to recording that seemed quite elegant. For example, paper.js uses requestAnimationFrame to achieve its smooth animation. There are libraries like ccapture.js that hooks into the various methods like requestAnimationFrame and setInterval, allowing it to render each frame separately.

  • html2pdf.js

    Client-side HTML-to-PDF rendering using pure JS.

    Project mention: Is there a free source available that I can incorporate into my website which will convert HTML/CSS to a PDF that the user can then save locally? | | 2022-08-24
  • dygraphs

    Interactive visualizations of time series using JavaScript and the HTML canvas tag

    Project mention: CCR2004-1G-12S+2XS traffic, CPU hitting 65% | | 2022-08-17

    Check out Dygraph ...

  • matrix

    matrix (web-based green code rain, made with love)

    Project mention: LumoTray - A multi-monitor wallpaper manager, fullscreen manager and custom menu builder | | 2023-01-02

    [0] Customizable version of the open source Matrix Code by Rez Mason with easier configuration UI

  • Sonar

    Write Clean JavaScript Code. Always.. Sonar helps you commit clean code every time. With over 300 unique rules to find JavaScript bugs, code smells & vulnerabilities, Sonar finds the issues while you focus on the work.

NOTE: The open source projects on this list are ordered by number of github stars. The number of mentions indicates repo mentiontions in the last 12 Months or since we started tracking (Dec 2020). The latest post mention was on 2023-03-22.

JavaScript Canvas related posts


What are some of the best open-source Canva projects in JavaScript? This list will help you:

Project Stars
1 three.js 90,079
2 Chart.js 60,114
3 anime.js 44,762
4 Phaser 33,767
5 A-Frame 15,141
6 matter-js 14,362
7 Luckysheet 13,249
8 x-spreadsheet 13,134
9 react-canvas 13,015
10 vega 10,287
11 piskel 9,658
12 zdog 9,515
13 dom-to-image 9,266
14 two.js 7,961
15 jspaint 6,682
16 heatmap.js 5,933
17 tui.image-editor 5,862
18 canvas-confetti 4,962
19 JsBarcode 4,846
20 ccapture.js 3,260
21 html2pdf.js 3,108
22 dygraphs 3,058
23 matrix 2,941
Write Clean JavaScript Code. Always.
Sonar helps you commit clean code every time. With over 300 unique rules to find JavaScript bugs, code smells & vulnerabilities, Sonar finds the issues while you focus on the work.