1.1.0 • Published 1 year ago
krayonjs v1.1.0
KrayonJS
Krayon.js is a Javascript library to help you work with Canvas API. Krayon.js wrap Canvas API into a simple class, Krayon, that is simpler and easier to understand.
Features
Resizable with CSS. Normal canvas 2D context will be stretched when you try to resize it with css, Krayon will update canvas 2D context size when its container size changes.
Changeable angle unit. With Krayon, you can change the function parameter angle unit from radian to degree.
Changeable coordinate center point. With Krayon, you can change the coordinate center point of the canvas 2d context to other than top-left, it can be center (like a normal cartesian coordinate), top-right, bottom-right, or bottom-left
Example
import { krayon } from './krayon.esm.js'
const container = document.querySelector('div')
const k = new krayon(container)
window.onload = () => {
k.ANGLE_UNIT = 'degree'
k.COORDINATE_ORIGIN = 'center'
k
.bg('black')
// color, blur, offsetX, offsetY
.shadow('green', 10, 0, 0)
.fillStyle('red')
.circle(0, 0, 20) // x, y, r
.fill()
.begin()
.fillStyle('blue')
.rect(100, 100, 20, 20) // w, y, w, h
.fill()
}