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: How to create a slick website like this? | reddit.com/r/webdev | 2021-10-12

    the 3D models in the background are mostly handled via a 3D JS framework such as threejs

  • GitHub repo Chart.js

    Simple HTML5 Charts using the <canvas> tag

    Project mention: Week 2 of the journey: Settling on the frameworks | reddit.com/r/EntrepreneurRideAlong | 2021-10-07

    I used this guide to add a sidebar for navigation and Chartjs library to chart out the data for illustration.

  • Syncfusion

    Build stunning web applications quickly using Syncfusion JavaScript UI controls.. The Syncfusion JavaScript suite offers more than 65 cross-platform, responsive, and lightweight JS/HTML5 UI controls for building modern web applications.

  • GitHub repo anime.js

    JavaScript animation engine

    Project mention: How to make a button transform to a heart shape on hovering | reddit.com/r/css | 2021-09-12

    You can use SVG Morphing to do that. There are many libraries that offer that feature, one of them is (https://animejs.com/) [anime js].

  • 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: Snakes - my first HTML5 multiplayer browser game - 100% JavaScript - WITH BOTS! - works on desktop, iPhone, android - Phaser for rendering, NodeJS game server with real-time networking using WebRTC's data channels (UDP!) hosted on FREE 6GB ARM compute from IBM | reddit.com/r/gamedev | 2021-10-14

    The visual rendering is done by Phaser. I have a working version using Pixi as well, but went with Phaser for arbitrary reasons. https://phaser.io/ https://pixijs.com/

  • GitHub repo A-Frame

    :a: web framework for building virtual reality experiences.

    Project mention: Interactive game map over a web browser | reddit.com/r/Frontend | 2021-10-05

    Yup, this was built with three.js - which is a layer of abstraction on-top of vanilla WebGL stuff - it's been around for a decade or so, but if you haven't heard of it before then I'm excited for you! So many cool new things to discover! There's also a-frame, which provides a layer on-top of three.js to give it an entity-component system (like Unity), and babylon.js - which is three.js's main competitor.

  • 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 ▲● ■

  • Nanos

    Run Linux Software Faster and Safer than Linux with Unikernels.

  • 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 vega

    A visualization grammar.

    Project mention: What Next? | reddit.com/r/PowerBI | 2021-09-27

    D3.js and Vega are extremely useful to know from a visualisation perspective.

  • GitHub repo Luckysheet

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

  • GitHub repo dom-to-image

    Generates an image from a DOM node using HTML5 canvas

    Project mention: Can anyone help develop a button that takes a screenshot of an embedded vimeo video? | reddit.com/r/elementor | 2021-06-28

    Hmm, tricky. I just tried it with dom-to-img and it didn't work.

  • 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 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: paintz: A simple drawing app that runs in a web browser, designed to be an MS Paint substitute for Chrome OS devices. | reddit.com/r/coolgithubprojects | 2021-10-05

    If anyone's looking for an older-school version, https://jspaint.app is my most comfortable picture editing tool.

  • 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: CSS Deep | dev.to | 2021-02-26

    melonjs/melonJS - a fresh & lightweight javascript game engine

  • GitHub repo ccapture.js

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

    Project mention: rivers | reddit.com/r/generative | 2021-08-17

    I use ccapture, using the png option, which will spit out a tar with a png of each frame, and then I stitch them with ffmpeg.

  • GitHub repo html2pdf.js

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

    Project mention: Tried everything and this keeps me from generating the pdf. Anyone encountered this or just me? | reddit.com/r/vuejs | 2021-06-22

    Try HTML2PDF.js instead. It's a browser-based PDF generator, not a Node-based generator.

  • 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
  • GitHub repo merge-images

    Easily compose images together without messing around with canvas

    Project mention: 12 JavaScript Image Manipulation Libraries For Your Next Web App | dev.to | 2021-06-09

    MORE INFO

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 2021-10-15.

Index

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

Project Stars
1 three.js 74,907
2 Chart.js 55,054
3 anime.js 40,570
4 Phaser 30,545
5 A-Frame 13,139
6 react-canvas 12,737
7 matter-js 12,146
8 x-spreadsheet 11,847
9 vega 9,438
10 Luckysheet 9,145
11 dom-to-image 7,852
12 piskel 7,704
13 two.js 7,294
14 jspaint 5,877
15 heatmap.js 5,636
16 tui.image-editor 4,440
17 React Konva 4,199
18 JsBarcode 4,126
19 melonJS 3,596
20 ccapture.js 2,734
21 html2pdf.js 2,170
22 freeciv-web 1,600
23 merge-images 1,283
Find remote jobs at our new job board 99remotejobs.com. There are 34 new remote jobs listed recently.
Are you hiring? Post a new remote job listing for free.
Scout APM: A developer's best friend. Try free for 14-days
Scout APM uses tracing logic that ties bottlenecks to source code so you know the exact line of code causing performance issues and can get back to building a great product faster.
scoutapm.com