/InfiniCanvas

An infinite canvas to edit online with other users!

Primary LanguageJavaScriptGNU General Public License v3.0GPL-3.0

InfiniCanvas

Twitter | Reddit

InfiniCanvas Logo

Table of Contents

About

InfiniCanvas is an open source multiplayer experience in which users can place colored tiles on an infinite canvas. It's currently hosted on canvas.caltrop.dev!

↥ back to top

Building

Navigate to the directory in which you want to save the project in.

Clone the repository (this will create a new folder).

$ git clone https://github.com/caltropuwu/infinicanvas

Move into the directory.

$ cd infinicanvas

Install dependencies.

$ npm install --save

Rename creds.example.json to creds.json (located in /backend) and fill out all relevant information.

InfiniCanvas uses MySQL to store data. Make sure a server is running locally. Create a database and execute the queries found in /tables.sql.

Start the application

$ node --harmony app.js

The server should now be online on http://localhost:5000/!

Tutorial

In the following you will learn about the basics of navigating and editing the canvas!

Panning-and-Zooming

There are a total of 3 different ways to pan the camera across the canvas:

  • Dragging the canvas
  • Clicking on a tile to center it
  • Using the Keyboard movement keys (Default: wasd or arrow-keys)

The first two methods are also available for mobile users!

Camera-Pan demonstration

You may zoom the camera in and out by using the mousewheel (on desktop) or pinching the screen (on mobile).

↥ back to top

Placing-Tiles

Place tiles by dragging tiles from the color menu (located at the bottom-center of the screen) onto the canvas. You can also use the keyboard shortcut ctrl and shift to cycle through tiles. Pressing e toggles holding a tile. Tile-Placement demonstration

↥ back to top

Contributing

You may be interested in contributing to this project, in the following section you will find out how to file Issues and submit code.

Bug-Reports-and-Feature-Requests

You can report Bugs and unintended behaviour here. Feature requests and suggestions can be submitted here.

If you have an unrelated issue you can submit it here.

Code-Contributions

Code contributions are greatly appreciated. You can contribute code by forking the project and filing pull-requests here. Please note that all contributions need to be reviewed before being instated.

↥ back to top

Contributors

Shoutouts to:

License

The InfiniCanvas project is licensed under the GNU General Public License v3.0.

↥ back to top