Joachim Ford About
15.01.2022

CanvasCraft

CanvasCraft is a unique online tool designed to allow creators to easily make images, game levels, and entire worlds within minutes. It's very new, so please raise an issue on GitHub if you find any glitches.

Check Out the Source Code Raise an Issue

The following page is a very brief documentation of how to start using CanvasCraft.

Getting Started

When you first open Canvas Craft and click on the screen, it will take you to a page that looks a bit like this.

You can create shapes using the "Block" tool (selected by default), or the "Line" tool. To draw a shape on your canvas, simply drag your mouse across the white square.

After creating a few rectangles, you'll probably want to give them different textures.

Select one of them (by clicking on it) and take a look at the panel on the top-left of the screen. This panel contains all the statistics for the selected shape. Scroll down untill you come to the "Textures" heading and either press "Upload Image" to add an image from your device, or choose a texture from the list of presets. Press "Run Code" to apply the preset to your shape.

At this point, you may notice a code box just below the list of presets. This allows you to customise exactly what texture you wish your shape to have. If you have some knowledge on how to write in JavaScript and on how RGB colours work, it should be quite simple. The two inputs of the code box are the X and Y coordinates of a pixel. The code will take these coordinates, do some fancy things to them, and finally "return" a colour made of Red, Green and Blue values.

Imagine the code box as simply a long algebra equation. Algebra is all about numbers represented by letters. Take the equation X × X = A for instance. If X = 1, it means A = 1. But if X = 2, it means A = 4. The code box works in a similar way. You can apply maths to the X and Y inputs and return an RGB colour based on that.

If you still don't understand, don't worry! I added the feature to CanvasCraft because it makes game level design much quicker. For example, if I wanted to add a simple brick to my image, I would first select an orangey-pink colour from the selector on the topnav. Then, I would drag on the canvas with the "Block" tool to create a brick shape on the screen. To make a brick texture, I would select the "Noise" preset and press "Run Code." If I wanted the noise to be more extreme, I could change the amount Math.random() is multiplied.

Canvas Craft is still in early stages of development, but there are still many other features that haven't been covered on this page. If you think CanvasCraft might be helpful to you, make sure you check out its GitHub for more information or ask for advice in the comments.

Leave a comment
By posting, you consent to having your comment and optional name published here.

Thanks!

© Copyright joachimford.uk