awesome-canvas - A curated list of awesome HTML5 Canvas with examples, related articles and posts.

  •        13

A curated list of awesome Canvas examples, related articles and posts. Inspired by awesome-python. Please take a quick gander at the contribution guidelines first.

https://github.com/raphamorim/awesome-canvas

Tags
Implementation
License
Platform

   




Related Projects

awesome-webgl - A curated list of awesome WebGL libraries, resources and much more

  •    

This is a curated list of awesome WebGL libraries, resources and much more. WebGL (Web Graphics Library) is a JavaScript API for rendering interactive 3D computer graphics and 2D graphics within any compatible web browser without the use of plug-ins. WebGL is integrated completely into all the web standards of the browser allowing GPU accelerated usage of physics and image processing and effects as part of the web page canvas.

canvas-nest.js - :cancer: Interactive Particle / Nest System With JavaScript and Canvas, no jQuery.

  •    Javascript

A nest backgroud of website draw on canvas. 中文 Readme 帮助文档. Insert the code below between <body> and </body>.

wind-js - An demo animation of wind on a Canvas layer in the JSAPI

  •    Javascript

This project is an experiment in client-side data processing and visualization. Most of the code in this project is taken from https://github.com/cambecc/earth and has been re-purposed to support easier application to a variety of mapping APIs and Frameworks. The code for this project uses nothing but an HTML5 Canvas element and pure Javascript. The data come from the Global Forecast System which produces a large variety of datasets as continuous global gridded datasets (more info below). The data is passed into a JS class called Windy which takes the bounds of the map, the data, and the canvas element and then applies a Bilinear Interpolation to generate a smooth surface. Once the surface has been generated a function randomly places "particles" onto the canvas at random x/y points. Each particle is then "evolved", moving in a direction and at a velocity dictated by the interpolated surface.

darkroomjs - [UNMAINTAINED] Extensible image editing tool in your browser

  •    Javascript

DarkroomJS is a JavaScript library which provides basic image editing tools in your browser, such as rotation or cropping. It is based on the awesome FabricJS library to handle images in HTML5 canvas. It's easy to get a javascript script to crop an image in a web page. But if your want more features like rotation or brightness adjustment, then you will have to do it yourself. No more jQuery plugins here. It only uses the power of HTML5 canvas to make what ever you want with your image.

rough - Create graphics with a hand-drawn, sketchy, appearance

  •    Javascript

Rough.js is a light weight (~9kB gzipped) graphics library that lets you draw in a sketchy, hand-drawn-like, style. The library defines primitives to draw lines, curves, arcs, polygons, circles, and ellipses. It also supports drawing SVG paths. Rough.js works with both Canvas and SVG.


EaselJS - The Easel Javascript library provides a full, hierarchical display list, a core interaction model, and helper classes to make working with the HTML5 Canvas element much easier

  •    Javascript

EaselJS is a library for building high-performance interactive 2D content in HTML5. It provides a feature-rich display list to allow you to manipulate and animate graphics. It also provides a robust interactive model for mouse and touch interactions.It is excellent for building games, generative art, ads, data visualization, and other highly graphical experiences. It works well alone, or with the rest of the CreateJS suite: SoundJS, PreloadJS, and TweenJS.

jQuery layout background canvas plugin: gradients, rounded corners without CSS

  •    JQuery

jQuery layout and background canvas plugins allow web designers to draw with the canvas API in the background of a div or whatever block style element. The full canvas API power gives the flexibility to draw gradients, rounded corners without CSS trickery.

f2 - 📱📈An elegant, interactive and flexible charting library for mobile.

  •    Javascript

F2 is born for mobile, developed for developers as well as designers. It is Html5 Canvas-based, and is also compatible with Node.js, Weex and React Native. Based on the grammar of graphics, F2 provides all the chart types you'll need. Our mobile design guidelines enable better user experience in mobile visualzation projects. Special thanks to Leland Wilkinson, the author of The Grammar Of Graphics, whose book served as the foundation for F2 and G2.

konva - Konva

  •    Javascript

Konva is an HTML5 Canvas JavaScript framework that enables high performance animations, transitions, node nesting, layering, filtering, caching, event handling for desktop and mobile applications, and much more. You can draw things onto the stage, add event listeners to them, move them, scale them, and rotate them independently from other shapes to support high performance animations, even if your application uses thousands of shapes. Served hot with a side of awesomeness.

console.image - The one thing Chrome Dev Tools didn't need.

  •    Javascript

The day has come when you have the ability to put images in the console. Checkout here for a demo and open up the dev tools. Also, check out the awesome chrome extension by @jffry. Console.image now has a little baby sister, console.snapshot. It snapshots the canvas and outputs it to the console to make debugging the canvas a little less dramatic. Shoutout to https://github.com/escusado/console.meme too, I would have forked it if I realized it existed. Basically, you console.image(url).

seeThru - HTML5 video with alpha channel transparencies

  •    Javascript

Your HTML5 video source is re-rendered into a canvas-element, adding the possibility to use transparencies in your video. Alpha information is either included in the video's source file (moving) or in a seperate <img>-element (static). The package also ships with a simple CLI tool for automatically converting your RGBA video sources into the correct format.

awesome-creative-coding - 🎨 Creative Coding: Generative Art, Data visualization, Interaction Design, Resources

  •    HTML

Carefully curated list of awesome creative coding resources primarily for beginners/intermediates. Creative coding is a different discipline than programming systems. The goal is to create something expressive instead of something functional. Interaction design, information visualization and generative art are all different types of creative coding – which has become a household term describing artworks articulated as code.

react-particle-effect-button - Bursting particle effect buttons for React 🎉

  •    Javascript

Bursting particle effect buttons for React. This library is a React port of an awesome Codrops Article by Luis Manuel (original source).

Chart.js - Simple HTML5 Charts using the <canvas> tag

  •    Javascript

Simple HTML5 charts using the canvas element. It's easy to get started with Chart.js. All that's required is the script included in your page along with a single <canvas> node to render the chart. It redraws charts on window resize for perfect scale granularity.

isomer - Simple isometric graphics library for HTML5 canvas

  •    Javascript

An isometric graphics library for HTML5 canvas. View the official project page or try it out.

stage.js - 2D HTML5 rendering engine for game development

  •    Javascript

Stage.js is a 2D HTML5 JavaScript library for cross-platform game development, it is lightweight, fast and open-source. Canvas is the graphic component of HTML5 game development, but it only has a drawing API and there is no data model like DOM to compose your application. You need to manually draw your application and manage rendering cycles to play it. Moreover, mouse events are only available at entire Canvas level and they also need to be processed manually.

awesome-linux - :penguin: A list of awesome projects and resources that make Linux even more awesome

  •    

We all know that Linux is awesome, but here's a list of especially awesome things related to the Linux ecosystem. You might also want to check awesome-c, awesome-shell, awesome-sysadmin, and awesome-security.

vintageJS - Add a retro/vintage effect to images using the HTML5 canvas element

  •    Javascript

Add a retro/vintage effect to images using the HTML5 canvas element. vintagejs is a function that takes a source (URL, ImageElement or CanvasElement) and an effect (object with all the options) and returns a Promise that resolves to a result object.





We have large collection of open source products. Follow the tags from Tag Cloud >>


Open source products are scattered around the web. Please provide information about the open source projects you own / you use. Add Projects.