Note: This page is under development
What is gc.js?
gc.js or gameCanvas.js is a lightweight javascript library for creating webgames. The library is built on the Canvas API and makes it a lot easier to create web games using the canvas.
Getting started
Include this script anywhere in your html file:
<script src="https://aaserver.net/libraries/gameCanvas/gameCanvas-5.0.js"></script>
JavaScript
var gc = new GameCanvas();
rectangle(width / 2 - 100, height / 2 - 100, 200, 200, "red", "black", {lineWidth: 5});
Download
Here you can download older versions of the library
Latest version - 5.0
Older version - 4.0
Older version - 3.0
Which one should I use?
Choose the minified version for faster page load time and smaller file size. The unminified file is great for debugging or adding additional features and it's also easier to read.
Examples
var gc = new GameCanvas();
rectangle(width / 2 - 100, height / 2 - 100, 200, 200, "red", "black", {lineWidth: 5});
var gc = new GameCanvas();
function OnMouseMove() {
clearScreen();
circle(mouseX, mouseY, 50, "black", "red", {lineWidth: 5});
}
var gc = new GameCanvas();
function preload() {
preloadImage("TheCoder5550.png");
}
function start() {
rect(10, 10, 100, 100, "black");
circle(170, 60, 50, "red");
ring(280, 60, 50, "black", 10);
triangle(340, 10, 340, 110, 440, 110, "red");
triangleEq(60, 170, 50, "black");
regPolygon(170, 170, 50, 7, "red");
ellipse(280, 170, 50, 25, "black");
image("TheCoder5550.png", 340, 120, 100, 100);
line(10, 330, 110, 230, "black", {lineWidth: 5});
text("Text", 120, 330, 50, "red");
polygon([{x: 230, y: 330},
{x: 330, y: 330},
{x: 330, y: 250},
{x: 280, y: 300},
{x: 230, y: 250}], "black");
rect(340, 240, 100, 100, gradient("red", "black", 100));
}
Documentation
Read the documentation here.