Rounded rectangle

Questions
1

Trying to create a rounded rectangle to which I will then turn into a button. (Still learning)

This is my code with the error at the bottom. In run view all I am seeing is an actual rectangle, not a rounded.

I understands the line functions are setting the full for the rounded edges but I’m not entirely sure of why they are set out with the insetpos, sizes and +'s.

function roundRect(x,y,w,h,r)
    pushStyle()
    
    insetPos = vec2(x+r,y+r)
    insetSize = vec2(w-2*r,h-2*r)
    
    --Copy fill into stroke
    local red,green,blue,a = fill()
    stroke(red,green,blue,a)
    
    noSmooth()
    rectMode(CORNER)
    rect(insetPos.x,insetPos.y,insetSize.x,insetSize.y)
    
    if r > 0 then
        smooth()
        lineCapMode(ROUND)
        strokeWidth(r*2)

        line(insetPos.x, insetPos.y, 
             insetPos.x + insetSize.x, insetPos.y)
        line(insetPos.x, insetPos.y,
             insetPos.x, insetPos.y + insetSize.y)
        line(insetPos.x, insetPos.y + insetSize.y,
             insetPos.x + insetSize.x, insetPos.y + insetSize.y)
        line(insetPos.x + insetSize.x, insetPos.y,
             insetPos.x + insetSize.x, insetPos.y + insetSize.y)            
    end
    popStyle()
end

function draw()
    roundRect(WIDTH/2, HEIGHT/2, 300, 20, 30)

enderror: [string "-- rounded rec..."]:22: attempt to index global 'insetPos' (a nil value)

If anyone could help I’d greatly appreciate

2

Ok I figured out my error. Was quite silly. I was fault finding it in 2 windows and I corrected it in a sub tab instead of the main so the main was still seeing an error,

I still have 2 questions if anyone can help.
1-why are the lines so complicated. There are 4 due to 4 corners?
2- if I wanted say 7 buttons, would I need to put that code in 7 times, or can you put it in a sub tab once and just reuse over and over?

3

@Cjohnstone87 hello.
1/ lines are no complicated. A line is 2 points, a point is to coordinates, then 4 data to enter.
2/ look in the documentation how to make a class() . This is a kind of sub that will create a new object (button here) each time you need one.

4

@Cjohnstone87 - if your seven buttons are the same (or similar) shape and size, just draw them once to create an image in memory, then sprite that image every time you need a button.

btn=image(100,50) --create blank image
setContext(btn) --start drawing on image
   --put all your drawing commands here to draw a rounded rectangle
setContext()  --stop drawing on image

--every time you need a button....eg
sprite(btn,200,150)
--or to resize it keeping the same proportions
sprite(btn,200,150,150) --make button larger