Version 3.4.1 - Works in-game
Version 4.1.1.b - Studio only EditableImage beta
Current featured project using CanvasDraw:
Entirely made with CanvasDraw. No third-party resources or http services used!
Resources
Introduction
Ever wanted a way to easily create a canvas for drawing pixels, lines, dynamic shapes, or even manipulate or draw PNG image data?
Or are you software engineer or game engine designer that wants to make or port game engines into roblox with ease?
Well now you can with CanvasDraw!
CanvasDraw is currently the largest and most performant custom graphics API for games and projects in roblox.
Here's some media of other featured games/projects made with CanvasDraw
Ball Collision Physics
Painting system
Video/GIF Player
3D .OBJ Renderer | Made by @HeroShiner46
Orthographic 3D Textured Level Editor for Tilemap Engines
Simple Maze Generator
Fully Textured Raycaster Engine
Falling Sand/Powder Game
CanvasDraw is a super fast and an efficient module which allows you to create pixel-based canvases with desired resolutions that can then be used to draw pixels, lines, and other shapes on the canvas and much more with the provided drawing methods! e.g.
- SetPixel()
- DrawLine()
- DrawCircle()
- DrawRectange()
- DrawTriangle()
- And much more!
This module is great for pixel-based games and projects where a canvas or reading/importing pixel data is necessary.
You can do much more than drawing pixels and shapes as there are a many other useful and advanced graphics methods to use! e.g.
- GetPixel()
- ImageData:GetPixel()
- DrawImage()
- DrawTexturedTriangle()
- GetImageDataFromTextureId()
- and more much!
And yes, this module has the ability to get RGBA values from pixels from an image too! Check out the tutorials to learn how to use this feature.
All these methods allow for use in much more than just simple drawing or static images. Fun fact, this module is designed for use in basic computer graphics for things like rendering or creating game engines inside of roblox! e.g:
- Raycaster Engines
- Raytracers
- 3D Rendering Engines
- 2D Physics Engines
- Sandbox games
- Custom video/GIF players
- Drawing programs
- Algorithm Visualisers
- And much more!
Features
- Easy to create super fast and performant canvas that scales dynamically and runs real-time
- Heaps of simple and advanced drawing methods
- Variable resolution (up to 1024x1024)
- Image file reading, processing, sampling and drawing
- Can run on both server and client
- GUI, SurfaceGUI and BillboardGui support
No Limitations!
Ever since CanvasDraw 4.0, the only real limitations here now are what EditableImages are limited to. This includes things like roblox’s image asset texture resolution of 1024x1024 or performance from software code execution and luau.
Get CanvasDraw
You can get a model of the module here:
Latest Release v4.1 [Studio-only EditableImage beta]
Legacy Release v3.4 [Works in-game]
And here’s the CanvasDraw Tools plugin which contains an image importer that let’s you create SaveObjects from PNG image images, and an image editor that can let you edit said images and SaveObjects.
(Use this plugin to work with PNG pixel data)
How to use CanvasDraw
Using CanvasDraw is pretty straight forward and easy to understand. Especially if you have had experience with knowledge or working with pixel grids from other libraries or engines.
I highly recommend checking out the API reference manual for this module so you can find out and understand what some of the functions, methods and properties do and how you can use them to your advantage:
Creating a canvas
Before we start drawing, we actually need a canvas to draw on. You can easily create a canvas of any kind with CanvasDraw by calling CanvasDraw.new()
and providing a GUI with a frame to contain the canvas.
-- Local Script
local Gui = script.Parent
local Frame = Gui.Frame
local CanvasDraw = require(Gui.CanvasDraw)
local Canvas = CanvasDraw.new(Frame)
By default, CanvasDraw.new() creates a canvas being coloured of what your frame’s BackgroundColor3 is with a resolution at 100x100 creating a grid of pixels on an EditableImage.
If you wish to create a different canvas with different resolutions and settings, then you can fill out some of the parameters of the CanvasDraw.new() function. For example;
local Canvas = CanvasDraw.new(
Frame, -- The frame for the canvas to be parented to
Vector2.new(320, 240), -- Our desired resolution
Color3.new(0.5, 0.5, 1), -- Light blue for the default canvas colour
true -- Blurs the canvas instead having sharp pixels
)
This will create a nice light blue canvas with a resolution of 320x240.
Drawing on the canvas
As mentioned before, CanvasDraw provides a bunch of fast and efficient pre-coded pixel-based drawing methods! So don’t worry about trying to create your own algorithms to draw things like lines or filled shapes between points, because I took the pain and frustration for you guys and implemented all the commonly used algorithms for you guys!
Here’s some sample code of drawing a pixel to the canvas:
local CanvasDraw = require(Gui.CanvasDraw)
-- Create a 150x100 canvas
local Canvas = CanvasDraw.new(Frame, Vector2.new(150, 100))
-- Draw a red pixel at point 75, 50 (the middle) with a Vector2 and Color3
Canvas:DrawPixel(Vector2.new(75, 50), Color3.new(1, 0, 0))
-- Alternatively, you can use a much faster method with pure X, Y and RGB values
Canvas:SetRGB(150, 100, 0, 0, 1) -- Draws a blue pixel at the bottom left corner
Here’s a list of some other very simple methods you can use to draw some simple scenes:
- DrawRectangle()
- DrawCircle()
- DrawTriangle()
- DrawLine()
- DrawImage()
There are much more and graphically capable methods and functions than these that you can use. Learn more about in the API Reference for this module
You can also learn more about using CanvasDraw to create projects and games with these simple step-by-step tutorials here: CanvasDraw 3.0 Tutorial
By using CanvasDraw and its functions and methods, you can pretty well create what ever you wish! From drawing programs, to 2D and 3D games, to literally anything that you can do in computer graphics!
Future plans
There aren’t a whole lot of plans for this module aside from things you guys could suggest or contribute to. So please reply a suggestion or make a contribution!
Hope you guys find good use with this module. I will also be accepting any kind of feedback.
Enjoy!