simple-canvas2d
v0.1.6
Published
A simple library for making graphics and games using Canvas API
Downloads
2
Maintainers
siddharthroy12Readme
simple-canvas2d
A simple library for making graphics and games using Canvas API
Installing
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>Example
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();
}
API
Creating a canvas
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);Resize Render Resolution
canvas.resizeRenderResolution(newRenderWidth, newRenderHeight);Clear canvas
Clear the entire canvas with any color
NOTE: The color is a CSS color value
canvas.clear(color);Draw Pixel
NOTE: The color is a CSS color value
canvas.drawPixel(posX, posY, color);Draw Line
canvas.drawLine(startPosX, startPosY, endPosX, endPosY, width, color);Draw Circle
canvas.drawCircle(posX, posY, radius, color);Draw Circle Outline
canvas.drawCircleOutline(posX, posY, radius, width, color);Draw Circle Outline
canvas.drawCircleOutline(posX, posY, radius, width, color);Draw Arc
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);Draw Arc Outline
canvas.drawArc(posX, posY, radius, startAngle, endAngle, width, color);Draw Ellipse
canvas.drawEllipse(posX, posY, radiusX, radiusY, rotation, startAngle, endAngle, color);Draw Ellipse Outline
canvas.drawEllipseOutline(posX, posY, radiusX, radiusY, rotation, startAngle, endAngle, width, color);Draw Rectangle
canvas.drawRectangle(posX, posY, width, height, rotation, color);Draw Rectangle Outline
canvas.drawRectangleOutline(posX, posY, width, height, rotation, outlineWidth, color);Draw Rectangle Rounded
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)Draw Rectangle Rounded Outline
canvas.drawRectangleRoundedOutline(posX, posY, width, height, radius, rotation, outlineWidth, color);Draw Polygon
canvas.drawPoly(posX, posY, radius, numberOfSides, rotation, color);Draw Polygon Outline
canvas.drawPolyOutline(posX, posY, radius, numberOfSides, rotation, outlineWidth, color);Draw Shape from points
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);Draw Shape outline from points
canvas.drawShapeOutline(points, origin, rotation, width color);Measure Text Width
canvas.measureText(text, fontSize, fontFamily);Draw Text
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);Draw Text Outline
canvas.drawText(text, posX, posY, fontSize, fontFamily, align, direction, maxWidth, rotation, origin, lineWidth, color);Set Camera
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);
}Get Mouse Position on canvas
const pos = canvas.getMousePosOnCanvas();
canvas.drawCircle(pos.x, pos.y, 10);Load Image
NOTE: This is a static method
SimpleCanvas.loadImage(url)
.then(image => {});Draw Image
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight, rotation);