Elem-canvas NPM

el-canvas

Canvas rendering library, Sprite manipulation of canvas

hello world

<div id="app"></div>

  yarn add elem-canvas

    or

  npm i elem-canvas

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

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

const root = new Sprite({
  x: (window.innerWidth - 300) / 2,
  y: (window.innerHeight - 300) / 2,
  width: 300,
  height: 300,
  borderRightWidth: 100,
  borderRightColor: "#008480",
  borderBottomWidth: 100,
  borderBottomColor: "#006868",
  children: new Sprite({
    width: 200,
    height: 200,
    borderRightWidth: 100,
    borderRightColor: "#00baaf",
    borderBottomWidth: 100,
    borderBottomColor: "#009b9a",
    children: new Sprite({
      width: 100,
      height: 100,
      bgColor: "#00cfcd",
    }),
  }),
});

app.append(root);

nodes

Sprite
Scrollbox
Input
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: string, callback: Function)	binding event; callback arguments: (this, event)
off	(eventname: string, callback: Function)	unbinding event
append	(node: Sprite \| Input \| Scrollbox \| Label)	insert child node
remove	(node: Sprite \| Input \| Scrollbox \| Label)	remove child node
getElementById	(id: string)	returns the node or null
getElementsByClassName	(class: string)	returns the nodes or null
attr	(firstArgv: string \| object, 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	(firstArgv: string \| object, 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: string, callback: Function)	binding event; callback arguments: (this, event)
off	(eventname: string, callback: Function)	unbinding event
getElementById	(id: string)	returns the node or null
getElementsByClassName	(class: string)	returns the nodes or null
attr	(firstArgv: string \| object, 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
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: string, callback: Function)	binding event; callback arguments: (this, event)
off	(eventname: string, callback: Function)	unbinding event
append	(node: Sprite \| Label \| Input \| Scrollbox)	insert child node
remove	(node: Sprite \| Label \| Input \| Scrollbox)	remove child node
getElementById	(id: string)	returns the node or null
getElementsByClassName	(class: string)	returns the nodes or null
attr	(firstArgv: string \| object, value: any)	Modify the attribute value. If properties are not modified using this method, rendering may not be updated