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. Learn more →
Top 23 JavaScript Canva Projects
-
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 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!
-
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 | reddit.com/r/DestroyMyGame | 2023-03-15Hmm 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.
-
Project mention: Is it worth learning Three.js in 2023 ? | reddit.com/r/learnjavascript | 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 https://aframe.io to create 3D XR sites and build your knowledge of three.js more slowly over time with a lower bar of entry.
-
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.
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.
-
Project mention: Roast my app: After 2 weeks learning Rust and Tauri, I hacked a few libraries together to build a simple Spreadsheet | reddit.com/r/rust | 2023-03-22
https://github.com/myliang/x-spreadsheet for the spreadsheet app in js
-
-
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? | reddit.com/r/Python | 2023-03-06
It’s based on Vega https://vega.github.io/vega/ which means it’s an already matured backend. Vega-lite is the Javascript package and Altair is the Python.
-
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 | reddit.com/r/PixelArt | 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. https://github.com/piskelapp/piskel https://github.com/Orama-Interactive/Pixelorama
-
-
-
Project mention: Trying to build a front end interactive browser or app experience where touch to screen simulates a visual heat map. | reddit.com/r/webdev | 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
-
I found a browser-based clone https://jspaint.app/ that I use probably every day to whiteboard with my coworkers over zoom. It's probably become a meme at this point.
-
-
tui.image-editor
🍞🎨 Full-featured photo image editor using canvas. It is really easy, and it comes with great filters.
-
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
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: https://github.com/lindell/JsBarcode
-
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.
-
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? | reddit.com/r/webdev | 2022-08-24
-
Check out Dygraph ... https://github.com/danvk/dygraphs
-
Project mention: LumoTray - A multi-monitor wallpaper manager, fullscreen manager and custom menu builder | reddit.com/r/SideProject | 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
- Which game engines are those shitty mobile game ads usually made in?
- New WebGL library "Silver Rain"
- Looking for unfiltered feedback on my browser-based platform fighter trailer
- I started a new job this week and shipped this gorgeous settings UI yesterday
- Is it worth learning Three.js in 2023 ?
- Scrawl-canvas - a Javascript library for working with the HTML5 <canvas> element
- Game engine for JavaScript engineer
-
A note from our sponsor - InfluxDB
www.influxdata.com | 23 Mar 2023
Index
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.
www.sonarsource.com