https://github.com/kucingkode/krayonjs

Make javascript Canvas API simpler and easier for drawing 2D graphics
https://github.com/kucingkode/krayonjs

2d canvas canvas-2d-context canvas2d canvasjs drawing-library frontend graphics javascipt javascript-library typescript-library

Last synced: 10 days ago
JSON representation

Make javascript Canvas API simpler and easier for drawing 2D graphics

• Host: GitHub
• URL: https://github.com/kucingkode/krayonjs
• Owner: KucingKode
• License: mit
• Created: 2023-03-10T15:22:52.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2023-03-11T05:08:50.000Z (almost 2 years ago)
• Last Synced: 2024-11-16T16:19:49.305Z (2 months ago)
• Topics: 2d, canvas, canvas-2d-context, canvas2d, canvasjs, drawing-library, frontend, graphics, javascipt, javascript-library, typescript-library
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/krayonjs
• Size: 156 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

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

```js

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

}

```