canvas-area

canvas-area

What is it ... ?

canvas-area is a lightweight custom html element as a controller parent for one or more canvas elements. It allows zoom, pan and resize interactions.

Show me ...

Where is the markup code ...

<canvas-area id="ca" width="401" height="301" resizable="both">
    <canvas id="c"></canvas>
</canvas-area>

Attributes

• width: width of element in px.
• height: height of element in px.
• resizable: one of ['none', 'horizontal', 'vertical', 'both'].
• cartesian: true or false

Example please ...

Show me the scripting API ...

canvas-area behaves as a standard html container element with known inherited DOM properties and methods. Additionally it offers properties ...

Property	Type	Value	Default
width	Number	width of element in px	300 px
height	Number	height of element in px	150 px
resizable	String	one of ['none', 'horizontal', 'vertical', 'both']	'none'
cursor	String	simple interface to CSS cursor attribute.	'auto'
view	{x,y,scl}	origin location x,y in px and scaling factor scl	{0,0,1}
cartesian	Boolean	true: y-axis pointing up, false: y-axis pointing down	false

... methods ...

Method	Arguments	Returns	Comment
pan({dx,dy})	dx: delta x dy: delta y	undefined	origin displacement. Modifies view property
zoom({x,y,scl})	x: x-center y: y-center scl: factor	undefined	zoom about point {x,y} by factor scl. Modifies view property
pntToUsr({x,y})	point	point	transform argument point (device coordinates) to result point (user coordinates) with respect to view property
notify(key,value)	key: event type value: event data	undefined	notify observers of event type key about event value
observe(key,handler)	key: event type handler: event handler	undefined	let handler get invoked with event type key.

... and events, which can be observed via observe method.

Type	Object	Value
'pointer'	{x,y,...}*	User has moved the pointer.
'drag'	{x,y,...}*	User has moved the pointer with left button down.
'resize'	{width,height}	User did resize canvas-area element
'view'	{x,y,scl}	User modified the view property via pan, zoom, ...
'buttondown'	{x,y,...}*	User has pressed the pointer device's button down.
'buttonup'	{x,y,...}*	User has released the pointer device's button.
'pointerenter'	{x,y,...}*	pointer has entered the canvas-area.
'pointerleave'	{x,y,...}*	pointer has left the canvas-area.

{x,y,...}^* custom event data object:

Property	Description
x,y	Pointer location in device coordinates.
dx,dy	Pointer displacement in device coordinates since last pointer event.
buttons	Device buttons pressed (1:left, 2: right, 4: middle button).
delta	Mouse wheel delta units.

CDN

Use following links for texmath.js and texmath.css

• https://gitcdn.xyz/cdn/goessner/canvas-area/master/canvas-area.js

Changelog

License

canvas-area is licensed under the MIT License

© Stefan Gössner