CanvasInput - HTML5 Canvas Text Input

  •        66

CanvasInput recreates and improves a full DOM element within HTML5 Canvas. More documentation, examples and demos can be found at CanvasInput.

http://goldfirestudios.com/blog/108/CanvasInput-HTML5-Canvas-Text-Input
https://github.com/goldfire/CanvasInput

Tags
Implementation
License
Platform

   




Related Projects

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.

Toast UI Image Editor - Full featured image editor using HTML5 Canvas

  •    Javascript

Toast UI Image Editor is a full featured image editor using HTML5 Canvas. It's easy to use and provides powerful filters. It supports Crop, Flip, Rotation, Drawing, Shape, Icon, Text, Mask Filter, Image Filter, Grayscale, Invert, Sepia, Blur Sharpen, Emboss, RemoveWhite, GradientTransparency, Brightness, Noise, Pixelate, ColorFilter, Tint, Multiply, Blend and lot more.

p5 - JS client-side library for creating graphic and interactive experiences, based on the core principles of Processing

  •    Javascript

p5.js is a JavaScript library that starts with the original goal of Processing, to make coding accessible for artists, designers, educators, and beginners, and reinterprets this for today's web.Using the original metaphor of a software sketchbook, p5.js has a full set of drawing functionality. However, you're not limited to your drawing canvas, you can think of your whole browser page as your sketch! For this, p5.js has addon libraries that make it easy to interact with other HTML5 objects, including text, input, video, webcam, and sound.

domvas - Domvas implements the missing piece that connects the DOM and Canvas.

  •    Javascript

Domvas implements the missing piece that connects the DOM and Canvas. It gives to the ability to take arbitrary DOM content and paint it to a Canvas of your choice. readyCallback's 'this' and first argument points to a valid, preloaded image node that you can simply draw to your canvas context.


canvas-gauges - HTML5 Canvas Gauge

  •    Javascript

This is tiny implementation of highly configurable gauge using pure JavaScript and HTML5 canvas. No dependencies. Suitable for IoT devices because of minimum code base. If you only need the exact type of the gauge it can be installed using the appropriate npm tag. Currently the following gauges are supported: linear, radial.

digitalrain - Matrix Digital Rain written in Go for HTML5 + Canvas

  •    Go

Digital Rain is an HTML5 + Canvas demo app written entirely in Go. It's intended to mimic the look of the falling text in the movie The Matrix.Digital Rain is available under the MIT License.

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.

origami.js - Powerful and Lightweight Library to create using HTML5 Canvas

  •    Javascript

Initially, it's a tool for teaching geometry, web, and javascript in schools. Currently, it's a powerful library to create using HTML5 Canvas. Want to contribute? Follow these recommendations.

morphdom - Fast and lightweight DOM diffing/patching (no virtual DOM needed)

  •    Javascript

This module was created to solve the problem of updating the DOM in response to a UI component or page being rerendered. One way to update the DOM is to simply toss away the existing DOM tree and replace it with a new DOM tree (e.g., myContainer.innerHTML = newHTML). While replacing an existing DOM tree with an entirely new DOM tree will actually be very fast, it comes with a cost. The cost is that all of the internal state associated with the existing DOM nodes (scroll positions, input caret positions, CSS transition states, etc.) will be lost. Instead of replacing the existing DOM tree with a new DOM tree we want to transform the existing DOM tree to match the new DOM tree while minimizing the number of changes to the existing DOM tree. This is exactly what the morphdom module does! Give it an existing DOM node tree and a target DOM node tree and it will efficiently transform the existing DOM node tree to exactly match the target DOM node tree with the minimum amount of changes. morphdom does not rely on any virtual DOM abstractions. Because morphdom is using the real DOM, the DOM that the web browser is maintaining will always be the source of truth. Even if you have code that manually manipulates the DOM things will still work as expected. In addition, morphdom can be used with any templating language that produces an HTML string.

jcanvas - A jQuery plugin that makes the HTML5 canvas easy to work with.

  •    Javascript

jCanvas brings jQuery's powerful syntax and capability to the HTML5 canvas. Quickly create canvas-based apps that can utilize layers, animations, events, and much more. jCanvas works on all modern browsers and platforms, including iOS and Android.

bootstrap-fileinput - An enhanced HTML 5 file input for Bootstrap 3

  •    Javascript

An enhanced HTML 5 file input for Bootstrap 3.x and 4.x with file preview for various files, offers multiple selection, and more. The plugin allows you a simple way to setup an advanced file picker/upload control built to work specially with Bootstrap CSS3 styles. It enhances the file input functionality further, by offering support to preview a wide variety of files i.e. images, text, html, video, audio, flash, and objects. In addition, it includes AJAX based uploads, dragging & dropping files, viewing upload progress, and selectively previewing, adding, or deleting files. NOTE: An alternative new Krajee Explorer Theme (preview shown below) for bootstrap-fileinput has been released and available since v4.3.7. For more theming options and suggestions refer the theming demos.

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

  •    Javascript

Phaser is a fast, free, and fun open source HTML5 game framework that offers WebGL and Canvas rendering across desktop and mobile web browsers. Games can be compiled to iOS, Android and native apps by using 3rd party tools. You can use JavaScript or TypeScript for development. Phaser is available in two versions: Phaser 3 and Phaser CE - The Community Edition. Phaser CE is a community-lead continuation of the Phaser 2 codebase and is hosted on a separate repo. Phaser 3 is the next generation of Phaser.

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

  •    Javascript

Phaser is a fast, free, and fun open source HTML5 game framework. It uses a custom build of Pixi.js for WebGL and Canvas rendering, and supports desktop and mobile web browsers. Games can be compiled to iOS, Android and native desktop apps via 3rd party tools. You can use JavaScript or TypeScript for development. Years after release, Phaser is still one of the most starred game frameworks on GitHub. Thousands of developers worldwide use Phaser. From indies and multi-national digital agencies, to schools and Universities. Each creating their own incredible games.

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-canvas - A curated list of awesome HTML5 Canvas with examples, related articles and posts.

  •    

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.

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>.

virtual-dom - A Virtual DOM and diffing algorithm

  •    Javascript

Manual DOM manipulation is messy and keeping track of the previous DOM state is hard. A solution to this problem is to write your code as if you were recreating the entire DOM whenever state changes. Of course, if you actually recreated the entire DOM every time your application state changed, your app would be very slow and your input fields would lose focus. virtual-dom is a collection of modules designed to provide a declarative way of representing the DOM for your app. So instead of updating the DOM when your application state changes, you simply create a virtual tree or VTree, which looks like the DOM state that you want. virtual-dom will then figure out how to make the DOM look like this efficiently without recreating all of the DOM nodes.





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.