Home / JavaScript / Editors

A canvas toolkit in coffeescript

Brownie This is a canvas toolkit in coffeescript, it can be used to build a static image/text designer. demo Features high-dpi layers - only one canvas is used absolute/relative position z-index of layer
Information
Category: JavaScript / Editors
Watchers: 1
Star: 20
Fork: 2
Last update: Nov 17, 2023
Resource links
https://github.com/mconintet/brownie

Brownie

This is a canvas toolkit in coffeescript, it can be used to build a static image/text designer.

demo

Features

  • high-dpi
  • layers - only one canvas is used
  • absolute/relative position
  • z-index of layer
  • bring layer to frontend
  • hit test on layer
  • keyboard util
  • layer drag-drop
  • history stack
  • layer handler - move/rotate/delete/resize
  • image layer
  • double click on layer
  • editable text layer
  • auto line breaks
  • mask to bounds
  • stage exportable&importable

Usage

  1. clone this repo
  2. run npm install under repo directory
  3. run git submodule init
  4. run git submodule update
  5. run cake build
  6. open test/example.html to view the examples 😆

Document

Coming...

Licence

MIT

Contents

    fabricjs Javascript Canvas Library, SVG-to-Canvas (& canvas-to-SVG) Parser
    fabricjs Javascript Canvas Library, SVG-to-Canvas (& canvas-to-SVG) Parser
    Automattic Node canvas is a Cairo backed Canvas implementation for NodeJS.
    ZYSzys vue-canvas-nest - A Vue.js component for canvas-nest.
    sstephenson Embedded CoffeeScript templates
    ZYSzys :dizzy: A Vue.js background component for canvas-nest.
    fabricjs Javascript Canvas Library, SVG-to-Canvas (& canvas-to-SVG) Parser
    Mikhus HTML5 Canvas Gauge. Tiny implementation of highly configurable gauge using pure JavaScript and HTML5 canvas. No dependencies. Suitable for IoT devices because of minimum code base.
    zeke Create polygons with the Canvas API
    goessner Lightweight HTML container element as a controller parent for one or more canvas elements
    mattdesl Utilities for sketching in Canvas, WebGL and generative art
    Flipboard High performance <canvas> rendering for React components
    chenxuan0000 vue-canvas-effect - A simple, canvas effect collection for Vue.js.
    samizdatco Skia Canvas is a canvas environment for Node.js
    FriendsOfREDAXO YCOM Impersonate. Login as selected YCOM user 🧙‍♂️in frontend.
    openvinotoolkit OpenVINO™ Toolkit - Deep Learning Deployment Toolkit repository
    JasonEtco 🛠 A toolkit for building GitHub Actions in Node.js
    jorgejgnz Hand Physics Toolkit (HPTK) is a toolkit to build physical hand-driven interactions in a modular and scalable way
    proshoumma Beautifully crafted off canvas menu components for react native applications. Built on top of react-native's Animated library.
    canvg Javascript SVG parser and renderer on Canvas
    vutran :art: Off-canvas menus for React.
    Share this repo

    Related Repos


    Editors
    1.8k
    A simple, general-purpose editor for Linux
    notepadqq Notepadqq Links What is it? Build it yourself Download it What is it? Notepadqq is a text editor designed by developers, for developers. Please visit
     
    Editors
    98
    workflowy like editor built with draft-js. Used in https://deepnotes.in.
    mukeshsoni deepnotes-editor is the editor used in deepnotes.in. It's a clone of the workflowy.com editor written in draft-js. deepnotes-editor can be used as a r
     
    Editors
    183
    DNS Editor working with PowerDNS's new API
    tuxis-ie What is nsedit? nsedit is a DNS editor for PowerDNS. It is created to finally replace poweradmin and take DNS editing to what we're used at in 2014. I
     
    Editors
    909
    A web only WYSIWYG note taking app that saves notes locally in markdown format.
    bangle-io A web only WYSIWYG note taking app that saves notes locally in markdown format.
     
    Editors
    2.6k
    Mercury Editor: The Rails WYSIWYG editor that allows embedding full page editing capabilit...
    jejacks0n Mercury Editor Mercury Editor is a fully featured editor much like TinyMCE or CKEditor, but with a different usage paradigm. It expects that an entire
     
    Editors
    2.4k
    Aloha Editor is a JavaScript content editing library
    alohaeditor Aloha Editor - The HTML5 WYSIWYG Editor New Documentation We're currently writing new new guides. You can find these at /doc/guides/output and on our
     
    Editors
    12.8k
    wangEditor - A lightweight rich text editor, friendly API and use extremely conventient.
    wangeditor-team wangEditor - A lightweight rich text editor, friendly API and use extremely conventient.
     
    Editors
    24
    SVG Quick Editor is a free and open-source SVG editing tool.
    aykutkardas SVG Quick Editor SVG Quick Editor is a free and open-source SVG editing tool. It offers features such as editing SVG colors, viewing or deleting their
     
    Editors
    5
    Theme editor for VK4ME 3 theme engine
    MuseCat77 vk4me_theme_editor My first attempt at programming in js. Theme editor for VK4ME 3 theme engine that made in single HTML file for portability reasons
     
    Editors
    9.8k
    The web-based visual programming editor.
    google Blockly Google's Blockly is a library that adds a visual code editor to web and mobile apps. The Blockly editor uses interlocking, graphical blocks to
     
    Editors
    23.8k
    Ace (Ajax.org Cloud9 Editor)
    ajaxorg Ace (Ajax.org Cloud9 Editor) Note: The new site at http://ace.c9.io contains all the info below along with an embedding guide and all the other resour
     
    Editors
    1.7k
    A modern, simple and elegant WYSIWYG rich text editor.
    raphaelcruzeiro jQuery-Notebook A simple, clean and elegant WYSIWYG rich text editor for web aplications Note: Check out the fully functional demo and examples here.
     
    Editors
    4.3k
    HTML5 rich text editor. Try the demo integration at
    neilj Squire Squire is an HTML5 rich text editor, which provides powerful cross-browser normalisation in a flexible lightweight package (only 16.5KB of JS a
     
    Editors
    4.2k
    Simple, beautiful wysiwyg editor
    jhollingworth This repo is no longer maintained. bootstrap3-wysiwyg is much better Overview Bootstrap-wysihtml5 is a javascript plugin that makes it easy to create
     
    Editors
    6.6k
    Open source rich text editor based on HTML5 and the progressive-enhancement approach.
    tiff Open source rich text editor based on HTML5 and the progressive-enhancement approach. Uses a sophisticated security concept and aims to generate fully valid HTML5 markup by preventing unmaintainable tag soups and inline styles.