JavaScript Canvas 2D engine library
Home •
Examples •
Documentation •
中文文档 •
Help
Malyan is a lightweight canvas 2D library that makes it easy to work with HTML5 canvas element.
Benefit from interactive object model,Malyan allows you to easily create simple geometrical shapes like rectangles, circles and other polygons or more complex shapes made up of many paths in <canvas>
HTML element. It also allows you to manipulate the size, position and rotation of these objects. It’s also possible to change some of the attributes of these objects such as their color, opacity, etc.
Malyan also provides an extensive event system, starting from low-level “mouse” events (click, mousedrag, mouseEnter, etc) to high-level objects ones (object:mousemove, object:mousedrag).
// Direct Download
<script src="js/malyan.min.js"></script>
// CDN
<script src="https://unpkg.com/malyan"></script>
// or use a specific version/tag via URLs
<script src="https://unpkg.com/malyan@0.0.7/dist/malyan.min.js"></script>
npm install malyan --save
Here is a HTML boilerplate for rendering a rectangle in malyan:
<!DOCTYPE html>
<html>
<body>
<canvas id="canvas"></canvas>
<script src="https://unpkg.com/malyan"></script>
<script>
var canvas = new Malyan({
id: 'canvas',
width: 500,
height: 500,
})
var rect = new Malyan.Rect({
name: 'rect',
x: 0,
y: 0,
width: 60,
height: 80,
fillStyle: 'rgba(64, 196, 255, 0.2)',
strokeStyle: '#40c4ff',
lineWidth: 2,
})
rect.translation = {
x: 100,
y: 100
}
rect.on('mousedrag', function(e) {
rect.translation = {
x: rect.translation.x + e.detail.deltaPoint.canvas.x,
y: rect.translation.y + e.detail.deltaPoint.canvas.y
}
})
canvas.add(rect)
function animateLoop() {
canvas.render()
requestAnimationFrame(animateLoop)
}
animateLoop()
</script>
</body>
</html>
You will have to clone directly from GitHub and build malyan
yourself if you want to use the latest dev build.
git clone https://github.com/HarryChen0506/malyan.git
cd malyan
npm install
npm run build
npm run docs