grid-canvas-system
TypeScript
Project Details
Description
No description available for this project.
Created:
December 15, 2024Last Updated:
January 15, 2025Stars:
4Forks:
0Watchers:
4Open Issues:
0
README
This library allows you to create grids easily on an HTML5 canvas. The goal is to simplify the creation of a canvas with a grid that enables precise positioning of elements and keeps track of their coordinates.
Additionally, a function to draw a coordinate axis is included.
In my professional use, I have found this tool very useful for education and game development. Students or animators can position elements precisely and visualize their coordinates.
To install the library, you can follow these steps:
<script src="https://cdn.jsdelivr.net/npm/grid-canvas-system/dist/grid-canvas-system.umd.js"></script>npm install grid-canvas-systempnpm install grid-canvas-systemTo use the library, you can follow these steps:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Grid Canvas System</title>
</head>
<body>
<canvas id="canvas"></canvas>
<script src="https://cdn.jsdelivr.net/npm/grid-canvas-system/dist/grid-canvas-system.umd.js"></script>
<script>
const newCanvas = new GridCanvasSystem("canvas");
newCanvas.drawCoordinate(25, 60);
</script>
</body>
</html>import GridCanvasSystem from "grid-canvas-system";
const newCanvas = new GridCanvasSystem("canvas");The library accepts the following parameters:
id: The ID of the canvas where the grid will be drawn. (Required)width: The width of the canvas. (Optional, defaults to 400)height: The height of the canvas. (Optional, defaults to 400)
The library has the following methods:
drawCoordinates(): Draws a coordinate axis on the canvas.clearCanvas(): Clears the canvas.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Grid Canvas System</title>
</head>
<body>
<canvas id="canvas"></canvas>
<script src="https://cdn.jsdelivr.net/npm/grid-canvas-system/dist/grid-canvas-system.umd.js"></script>
<script>
const newCanvas = new GridCanvasSystem("canvas");
const { canvas, ctx } = newCanvas;
ctx.beginPath();
ctx.lineWidth = 2;
ctx.strokeStyle = "#FFFFFF";
ctx.moveTo(100, 200);
newCanvas.drawCoordinate(100, 200);
ctx.lineTo(120, 300);
newCanvas.drawCoordinate(120, 300);
ctx.lineTo(250, 150);
newCanvas.drawCoordinate(250, 150);
ctx.closePath();
ctx.stroke();
</script>
</body>
</html>Image preview
This project is licensed under the MIT License
0+
Years Experience
0
Completed Projects
0+
Created courses
0+