Package Exports

krayonjs
krayonjs/dist/krayon.cjs.js
krayonjs/dist/krayon.esm.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (krayonjs) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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()
}