CanvasDraw 3.0 Thread Draft

[Ethanthegrand14 (Ethanthegrand)]

Version 3.0.0

Logo by: @intergravitation

---

Resources

• CanvasDraw Module
• CanvasDraw API Reference
• CanvasDraw Tutorial
• CanvasDraw Image Importer Plugin

---

Introduction

Ever wanted a way to easily create a canvas for drawing pixels, lines, dynamic shapes, or even manipulate PNG image data? Well now you can with CanvasDraw!

Here's some featured games/projects made with CanvasDraw

Ball Collision Physics

Video/GIF Player

3D .OBJ Renderer

Pseudo 3D textured level editor for tile maps

Simple Maze Generator

Fully Textured Raycaster Engine
Fully Textured 3D Raycaster Engine in Roblox - CanvasDraw Tech Demo | Roblox - YouTube

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 functions! 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 functions to use! e.g.

• GetPixel(Point)
• GetPixels(ArrayOfPoints)
• GetPixelFromImage(ImageData, Point)
• DrawImage(ImageData, Point)
• etc

And yes, this module has the ability to get RBG colours 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. 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
• Drawing programs
• 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:

CanvasDraw Module - Roblox

And here’s a plugin that let’s you create a SaveObject from a PNG file:

CanvasDraw Image Importer - Roblox

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.

API Documentation for CanvasDraw 3.0

This is a post that documents all of the properties, events, functions and methods of the CanvasDraw Module. You can find more information about the module here: CanvasDraw Functions: CanvasDraw.new (Frame: GuiObject, Resolution: Vector2, CanvasColour: Color3) : Canvas This will create and return a canvas which contains a grid of pixels that can then be further used with its drawing methods.

Example

Canvas = CanvasDraw.new( Frame, -- Put the canvas in this frame Vector.new(150…

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 100, and I want to get the middle pixel, I would need to use this Vector2 value to define that point: Vector2.new(50, 50))

• CanvasDraw has a resolution limit of 256 x 256. 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. Luckily, 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 Canvas.Drawnew() 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.

If you would like to learn more of CanvasDraw’s features, then I recommend checking out these simple tutorials:

CanvasDraw v2.6.0 Tutorial

This thread contains a bunch of tutorials for CanvasDraw 2.6.0. There is an API reference for this module which contains documentation of every property and functions that CanvasDraw has to offer which you should also check out: The Basics

Using the Canvas

Before we can actually start drawing, we actually need something for CanvasDraw to draw on. That’s where the canvas comes in handy! To create a canvas, we firstly need to create a GUI with a frame for our canvas. <a class="ligh…

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 a list of some methods you can use to draw some simple scenes:

• DrawRectange()
• DrawCircle()
• DrawTriangle()

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

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!