A simple library for making graphics and games using Canvas API
Using npm:
$ npm install simple-canvas2d
Using yarn:
$ yarn add simple-canvas2d
Using 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);