# How can I draw a rect with round corners?

Hi, how can I draw a rect with round corners? Thanks, Pedro

@pvchagas On the right side of the page, just above “Start a New Discussion” is a search bar. You can use that to do a search for round rectangles or anything else. There are a lot of examples in this forum, you just need to search for things.

Why not making a new contest ‘smallest code rounded rect’? That would be fun! I’ll post my entry below.

here it is (22 single-command lines inside the function)

``````-- rounded rect

function roundedRect(x,y,w,h,r)

local oldFill = color( fill() )
local oldStroke = color( stroke() )
local s = strokeWidth()
local ds = math.max(s-1,0)

local function rawRect(x,y,w,h,r)
translate(x,y)
rect(r,0,w-2*r,h)
rect(0,r,w,h-2*r)
ellipse(r  ,r,r*2)
ellipse(w-r,r,r*2)
ellipse(r  ,h-r,r*2)
ellipse(w-r,h-r,r*2)
translate(-x,-y)
end

noStroke()
fill(oldStroke)
rawRect(x,y,w,h,r)
fill(oldFill)
rawRect(x+ds, y+ds, w-ds*2, h-ds*2, r-ds)

strokeWidth(s)
stroke(oldStroke)
fill(oldFill)
end

function setup()
end

function draw()
background(40, 40, 50)
strokeWidth(5)
stroke(255, 174, 0, 255)
fill(255, 0, 0, 255)
roundedRect(100,200,200,100,20)
rect(400,200,200,100)
end

``````

 had to make a couple changes for 100% compatibility with strokeWidth

here i have gained 1 line (21 now).
 argh! back to 22: i must put a resetStyle for 100% compatibility.
 damned! Doesnt work correctly with transparent colors.

``````-- rounded rect

function roundedRect(x,y,w,h,r)

local oldFill = color( fill() )
local oldStroke = color( stroke() )
local s = strokeWidth()
local ds = math.max(s-1,0)

local function rawRect(x,y,w,h,r)
translate(x,y)
rect(r,0,w-2*r,h)
rect(0,r,w,h-2*r)
ellipse(r  ,r,r*2)
ellipse(w-r,r,r*2)
ellipse(r  ,h-r,r*2)
ellipse(w-r,h-r,r*2)
translate(-x,-y)
end

pushStyle()
resetStyle()
noStroke()
fill(oldStroke)
rawRect(x,y,w,h,r)
fill(oldFill)
rawRect(x+ds, y+ds, w-ds*2, h-ds*2, r-ds)
popStyle()

end

function setup()
end

function draw()
background(40, 40, 50)
strokeWidth(5)
--noStroke()
stroke(255, 174, 0, 255)
fill(255, 0, 0, 255)
roundedRect(300,200,200,100,20)
rect(400,200,200,100)
end
``````

i could gain 2 more lines (include the tanslate inside, but would be less readable)

this version is compatible with transparencies, but now it is 50 lines.

``````-- rounded rect
local function rawRect(img,x,y,w,h,r)
setContext(img)
background(0,0,0,0)
fill(255)
translate(x,y)
rect(r,0,w-2*r,h)
rect(0,r,w,h-2*r)
ellipse(r  ,r,r*2)
ellipse(w-r,r,r*2)
ellipse(r  ,h-r,r*2)
ellipse(w-r,h-r,r*2)
resetMatrix()
setContext()
end
function roundedRect(x,y,w,h,r)

local oldFill = color( fill() )
local oldStroke = color( stroke() )
local oldTint = color( tint() )
local s = strokeWidth()
local ds = math.max(s-1,0)
local img = image(w,h)
local imgOuter = image(w,h)
local imgInner = image(w,h)
local imgStroke = image(w,h)

pushStyle()
resetStyle()
pushMatrix()
resetMatrix()
spriteMode(CORNER)
noStroke()

rawRect(imgOuter,0,0,w,h,r)
rawRect(imgInner, ds, ds, w-2*ds, h-2*ds, r-ds)

setContext(imgStroke)
sprite(imgOuter,0,0)
blendMode(ZERO, ONE_MINUS_SRC_COLOR)
sprite(imgInner,0,0)
setContext()

blendMode(NORMAL)
setContext(img)
tint(oldStroke)
sprite(imgStroke,0,0)
tint(oldFill)
sprite(imgInner,0,0)
setContext()

popMatrix()
tint( oldTint )
spriteMode( rectMode() )
sprite(img,x,y)
popStyle()

end

function setup()
end

function draw()
background(0, 0, 0, 255)
strokeWidth(5)
--noStroke()
stroke(255, 174, 0, 198)
fill(255, 0, 0, 120)
rect(400,200,200,100)
roundedRect(300,200,200,100,20)
end

``````

I’d just like to put in a quick note: This has been asked 3 times before with amazing answers. Before you ask a question please, please search the forums and try to make your own version first.

@Zoyt, @dave1707 touched on that above

@JakAttak - Whoops… Sorry. Missed that.

You can use the class roundRect from the sounds plus example project.

@pvchagas Not sure exactly what you’re after, but here’s an example of rounded rectangles.

``````
supportedOrientations(LANDSCAPE_ANY)

function setup()
parameter.integer("height1",50,350,50,setup1)
parameter.integer("width1",50,300,50,setup1)
parameter.integer("height2",50,350,50,setup1)
parameter.integer("width2",50,300,300,setup1)
end

function setup1()
r1=roundRect(225,400,width1,height1,color(255,0,0))
r2=roundRect(225,25,width2,height2,color(0,255,0))
end

function draw()
background(40, 40, 50)
r1:draw()
r2:draw()
end

roundRect=class()

function roundRect:init(x,y,w,h,c)
self.x=x    -- x position
self.y=y    -- y position
self.w=w    -- width
self.h=h    -- height
self.c=c    -- color
end

function roundRect:draw()
fill(self.c)    -- set color
rect(self.x,self.y,self.w,self.h)  -- draw rectangle
ellipse(self.x,self.y+self.h/2,self.h+1)  -- draw rounded left end
ellipse(self.x+self.w,self.y+self.h/2,self.h+1) -- draw rounded right end
end

``````