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

As currently get image data from texture is limited to v 4.0 I made a rudimentary version which uses v 3. It’s quite laggy and you need the actual url of the image not the assetid.

Proxy Code: Glitch :・゚✧

(do not use this proxy in the example I will be password protecting at some point)

Example code for getting all of a users friends

local HttpService = game:GetService('HttpService')
local RunService = game:GetService('RunService')

local CanvasDraw = require(game.ReplicatedStorage.Modules.CanvasDraw)

local EndPoint = "https://thumbnails.roproxy.com/v1/users/avatar-headshot?userIds={userId}&size=180x180&format=Png&isCircular=false"



local function GetAllFriendHeadshots(id)
	
	
	
	local success, AllFriends = pcall(function() return game.Players:GetFriendsAsync(id) end)
	
	if not success then
		warn(AllFriends)
		return nil
	end
	
	local Ids = ""
	
	repeat
		
		for i,v in pairs(AllFriends:GetCurrentPage()) do
			Ids = Ids..v.Id..","
		end
		
		if not AllFriends.IsFinished then
			AllFriends:AdvanceToNextPageAsync()
		end
		
	until AllFriends.IsFinished == true
	
	
	
	local Url = EndPoint:gsub("{userId}",Ids)
	local success,res = pcall(function()
		return HttpService:JSONDecode(HttpService:GetAsync(Url))
	end)
	
	if not success then
		warn(res)
		return nil
	else
		local Stuff = {}
		
		for i,v in pairs(res.data) do
			table.insert(Stuff,v.imageUrl)
		end
		return Stuff
	end
end

local function FastWait(Count) -- Avoid lag spikes
	
	local FastWaitCount = 0
	
	if FastWaitCount >= Count then
		FastWaitCount = 0
		RunService.Heartbeat:Wait()
	else
		FastWaitCount += 1
	end
end

local function Simplify(data)
	
	local Newpixels = {}
	local NewAlphas = {}
	
	
	
	for i,v in pairs(data.colours) do
		pcall(function()
			--print(Color3.fromRGB(table.unpack(v)))
			table.insert(Newpixels,Color3.fromRGB(table.unpack(v)))
		end)
		FastWait(4000)
	end
	
	for i,v in pairs(data.alphas) do
		pcall(function()
			--print(v / 255)
			table.insert(NewAlphas,v)
		end)
		FastWait(4000)
	end
	
	
	
	return Newpixels,NewAlphas
end

local function GetImageData(link)
	
	local url = "https://image-to-pixels-proxy.glitch.me/image-to-pixel?url="..link 
	
	local success,res = pcall(function()
		return HttpService:JSONDecode(HttpService:GetAsync(url))
	end)
	
	if not success then
		warn(res)
		return nil
	else
		
		local Pixels,Alphas = Simplify(res)
		
		local CanvasData = {
			ImageColours = Pixels,
			ImageAlphas = Alphas,
			ImageResolution = Vector2.one * 180
		}
		
		local obj = CanvasDraw.CreateSaveObject(CanvasData,true)
		obj.Parent = game.Workspace.Saves
		obj.Name = link
		
		
		return res
	end
	
end

local Main = {}

function Main.CreateSaveOfFriends(userId)
	local SaveObject = {}
	local AllFriends = GetAllFriendHeadshots(userId)
	
	
	
	for i,v in pairs(AllFriends) do
		if not v then continue end
		coroutine.wrap(GetImageData)(v)
		FastWait(500)
	end
	
end


return Main

you can use an png image decoder to get it without needing the proxy

Could you share me an example of this decoder? I don’t know any which can fetch the parts of an image from a URL. This also can’t use editable images

just a GET on the url gives you the png data, you pass it to this decoder and it’ll give you all you need to get the individual pixels

What is wally? I am unaware of it. Is it like a file manager or something?

Something like that; Wally is a package manager for Roblox. It’s made by UpliftGames (the people who made Adopt Me)


ffrostfall made a good post about it (i’m not good at explaining)

These odd deformaties occur when rotating the sprite (or more technically: multiplying its X size by -1)
RobloxStudioBeta_5Ki6TVvKp3
RobloxStudioBeta_XsUNjHkbwT

1 Like

Not quite sure why that happens. Issue probably lies within DrawTexturedTriangleXY somewhere, also scale wasn’t intended to be used as negative values. A solution for now is to probably just use two separate sprites for flipping your image

I was considering that! I’m just sad that the Tri draw call has even more artifacts than I thought. :,(

1 Like

I dont even know why, i assume my math somewhere is slightly off, but if someone can figure out the issue that would be amazing

1 Like

:broken_heart:​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

is there still a possibility that the pixel fix could be looked into soon? I’d love to get back to it

1 Like

Now we can literally re-create Doom also in roblox studio :skull:

Btw very nice work

1 Like

I look into it again possibly today or tomorrow and see if i can do a fix

1 Like

I dont seem to be having this issue. Can you send the sprite you used to test this?

image image

image

Just make sure to remove the background colors :slight_smile:

1 Like

I tested the top row one and it seems to work perfectly fine at scales 1, 2 and 3. I am having no distortion issues with the scale.

Are you using the latest version of CanvasDraw?

Here was my test spritesheet I made:
image-1.png (59) 64x16
image-1.png (60)

Hi, this is what it looks like for me, even after using a different version


This is what it looks like fullscaled, it still has those tiny extras pixels :frowning:

RobloxStudioBeta_HFRPYUlnPH

Can you send me a repo? I’ll take a look

1 Like

Sure! Add me on Discord.
my username is aunarky