CanvasDraw - A powerful pixel-based graphics library (Draw pixels, lines, triangles, read/modify image data, and much more!)

[vsefu1 (yen)]

I have been looking for this for a very long time, I was wondering how you could also “Redo” after doing “Undo”? Been trying for the past 3 hours but just couldn’t do it

[Ethanthegrand14 (Ethanthegrand)]

@Lxi099

EDIT:
I noticed most of the characters weren’t being displayed. This is due to the string.split(TextLine, "") in the Characters definition on the DrawTextXY script. You have to replace Characters with this; which adds support for multi-byte utf8 graphemes (like the smiley faces, greek letters and blocks)

local Characters = {}
for _, c in utf8.codes(TextLine) do
	table.insert(Characters, utf8.char(c))
end

Oh, thank you so much for fixing this. I’ve been trying to figure out why I haven’t been able to use ascii characters for ages.

[Ethanthegrand14 (Ethanthegrand)]

I think one way to do this is like so:

Whenever you undo, instead of removing the latest saved frame from the table, we instead keep it and use a number value that goes up and down when ever we undo and redo, and just index the saved frame with that number to draw it

[Ethanthegrand14 (Ethanthegrand)]

Module Patch / Small Update - v4.6.1

CanvasDraw fonts can now support multi-byte UTF-8 characters (such as greek letters, ascii characters, blocks, etc)

The Codepage and CodepageLarge fonts have been updated and now support 254 characters

These changes affect Canvas:DrawText() and Canvas:DrawTextXY()

---

Special thanks to @Lxi099!

---

CanvasDraw4.6.1.b.rbxm (63.2 KB)

[trtman33]

@Ethanthegrand14

Yes, that’s right! We can now dynamically resize the canvas without having to destroy and create a new one.

//devforum-uploads.s3.dualstack.us-east-2.amazonaws.com/uploads/original/5X/c/d/6/6/cd667d16de87f14be9fc52e67a3a52740dfee97d.mp4

That’l be good, especially for any games using CanvasDraw that want an easy way to incorporate Graphics Levels* for performance on different devices.

*(Not 100% even needed since CanvasDraw is so optimized!)

[Ethanthegrand14 (Ethanthegrand)]

CanvasDraw Tools Plugin - Image Editor Temporarily Broken

Hey all, we currently have an EditableImage rendering issue with the plugin, which causes the Image Editor to no longer show anything while drawing/importing an image.

Introducing in-experience Mesh & Image APIs [Studio Beta]

We changed how EditableImages are tracked which broke tracking of EditableImages in CoreGui. I will turn off this change on Monday and fix the issue with it soon. It’s hard to give a concrete timeline, unfortunately, but we are hard at work making the final changes to allow this to be released. For EditableImage, the last change we need to make is allowing EditableImages to be shared by multiple instances. Keep watching this thread for more updates coming soon.

This issue should be fixed sometime on Monday

---

EDIT: The issue has now been resolved

[Ethanthegrand14 (Ethanthegrand)]

Small Optimisation Update - v4.6.2

Hey all, this update is one of the few rare optimisation updates where I somehow make CanvasDraw even faster than it already is!

---

Here is the list of changes:

• Improved performance by 20% for textured triangles. This affects the following methods:

  • Canvas:DrawTexturedTriangle() and Canvas:DrawTexturedTriangleXY()
  • Canvas:DrawDistortedImage() and Canvas:DrawDistortedImageXY()
  • Canvas:DrawRotatedImage() and Canvas:DrawRotatedImageXY()
  • Canvas:DrawImageRect() and Canvas:DrawImageRectXY()

• Improved performance for Canvas:DrawTriangle() and Canvas:DrawTriangleXY() by 22%

• Fixed and increased performance for Canvas:ClearPixels() and Canvas:FillPixels() by over 200%

---

CanvasDraw4.6.2.b.rbxm (63.6 KB)

[Ethanthegrand14 (Ethanthegrand)]

Optimisation Update - v4.7.0

---

Hey all, roblox has recently released a new API for EditableImages that allows us to use buffers efficiently with them.

CanvasDraw now uses 8-bit integer buffers instead of arrays of doubles for the pixel grid management.

Doing this has not only improved memory usage, but also has improved framerate as well!

---

