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

Resources Community Resources
, , , ,
#32

Patch - v2.3.2

Fixed the DrawCricle() function

This update contains a brand new and a much more fast and accurate algorithm for drawing circles. Before, DrawCricle used to leave imperfect circles with weird results at certain radiuses. This has now been fixed!

Fixed up and made the thread and API reference better

This thread has been updated to be a little bit smaller and more straight to the point without filling up the post with useless or repetitive information.

The API reference thread for CanvasDraw has also been updated as well.

2 Likes
#33

Here’s my solution, First things first, I have a code that takes in videos and turns them into different pixel packets (a json file filled with pixel color data).

What happens next is that ill make it store all of the packets into folders or values. Once loaded, ill use CanvasDraw to get those pixels, turn them into images and scroll through them to make up a video…

1 Like
#34

What’s preventing you from using CanvasDraw’s method for images?

CanvasDraw already does this with its image functions and it is quite efficient too since its all cached data from the Image importer plugin.

image

Unless your problem is the speed of importing images with my plugin, otherwise CanvasDraw’s method is already fast enough for GIFs and small videos.

CancasDraw also uses a single instance (an empty folder in this case) to store an image as a compressed string with attributes. So that’s only a few kilobytes of data for an image instance thats like 256x256p in a roblox place that CanvasDraw can load, and then draw.

CanvasDraw.CreateCanvas(CanvasFrame, Vector2.new(256, 256))

local SaveObject = script.Noob -- That folder instance that stores image data as compressed string values

-- Covert the compressed ImageData strings into a cache of readable values for CanvasDraw
local ImageData = CanvasDraw.GetImageDataFromSaveObject(script.Noob)

-- Draw the image to the canvas
CanvasDraw.DrawImage(ImageData)

image
image1136×587 84.5 KB

1 Like
#35

Yeah CanvasDraw doesnt work for videos longer than 1 minute… However the best fix is to split the video into bits and store it into folders… problem is figuring out how to scroll through them.

other way is the way i originally proposed.

But ur right, i can just use the image import system.

2 Likes
#36

Patch - v2.3.3

This update brings some fixes and optimisations to CanvasDraw. These changes include:

  • Optimising the DrawImage() and DrawDistortedImage() functions
  • Optimising the pixel and point fetch methods
  • And fixing GetPoints() and GetPixels() sometimes returning false results
1 Like
#37

Small update - v2.4.0

This update brings some more optimisation updates to CanvasDraw. These changes include:

  • An optimisation and a performance boost of rendering the canvas
  • More optimisation of the image functions
  • Optimisation of the filling method for the DrawCircle() function
  • Some new performant fetch alternative methods for pixels and images
    • GetPixelXY(X, Y) – A performant and more raw version of GetPixel(Point)
    • GetPixelFromImageXY(ImageData, X, Y) – A performant and more raw version of GetPixelFromImage(ImageData, Point)
1 Like
#38

hahehahehahea this would be fun to make a demo out of

I’ve lowkey been wanting to make something like this, aswell, thank you for releasing this!

3 Likes
#39

I’ll for sure use this in every 2D game I have in-mind!

3 Likes
#40

Hello Developers! so im Trying to get Livestreams from youtube inside roblox how could this be done?
if anyone can create such a system for me contact me: Ms.Videoproductions_Ltd#5345
i really would like to use this to play recaps of my events on screens

2 Likes
#41

This isn’t the right module for that then, you’d have to make an image sequence, basically take a whole bunch of images from the recaps and stitch them together via code.

1 Like
#42

This module is only helpful for the drawing part for your case. All you have to do is find a way to capture pixel data from your screen (and down scale the resolution) and for every frame, find a way to send every pixel data from your screen as color3 values and then draw every pixel to the canvas.

You may need third party tools to achieve this

1 Like
#43

i have such a Encoder already just i need a good decoder inside roblox
i will have to cache around 50 frames and in background constantly preloading

#44

How can I make a raytracing rendering engine with this? im trying to make realtime reflections…

2 Likes
#45

is it possible to use this to make minimap? something like rorender

3 Likes
#46

This module is criminally underrated, when looking at the title I thought this was one of those basic drawing tools like in drawing games, boy was I wrong, first few hours of figuring out how it works and already got videos of around 20 seconds working (95x190 res with 10 fps) might look into making watchable live streams next (That aren’t laggy) and a tutorial if anyone is interested

5 Likes
#47

Sort of. But you would just have to project the whole world into the canvas but your probably better off using ViewportFrames for this case

3 Likes
#48

You’d have to do your own math, I have a topic on that contains a link to some raytracing stuff the you could prob start from there

2 Likes
#49

its already done lmao, All i need is to blur the pixels, something thats been a challenge

Heck even more of a challenge compared to adding shadows. I plan on doing Box kernel Blur, but im not sure if thats a good option.

Btw, I used GradientCanvas for this reflections project, thanks to that, there are less guis in use.

1 Like
#50

Hi there! I gotta ask… may I take use this module, scan the Image functions so that i can write a similar system into my own upcoming module, but this time with some optimizations?

I’ve learnt a bunch of things that might help with the optimization part, Especially reducing the frame/instance count and etc.

1 Like
#51

Yeah sure. But please do credit me somewhere in your module (a comment will be fine) for the image functions as I put a tone of effort into them and making them run well

3 Likes