yarn add elem-canvas or npm i " />
yarn add elem-canvas or npm i " />
yarn add elem-canvas or npm i "/>

Canvas rendering library, Sprite manipulation of canvas

Related tags

Data Visualization elem-canvas
Overview

el-canvas

Canvas rendering library, Sprite manipulation of canvas

hello world

<div id="app"><div></div></div>
  yarn add elem-canvas

    or

  npm i elem-canvas

import { Root, Sprite } from "elem-canvas";

const app = new Root(document.getElementById("app"));

const ves = new Sprite({
  width: window.innerWidth,
  height: window.innerHeight,
  bgColor: "red",
});

app.append(ves);

nodes

  1. Sprite
  2. Scrollbox
  3. Input
  4. Label

Sprite

attributes

tips: with "?" mark this field as optional

name value describe
id? string id selector, the only one in the document
x? number In absolute layout, x is the X-axis offset relative to the upper left corner of the parent node. In a fixed layout, x is the X-axis offset relative to the upper-left corner of the Root node.
y? number with x πŸ‘†
width number
height number
bgColor? color string either bgImage or bgColor
bgImage? image url either bgImage or bgColor, note the CROS
overflowY? hidden or visible default: hidden
overflowX? hidden or visible default: hidden
children? Array<Sprite | Label | Function> child nodes
borderLeftColor? color string
borderLeftWidth? number
borderTopColor? color string
borderTopWidth? number
borderRightColor? color string
borderRightWidth? number
borderBottomColor? color string
borderBottomWidth? number
className? string or string[] class selector
position? absolute or fixed absolute: positioning relative to the parent; fixed: location relative to Root
visible? boolean show and hide
zIndex? number drawing order; default: 0

methods:

name argument describe
on (eventname, callback) binding event; callback arguments: (this, event)
off (eventname, callback) unbinding event
append node insert child node
remove node remove child node
getElementById id string returns the node or null
getElementsByClassName class string returns the nodes or null
attr (attrName: string, value: any) Modify the attribute value. If properties are not modified using this method, rendering may not be updated

Label

attributes

tips: with "?" mark this field as optional

name value describe
text? string
color? color string
fontFamily? string
bold? boolean
fontSize? number
stroke? boolean
lineHeight? number
textAlign? "left" or "center" or "right"
underLine? color string

methods

name argument describe
getElementById id string returns the node or null
getElementsByClassName class string returns the nodes or null
attr (attrName: string, value: any) Modify the attribute value. If properties are not modified using this method, rendering may not be updated

Input

attributes

tips: with "?" mark this field as optional

name value describe
placeholder? string
value? string
id? string id selector, the only one in the document
x? number In absolute layout, x is the X-axis offset relative to the upper left corner of the parent node. In a fixed layout, x is the X-axis offset relative to the upper-left corner of the Root node.
y? number with x πŸ‘†
width number
height number
bgColor? color string either bgImage or bgColor
bgImage? image url either bgImage or bgColor, note the CROS
overflowY? hidden or visible default: hidden
overflowX? hidden or visible default: hidden
children? Array<Sprite | Label | Function> child nodes
borderLeftColor? color string
borderLeftWidth? number
borderTopColor? color string
borderTopWidth? number
borderRightColor? color string
borderRightWidth? number
borderBottomColor? color string
borderBottomWidth? number
className? string or string[] class selector
position? absolute or fixed absolute: positioning relative to the parent; fixed: location relative to Root
visible? boolean show and hide
zIndex? number drawing order; default: 0

methods:

name argument describe
on (eventname, callback) binding event; callback arguments: (this, event)
off (eventname, callback) unbinding event
getElementById id string returns the node or null
getElementsByClassName class string returns the nodes or null
attr (attrName: string, value: any) Modify the attribute value. If properties are not modified using this method, rendering may not be updated

Scrollbox

attributes

tips: with "?" mark this field as optional

name value describe
contentWidth number content area width
contentHeight number content area height
placeholder? string
value? string
id? string id selector, the only one in the document
x? number In absolute layout, x is the X-axis offset relative to the upper left corner of the parent node. In a fixed layout, x is the X-axis offset relative to the upper-left corner of the Root node.
y? number with x πŸ‘†
width number
height number
bgColor? color string either bgImage or bgColor
bgImage? image url either bgImage or bgColor, note the CROS
overflowY? hidden or visible default: hidden
overflowX? hidden or visible default: hidden
children? Array<Sprite | Label | Function> child nodes
borderLeftColor? color string
borderLeftWidth? number
borderTopColor? color string
borderTopWidth? number
borderRightColor? color string
borderRightWidth? number
borderBottomColor? color string
borderBottomWidth? number
className? string or string[] class selector
position? absolute or fixed absolute: positioning relative to the parent; fixed: location relative to Root
visible? boolean show and hide
zIndex? number drawing order; default: 0

methods:

name argument describe
on (eventname, callback) binding event; callback arguments: (this, event)
off (eventname, callback) unbinding event
append node insert child node
remove node remove child node
getElementById id string returns the node or null
getElementsByClassName class string returns the nodes or null
attr (attrName: string, value: any) Modify the attribute value. If properties are not modified using this method, rendering may not be updated
You might also like...

