Version 3.4.1 - Works in-game
Version 4.9.1.b - Studio only EditableImage beta
Current featured project using CanvasDraw:
Entirely made with CanvasDraw. No third-party resources, http services or viewport frames 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 library for games and projects in roblox.
Here's some media of featured games/projects using CanvasDraw
Art gallery game (Draw and Donate) | Made by @PondazYeah
Multi-threaded Real-time Pixelated Raytracer with Textures
Ball Collision Physics
Painting system
2D Volumetric Lighting
Custom Video/GIF Player
3D .OBJ Renderer | Made by @AsyncHero
Orthographic 3D Textured Level Editor for Tilemap Engines
Fully Textured Raycaster Engine
Falling Sand/Powder Game (The Powder Box) | Made by me
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 learn how to use CanvasDraw’s custom image format 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)
- Bitmap font rendering
- Custom image format that can be generated from PNG files (up to 1024x1024)
- PNG image reading/processing (Sample RGBA values!)
- Can run on both server and client
- Supports Gui, SurfaceGui, BillboardGui, Decal, Texture, MeshPart and SurfaceAppearance
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 [Studio-only EditableImage beta]
Legacy Release v3 [Works in-game]
And here’s the CanvasDraw Tools plugin which contains an image importer that let’s you create SaveObjects from PNG images from your computer, 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)
-- Or alternatively non-gui
local Canvas = CanvasDraw.new(Decal) -- Or texture, MeshPart, etc
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 or instance for the canvas to be created on
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 right 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 4.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!
Contributing
CanvasDraw is an open source and also a community driven resource. Feel free to edit the module and add onto the API or suggest features and there will be a good chance that your addition might get added the next official release!
Crediting
Crediting me for CanvasDraw is completely optional, but would be highly appreciated to see anyways!
You may freely use and modify this module, but you cannot distribute and sell copies of this asset or claim the module as your own!
Like my work?
CanvasDraw is a very powerful resource that is 100% free and maintained by me. If you’d like to help fund my work, you can support me by donating via Patreon or PayPal!
Hope you guys find good use with this module. I will also be accepting any kind of feedback.
Enjoy!