JavaScript Canvas

Open-source JavaScript projects categorized as Canvas | Edit details

Top 23 JavaScript Canva Projects

  • GitHub repo three.js

    JavaScript 3D Library.

    Project mention: Building an AR App with Markers | dev.to | 2022-01-19

    You'll also find that JavaScript AR systems commonly use Three.js or A-frame to handle rendering objects. The app we're making is a little unique in that it's built around the browser. Most AR apps are built for use on mobile devices, but this is a way that all JavaScript developers can play with AR without needing mobile development knowledge.

  • GitHub repo Chart.js

    Simple HTML5 Charts using the <canvas> tag

    Project mention: Interactive websites with graphs that get updated when filters are triggered. | reddit.com/r/learnjavascript | 2022-01-18

    Have a look at Chart.js and specifically the git repo in terms of how to use data and interact with the canvas API.

  • OPS

    OPS - Build and Run Open Source Unikernels. Quickly and easily build and deploy open source unikernels in tens of seconds. Deploy in any language to any cloud.

  • GitHub repo anime.js

    JavaScript animation engine

    Project mention: Hey there Redditors! Can you guys tell me how to do this sort of animation on a website. I am fluent with Adobe After Effects and other design tools but don't know how websites are animated | reddit.com/r/Frontend | 2022-01-16

    Another interesting library is Animejs. But yeah, you need to know JavaScript in order to use these libraries.

  • GitHub repo 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: Where do I begin for web game development? | reddit.com/r/gamedev | 2022-01-12

    If you're already familiar with web technologies, consider using Phaser

  • GitHub repo A-Frame

    :a: web framework for building virtual reality experiences.

    Project mention: Building an AR App with Markers | dev.to | 2022-01-19

    You'll also find that JavaScript AR systems commonly use Three.js or A-frame to handle rendering objects. The app we're making is a little unique in that it's built around the browser. Most AR apps are built for use on mobile devices, but this is a way that all JavaScript developers can play with AR without needing mobile development knowledge.

  • GitHub repo react-canvas

    High performance <canvas> rendering for React components

    Project mention: Google Docs will move to canvas based rendering instead of DOM | news.ycombinator.com | 2021-05-12

    I remember Flipboard using canvas to render their UI before using react, which has the same idea, you can look at the repo and their post about it:

    https://github.com/Flipboard/react-canvas

  • GitHub repo matter-js

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

    Project mention: Matter.js z-index? | reddit.com/r/webdev | 2021-11-14

    https://github.com/liabru/matter-js/issues/243 was a bit confusing. The solutions in this thread don't seem to work for me, and i cant find any information elsewhere.

  • Scout APM

    Less time debugging, more time building. Scout APM allows you to find and fix performance issues with no hassle. Now with error monitoring and external services monitoring, Scout is a developer's best friend when it comes to application development.

  • GitHub repo x-spreadsheet

    A web-based JavaScript(canvas) spreadsheet

    Project mention: X-spreadsheet: ability to edit styling for table headers | news.ycombinator.com | 2021-07-06
  • GitHub repo Luckysheet

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

    Project mention: alternative to google sheets | reddit.com/r/selfhosted | 2022-01-09

    uiuiui i just came across this: https://github.com/mengshukeji/Luckysheet

  • GitHub repo vega

    A visualization grammar.

    Project mention: Deneb: Declarative Visualization in Power BI | reddit.com/r/PowerBI | 2021-11-24

    As such, I've been obsessed with the Vega and Vega-Lite languages for a long time. These use JSON rather than full-blown code, and allow you to build a visual from the ground-up using a grammar of graphics, much like ggplot2 in R or Altair in Python (which is actually an implementation of Vega/Vega-Lite).

  • GitHub repo piskel

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

    Project mention: Build a tiny game for JS13K with Kontra.js | dev.to | 2021-08-13

    Note: There are definitely more sophisticated techniques, and using images this big is a horrendous idea for JS13K. It's better to use something like Aseprite or Piskel to create your own pixel art.

  • GitHub repo dom-to-image

    Generates an image from a DOM node using HTML5 canvas

    Project mention: I created a chrome extension which allows you to see real-time stock data, directly on Twitter, by hovering over stock cashtags | reddit.com/r/SideProject | 2021-12-26

    Hey! The library used to convert the HTML to an image is https://github.com/tsayen/dom-to-image

  • GitHub repo two.js

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

    Project mention: [AskJS] What is the best canvas library to make an app like figma or integromat? | reddit.com/r/javascript | 2021-08-29
  • GitHub repo jspaint

    🎨 Classic MS Paint, REVIVED + ✨Extras

    Project mention: Browser sketch pad | reddit.com/r/InternetIsBeautiful | 2022-01-15

    Aside from being extremely lightweight, this is far less interesting than jspaint, a remake of MSPaint that runs in-browser.

  • GitHub repo heatmap.js

    🔥 JavaScript Library for HTML5 canvas based heatmaps

    Project mention: [OC] Map of Housing Prices in Bilbao, Spain - Data extract from Spanish real estate website | reddit.com/r/dataisbeautiful | 2021-06-07

    Source: https://www.fotocasa.es/es/comprar/viviendas/bilbao/todas-las-zonas/l (Spanish real estate website) For creating the visualization we used https://www.openstreetmap.org, https://leafletjs.com and https://www.patrick-wied.at/static/heatmapjs We also published this demo and a Google Maps version in https://github.com/ZenRows/house-pricing-map. You can find there the original dataset with almost 3000 houses on sale.

  • GitHub repo tui.image-editor

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

    Project mention: A curated list of awesome things related to Vue.js | dev.to | 2021-08-07

    toast-ui.vue-image-editor - Vue Wrapper for TOAST UI Image Editor.

  • GitHub repo React Konva

    React + Canvas = Love. JavaScript library for drawing complex canvas graphics using React.

    Project mention: Redux as a global store | reddit.com/r/reduxjs | 2021-10-11

    This is a known issue for Konva: https://github.com/konvajs/react-konva/issues/188

  • GitHub repo JsBarcode

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

    Project mention: [TypeScript][Express][JsBarcode] Generate 1D barcode images | dev.to | 2021-10-15

    JsBarcode - Barcode generator written in JavaScript

  • GitHub repo melonJS

    a fresh & lightweight javascript game engine

    Project mention: MelonJS 10.0.2 | news.ycombinator.com | 2021-11-04
  • GitHub repo ccapture.js

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

    Project mention: How to create a video editor that works in your browser. | dev.to | 2021-11-26

    The image capture step uses ccapture to ensure that the playback frame is converted to an image. All frame images to webm video.

  • GitHub repo html2pdf.js

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

    Project mention: Watchkeeping: a timesheet compiling tool for Seafarers | dev.to | 2022-01-13

    html2pdf.js: Client-side HTML-to-PDF rendering using pure JS.

  • GitHub repo Proton

    Javascript particle animation library (by drawcall)

    Project mention: Something I can make for my boyfriend? | reddit.com/r/learnprogramming | 2021-12-30

    If you’re advanced, make something like THIS with his name or whatever with Proton JavaScript library.

  • GitHub repo freeciv-web

    Freeciv-web is an Open Source strategy game implemented in HTML5 and WebGL, which can be played online against other players, or in single player mode against AI opponents.

    Project mention: Sid Meier: More Than Just Civilization | news.ycombinator.com | 2021-04-18
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 2022-01-19.

JavaScript Canvas related posts

Index

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

Project Stars
1 three.js 77,896
2 Chart.js 55,900
3 anime.js 41,344
4 Phaser 31,059
5 A-Frame 13,627
6 react-canvas 12,786
7 matter-js 12,670
8 x-spreadsheet 12,148
9 Luckysheet 10,024
10 vega 9,603
11 piskel 8,152
12 dom-to-image 8,124
13 two.js 7,506
14 jspaint 6,038
15 heatmap.js 5,695
16 tui.image-editor 4,829
17 React Konva 4,354
18 JsBarcode 4,228
19 melonJS 3,772
20 ccapture.js 2,788
21 html2pdf.js 2,331
22 Proton 1,973
23 freeciv-web 1,633
Find remote jobs at our new job board 99remotejobs.com. There are 28 new remote jobs listed recently.
Are you hiring? Post a new remote job listing for free.
Deliver Cleaner and Safer Code - Right in Your IDE of Choice!
SonarLint is a free and open source IDE extension that identifies and catches bugs and vulnerabilities as you code, directly in the IDE. Install from your favorite IDE marketplace today.
www.sonarlint.org