From a 1024x1024 Canvas:SetRGB() with clearing for every heartbeat test, I have acheived the following numbers:

• CanvasDraw v4.6.2 (Previous Version):

  • 13 FPS

• CanvasDraw v4.7.0 (Newest Version):

  • 18 FPS

---

This update has also reduced ImageData size by about 33%

Prior to this update, an uncompressed 1024x1024 ImageData would take up 0.3 GB of memory, and now with this update the same image only takes up 0.1 GB of memory!

---

CanvasDraw4.7.0.b.rbxm (64.2 KB)

[bluebxrrybot (blueberry)]

Yay! More Mandelbrot frames per recording! But to be fair, I’m happier with the FPS improvements! Thanks, Roblox and my beloved Ethan.

[baconddddddd1 (Baba Yaga)]

Hey @Ethanthegrand14, Can we also have vector font support, and be able to easily add new fonts to it. I’d like to get in touch with you through a social media if possible to discuss about certain stuff.

Regarding optimizations, I think the Colors of CanvasDraw can be also optimized similarly to OSGL if not already optimized.

[Ethanthegrand14 (Ethanthegrand)]

For now, vector fonts are beyond the scope of CanvasDraw, it is simply just too complicated to add in nicely and I currently do not know how i’d even go about doing it and moving away from bitmap fonts is currently not planned.

@baconddddddd1

Regarding optimizations, I think the Colors of CanvasDraw can be also optimized similarly to OSGL if not already optimized.

CanvasDraw’s colours are already optimised and very fast (as they are literally just barebone numbers). Proably as fast as can be at the moment, and last time I checked out OSGL, their colours are very slow as they use a lot of classes with it, which is pretty slow for per-pixel performance.

Canvas:SetRGB(X, Y, R, G, B) -- Avoids colour or Color3 construction. Perfect for per-pixel processing

If you have any other in-depth questions, I can indeed add you on discord if you have that

[baconddddddd1 (Baba Yaga)]

I agree with vector fonts being difficult to add. I currently have managed to add all Roblox fonts in vector, however, currently the biggest issue im having is that certain features are not working perfectly, and its still missing a lot of stuff so I guess I could say I’ve given up on it personally mostly due to lack of time. I also have this written in p5js editor so other developers can contribute/view it.

The colour is fantastic if its avoiding Color3 construction, it’s a great thing.
Regarding Discord, I have several questions along with some other stuff that I wanna disucss about with you: .ranu.

Looking forward to talking to you there!

[DukeAunarky (Aunarky)]

can you help me here please ethan?

[Ethanthegrand14 (Ethanthegrand)]

I honestly have no idea why you’re having problems, i’ll do a quick test myself with the tile set and see what happens.

One thing I have immediately noticed with your tile sheet is that it has 1 pixel padding, which can be annoying to deal with when sampling each of the rects

---

EDIT: It appears for some reason the scaling math is completely wrong- Idk if it was always like this, but I am making a fix now

[DukeAunarky (Aunarky)]

It would also appear that the way it is being drawn has that “distorted” effect still. and I tried using the other image drawing functions (and forking them) to no avail.

It would be really nice if I could get some help to get the function draw in Pixel Perfect with no distortion (No More DistortedTexturedTriangle Draws)

[Ethanthegrand14 (Ethanthegrand)]

The distortion is going to be fixed! So far progress is going really well

[DukeAunarky (Aunarky)]

Hope has been restored in the world.

[TheVerseer]

This is actually so cool, great job!

[DukeAunarky (Aunarky)]

You have absolutely no idea how much this means to me… I spent WEEKS just figuring out what the problem was for the pixel rendering that I was burned out twice on it figuring out the method.
THANK YOU!

[Ethanthegrand14 (Ethanthegrand)]

Module Patch - v4.7.1

---

This release fixes a lot of rendering issues for image based drawing methods that use textured triangles internally.

---

• Fixed jaggered texuring when using DrawTexturedTriangle, DrawDistortedImage, DrawImageRect and DrawRotatedImage

• Fixed DrawImageRect not rendering correctly. Results should now be perfect and have no more issues!

• FIxed DrawTexturedTriangle being 1 pixel off

• Fixed ImageData:Clone() not 100% deep copying due to the new use of buffers

---

CanvasDraw4.7.1.b.rbxm (64.3 KB)

---

Here you go @DukeAunarky!