Version 3.4.1
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? Well now you can with CanvasDraw!
CanvasDraw is currently the largest and most performant custom graphics API in roblox.
Here's some examples 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
https://www.youtube.com/watch?v=uHf6fJQpOxg
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.
- DrawPixel(Point, Colour)
- DrawLine(PointA, PointB, Colour)
- DrawCircle(Point, Radius, Colour)
- DrawRectange(PointA, PointB, Colour)
- DrawTriangle(PointA, PointB, PointC, Colour)
- 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()
- 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 fast and performant canvas that scales dynamically
- Heaps of simple and advanced drawing methods
- Variable resolution (up to 256x256)
- PNG Image file reading and drawing (Images can be stored as SaveObject’s imported by this image importer plugin for CanvasDraw)
- Can run on both server and client
- GUI and SurfaceGUI support
Current Limitations
- Resolution limit: 256x256
- The discission of a resolution limit of 256x256 has been made because roblox’s entire UI seems to break when roblox renders too many frames or UIGradients.
- Aside from that, 256x256 is actually a pretty damn high and good resolution for a custom roblox canvas. Most pixel-based roblox games aren’t even larger than 100x100 pixels!
- Lag from too many colours when rendering high-resolution images
- The internal GreedyCanvas system that CanvasDraw uses seems to drop in framerate when rendering high detailed images. To avoid this issue and maintain high framerate for real-time textured projects, please try to avoid using lots of colours in images
- (sticking to a colour pallete will also solve this issue)
Get CanvasDraw
You can get a model of the module here:
And here’s the Image Importer plugin that let’s you create SaveObjects from PNG image files:
(Use this plugin to work with PNG pixel data)
How to use CanvasDraw
Using CanvasDraw is pretty straight forward and easy to understand.
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.
Things to consider before starting
Before we start using this module, there are a few things that you may want to take into consideration:
-
Points are Vector2 values which can be used to pick out or draw pixels on a canvas. Points are relative to the resolution of your canvas. (For example; I have created a canvas with a resolution of 100x100, and I want to get the middle pixel, I would need to use this Vector2 value to define that point: Vector2.new(50, 50))
-
Stick to a low amount of colours for high-resolution real-time projects, as the more colours you use, the less that the internal UIGradient compression method will work, meaning more per-pixel calculations are done, which will result in more lag.
-
CanvasDraw has a resolution limit of 256x256. Overall, CanvasDraw will happily run at this resolution. The only problem with going higher than this is roblox’s weird rendering bugs that occur when there are too many gui objects onscreen.
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 with a few frames utilizing UIGradients for the pixels.
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(150, 75), -- Our desired resolution
Color3.new(0.5, 0.5, 1) -- Light blue for the canvas colour
)
This will create a nice light blue canvas with a resolution of 150x75.
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 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)
Canvas:DrawPixel(Vector2.new(75, 50), Color3.new(1, 0, 0))
Here’s a list of some other very simple methods you can use to draw some simple scenes:
- DrawRectangle()
- DrawCircle()
- DrawTriangle()
- DrawLine()
There are much more methods and functions than these you can use that you can 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 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
I have quite a few plans for this module that I wish to implement that will improve performance and bring new features. Such as:
- Further optimising the overall canvas system as much as possible
- Increasing or possibly removing the canvas resolution limit.
- More Tutorials
- And hopefully more!
Hope you guys find good use with this module. I will also be accepting any kind of feedback or feature requests. So if something is out of place or you would like my to add a new function, please let me know!
Enjoy!
