A simple library for making graphics and games using Canvas API
Using npm:
$ npm install simple-canvas2dUsing yarn:
$ yarn add simple-canvas2dUsing CDN:
<body>
... rest of the body
<script src="https://cdn.jsdelivr.net/npm/simple-canvas2d/dist/index.umd.js" defer></script>
</body>import SimpleCanvas2D from 'simple-canvas2d';
// Where you want to add the canvas element
const root = document.getElementById('app');
if (root) {
// Create a new Canvas with 500x500 pixels
const canvas = new SimpleCanvas2D(root, 500, 500);
// Animation loop
function loop() {
canvas.clear('#f1f1f1');
canvas.drawPoly(50, 50, 40, 5, 0, 'red');
canvas.drawRectangle(30, 80, 40, 50, Math.PI*0.25, 'green');
canvas.drawCircleOutline(100, 100, 40, 10, 'pink');
requestAnimationFrame(loop);
}
loop();
}Note that the renderWidth and renderHeight is how many pixels the canvas is going to use for rendering and this does not change the actual width and height of the canvas element, for that use CSS
const canvas = new SimpleCanvas(root, renderWidth, renderHeight);canvas.resizeRenderResolution(newRenderWidth, newRenderHeight);Clear the entire canvas with any color
NOTE: The color is a CSS color value
canvas.clear(color);NOTE: The color is a CSS color value
canvas.drawPixel(posX, posY, color);canvas.drawLine(startPosX, startPosY, endPosX, endPosY, width, color);canvas.drawCircle(posX, posY, radius, color);canvas.drawCircleOutline(posX, posY, radius, width, color);canvas.drawCircleOutline(posX, posY, radius, width, color);NOTE: angle is in radian, Math.PI is half circle and Math.PI*2 is full circle
canvas.drawArc(posX, posY, radius, startAngle, endAngle, color);canvas.drawArc(posX, posY, radius, startAngle, endAngle, width, color);canvas.drawEllipse(posX, posY, radiusX, radiusY, rotation, startAngle, endAngle, color);canvas.drawEllipseOutline(posX, posY, radiusX, radiusY, rotation, startAngle, endAngle, width, color);canvas.drawRectangle(posX, posY, width, height, rotation, color);canvas.drawRectangleOutline(posX, posY, width, height, rotation, outlineWidth, color);The radius can be either a number for all sides or it can be a object of type
{
tl: number; // Top left
tr: number; // Top right
br: number; // Bottom right
bl: number; // Bottom left
}canvas.drawRectangleRounded(posX, posY, width, height, radius, rotation, color)canvas.drawRectangleRoundedOutline(posX, posY, width, height, radius, rotation, outlineWidth, color);canvas.drawPoly(posX, posY, radius, numberOfSides, rotation, color);canvas.drawPolyOutline(posX, posY, radius, numberOfSides, rotation, outlineWidth, color);The points is an array of type
{
x: number;
y: number;
}The origin is also of type { x:number, y:number } used for rotation, leave it to { x: 0, y: } if rotation is 0
canvas.drawShape(points, origin, rotation, color);canvas.drawShapeOutline(points, origin, rotation, width color);canvas.measureText(text, fontSize, fontFamily);align can be 'left', 'right' , 'center', 'start'or 'end'.
direction can be 'ltr' or 'rtl'.
maxWidth will be ignored if set undefined
canvas.drawText(text, posX, posY, fontSize, fontFamily, align, direction, maxWidth, rotation, origin, color);canvas.drawText(text, posX, posY, fontSize, fontFamily, align, direction, maxWidth, rotation, origin, lineWidth, color);Set where the camera will look at with zoom and rotation
function loop() {
canvas.clear('#f1f1f1');
canvas.cameraStart(0, 0, 1, Math.PI*0.25);
canvas.drawCircle(0 , 0, 10);
canvas.drawRectangle(50, -10, 40, 20, Math.PI*0.5, 'green');
canvas.drawLine(0, 0, 50, 0);
canvas.cameraEnd();
requestAnimationFrame(loop);
}const pos = canvas.getMousePosOnCanvas();
canvas.drawCircle(pos.x, pos.y, 10);NOTE: This is a static method
SimpleCanvas.loadImage(url)
.then(image => {});
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight, rotation);