Also hate to be annoying but do you have any methods of compressing data using the legacy version, currently sending the entire image data over using a remote event causes quite big lag spikes
Not officially with the legacy version. One way though is to use CanvasDraw.CreateSaveObject() and then use the attributes from the created instance. If you want to load an ImageData from attributes, reconstruct the SaveObject instance with the attributes and then use CanvasDraw.GetImageData()
2 Likes
Ethan, does this use any type of greedy… pixeling? Would drawing rectangles be better for EditableImage?
Running at just 100x100 resolution already lags a lot.
I wonder if you know any optimizations?
- I create a bunch of rays
- Then raycast them
- Then use
SetPixel()for each pixel.
The only thing going on is Color.
Also please make a Canvas export type. Such that I can write
local my_canvas: CanvasDraw.Canvas = CanvasDraw.new()
Raycasting is causing you the lag here. Its very well known that calling raycast on every pixel will lag quite a bit.
That would be far slower than just indexing the pixel array. You have to remember this is for rendering engines, and each pixel has to be unique
2 Likes
This is a really cool resource. It’d be awesome if it could support Bezier Curves, as that would create some unique possibilities like custom font rendering and more!
Hello, first of all, I would like to express my infinite appreciation for your project. Previously, I had a lot of trouble making my own pixel canvas, but thanks to your project, It saved my life lol
I’m working on a simple drawing app.
This is the result of randomly coloring a 192*108 canvas, compressing it once and converting it into json data. I get a string of 130,000 characters, which is too big. I think I made a mistake on something. Can you help me?
local CanvasDraw = require(ReplicatedStorage:WaitForChild("CanvasDraw"))
local CanvasSize = CanvasFrame.AbsoluteSize
local Canvas = CanvasDraw.new(CanvasFrame, Vector2.new(192, 108))
local function FillCanvasWithRandomColors()
for x = 0, Canvas.Resolution.X - 1 do
for y = 0, Canvas.Resolution.Y - 1 do
-- Generate a random color for each pixel
local randomColor = Color3.fromRGB(math.random(0, 255), math.random(0, 255), math.random(0, 255))
-- Set the pixel at (x, y) to the random color
Canvas:SetPixel(x, y, randomColor)
end
end
end
FillCanvasWithRandomColors()
local imageData = Canvas:CreateImageDataFromCanvas()
local compressedImageData = CanvasDraw.CompressImageData(imageData)
print(compressedImageData)
local jsonImageData = HttpService:JSONEncode(compressedImageData)
print(#jsonImageData)
1 Like
Nothing is wrong with your code at all, your use of using compressed image data is correct. Your problem here is that you are trying to compress something that is basically uncompressible. You generated random noise where every pixel has a completely different colour. Meaning this image is super detailed, so trying to compress it will only compress it by a little bit.
So basically, the less colours your image has, the less string characters you will get.
You can run the same test, but for a blank image and it should return a value like 3000 characters or something compared to 136,939.
Also this result is still under roblox’s 200,000 character string limit and it definitely wont get any higher than that, so either way you should be fine at that resolution
EDIT: Unrelated to the image compression, but I just noticed something with your code.
A canvases coordinates starts at 1, 1. Not 0, 0!
Treating 0, 0 as a starting point will cause problems as that is a pixel that doesn’t exist
for x = 1, Canvas.Resolution.X do
for y = 1, Canvas.Resolution.Y do
1 Like
I was doing the wrong thing… I’m sorry!!!
don’t stress haha, you didn’t do anything wrong! Just trying to prevent any future issues with non-accurate coordinates! :)
4 Likes
Anyway to have a transparent canvas so I can place an image behind it?
Two ways. You can call Canvas:SetClearingRGBA() and enter your rgba values (a = alpha/transparency) And then call Canvas:Clear()
Or alternatively you can loop through every pixel and use Canvas:SetAlpha()
1 Like
Could you ask me how to load image data into canvas? I keep getting errors.
if savedData and next(savedData) then
print("loading...")
local decompressedImageData = CanvasDraw.DecompressImageData(savedData)
CanvasDraw:GetImageData(decompressedImageData)
end
You should probably read the API documentation in cases like these as you are using GetImageData incorrectly
CanvasDraw.GetImageData is used for loading ImageData from save object instances. However the use of it is still useless here as you already have image data (decompressedImageData)
What you want is Canvas:DrawImage(decompressedImageData)
Let me know if any other issues arise
1 Like
I’m sorry. I’ll read it properly again
This is awesome! Has anyone made a Code page 437 port to the TextCharacters module?
1 Like
I don’t think so, but I am working on adding actual font support for CanvasDraw v4.5!
One of these fonts are the Code page 437 font 
Canvas:DrawTextXY('Welcome to CanvasDraw v4.5.0!!!', X, Y, Color3.new(), "Codepage8x10")
4 Likes
Module Update - v4.5.0
Hey all. It’s been a bit since an update.
CanavsDraw now supports multiple fonts for the :DrawText() & :DrawTextXY() canvas methods!
Before, the font used for :DrawText() was a small 3x5 upper only case font that I created. But this has since changed!
We have 7 new built-in bitmap fonts that can be used:
Fonts can now created with a bitmap font image that I import via a script of a selected bitmap font sheet image.
For an example, here’s the code page 437 font sheet I used:
NOTE: Currently, there isn’t a way for other users to create custom fonts. However, if there is enough demand, I will create a font creator for the CanvasDraw Tools plugin that will allow you to create custom fonts for CanvasDraw via PNG images of bitmap font sheets.
This update adds a new font parameter to the DrawText and DrawTextXY methods:
-- Draw black 'Hello, World!' text at point 20x20 with the Codepage font
local Text = "Hello, World!"
Canvas:DrawTextXY(Text, 20, 20, Color3.new(0, 0, 0), "Codepage")
All useable fonts can be found under the CanvasDraw module in a folder called Fonts:
Here’s the full list of changes:
-
Added
FontNameparameter to Canvas:DrawText() and Canvas:DrawTextXY() -
Removed Canvas.FpsLimit as it had some serious performance issues and never seemed to perform reliably. You will have to come up with your own way to limit auto render rates
CanvasDraw4.5.0.b.rbxm (57.2 KB)
8 Likes
Part 2!!
I have created a fully functional Mandelbrot zoom-in renderer in Roblox using my beloved CanvasDraw!
MandelbrotSetViewer.rbxm (66.7 KB)
It uses a modified CanvasDraw because it doesn’t provide everything I needed. Here’s the things I added for my version:
Canvas:GetGrid(): {number}Canvas:SetGrid(grid: {number})Canvas:IsDestroyed()
I need to get and set the raw grid to quickly save the result of each render. Using GetImageData() and :GetPixels() failed because of how long it took, or because it couldn’t be reused without other modifications.
The main problem with this is the memory usage. My memory fills up rapidly at the maximum 1024x1024 quality, so I made it so you could split the recording up. It took 26 videos and a few hours of time to create this video!
5 Likes