Catyen is a lightweight wrapper to make the handling of canvas related programming more easy.
npm install @catyen/catyen
<canvas id ="canvas-element"></canvas>
import Catyen from '@catyen/catyen';
const catyen = new Catyen("#canvas-element",window);
// With the initialization call all required event handlers are set.
catyen.initialize();
catyen.loop.requestFrame(()=>{
catyen.draw.clear("black");
catyen.draw.print(0,0,"Hello World","white");
});
The easiest way to start is by using this boilerplate.
Whenever the browser requests a frame, this loop is called. With each call, the screen is re-rendered.
import Catyen from '@catyen/catyen';
const catyen = new Catyen("#canvas-element",window);
catyen.loop.requestFrame(()=>{});
catyen.draw.clear("white");
catyen.draw.print(0,0,"Hello World","white");
catyen.draw.fillRect(10,10,10,10,"white");
catyen.draw.fillRectAndRotate(10,10,10,10,"white",10);
catyen.draw.line(10,10,10,10,"white");
const myImage = new CatyenImage("./path/img.png");
catyen.loop.requestFrame(()=>{
catyen.draw.blit(0,0,myImage);
});
const myImage = new CatyenImage("./path/img.png");
catyen.loop.requestFrame(()=>{
catyen.draw.blitAndRotate(0,0,myImage,90);
});
const catyen = new Catyen("#canvas-element",window);
catyen.initialize();
catyen.loop.requestFrame(()=>{
if(catyen.controls.isPressed(KeyboardKeys.UP))
{
console.log("up!");
}
if(catyen.controls.isPressed(KeyboardKeys.DOWN))
{
console.log("down!");
}
});
const catyen = new Catyen("#canvas-element",window);
catyen.initialize();
catyen.loop.requestFrame(()=>{
if(catyen.controls.mouseState.mouseDown)
{
console.log("mouse down!",
catyen.controls.mouseState.clientX,
catyen.controls.mouseState.clientY);
}
});
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
Please make sure to update tests as appropriate.