The Swiss Army Knife of Vector Graphics Scripting – Scriptographer ported to JavaScript and the browser, using HTML5 Canvas. Created by @lehni & @puckey

Paper.js - The Swiss Army Knife of Vector Graphics Scripting If you want to work with Paper.js, simply download the latest "stable" version from http:

Dec 30, 2022

Financial lightweight charts built with HTML5 canvas

Lightweight Charts Demos | Documentation | Discord community TradingView Lightweight Charts are one of the smallest and fastest financial HTML5 charts

Jan 9, 2023

Interactive visualizations of time series using JavaScript and the HTML canvas tag

Interactive visualizations of time series using JavaScript and the HTML canvas tag

dygraphs JavaScript charting library The dygraphs JavaScript library produces interactive, zoomable charts of time series: Learn more about it at dygr

Jan 3, 2023

Flat, round, designer-friendly pseudo-3D engine for canvas & SVG

Zdog Round, flat, designer-friendly pseudo-3D engine View complete documentation and live demos at zzz.dog. Install Download zdog.dist.min.js minified

Jan 3, 2023

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

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

Full featured image editor using HTML5 Canvas. It's easy to use and provides powerful filters. Packages toast-ui.image-editor - Plain JavaScript compo

Jan 6, 2023

πŸ¦β€’ [Work in Progress] React Renderer to build UI interfaces using canvas/WebGL

πŸ¦β€’ [Work in Progress] React Renderer to build UI interfaces using canvas/WebGL

React Ape React Ape is a react renderer to build UI interfaces using canvas/WebGL. React Ape was built to be an optional React-TV renderer. It's mainl

Jan 4, 2023

Canvas

Canvas

Installation $ npm install knights-canvas Example GoodBye const ling = require("knights-canvas"), const fs = require('fs'); const image = await new

Feb 16, 2022

C7 is a canvas-based UI toolkit.

C7 is a canvas-based UI toolkit.

C7 C7 is a canvas-based UI toolkit. δΈ­ζ–‡η‰ˆ Introduction C7 re-implements the key technology of modern front-end development based on HTML canvas (witho

Oct 22, 2021

An HTML5/Canvas implementation of 8-bit color cycling

An HTML5/Canvas implementation of 8-bit color cycling

Overview Here is the JavaScript and C++ source code to my color cycling engine, written in 2010. I am releasing it under the LGPL v3.0. The package co

Dec 1, 2022
Owner
null
GitHub
Javascript Canvas Library, SVG-to-Canvas (& canvas-to-SVG) Parser

Fabric.js Fabric.js is a framework that makes it easy to work with HTML5 canvas element. It is an interactive object model on top of canvas element. I

Fabric.js 23.6k Jan 3, 2023
Javascript Canvas Library, SVG-to-Canvas (& canvas-to-SVG) Parser

Fabric.js Fabric.js is a framework that makes it easy to work with HTML5 canvas element. It is an interactive object model on top of canvas element. I

Fabric.js 23.6k Jan 3, 2023
React + Canvas = Love. JavaScript library for drawing complex canvas graphics using React.

React Konva React Konva is a JavaScript library for drawing complex canvas graphics using React. It provides declarative and reactive bindings to the

konva 4.9k Jan 9, 2023
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.

HTML Canvas Gauges v2.1 Installation Documentation Add-Ons Special Thanks License This is tiny implementation of highly configurable gauge using pure

Mykhailo Stadnyk 1.5k Dec 30, 2022
Konva.js is an HTML5 Canvas JavaScript framework that extends the 2d context by enabling canvas interactivity for desktop and mobile applications.

Konva Konva is an HTML5 Canvas JavaScript framework that enables high performance animations, transitions, node nesting, layering, filtering, caching,

konva 8.7k Jan 8, 2023
Babylon.js is a powerful, beautiful, simple, and open game and rendering engine packed into a friendly JavaScript framework.

Babylon.js Getting started? Play directly with the Babylon.js API using our playground. It also contains a lot of samples to learn how to use it. Any

Babylon.js 19.1k Jan 4, 2023
πŸ”₯ JavaScript Library for HTML5 canvas based heatmaps

heatmap.js Dynamic Heatmaps for the Web. How to get started The fastest way to get started is to install heatmap.js with bower. Just run the following

Patrick Wied 5.9k Jan 2, 2023
JAVASCRIPT library with which you can easily draw CANVAS HTML

easycanvas Quick start Documentation: gaidadei.ru/easycanvas Download: gaidadei.ru/easycanvas/easyc.zip Buy premium: gaidadei.ru/easycanvas/premium (A

null 18 Nov 12, 2022
Bring data to life with SVG, Canvas and HTML. :bar_chart::chart_with_upwards_trend::tada:

D3: Data-Driven Documents D3 (or D3.js) is a JavaScript library for visualizing data using web standards. D3 helps you bring data to life using SVG, C

D3 103.8k Jan 3, 2023
Simple HTML5 Charts using the tag

Simple yet flexible JavaScript charting for designers & developers Documentation Currently, there are two versions of the library (2.9.4 and 3.x.x). V

Chart.js 59.4k Jan 7, 2023