CODEWITHSUNDEEP
canvasrounded-cornersshapes
mao
mao

Reputation: 1077

canvas draw rounded rectangle in reverse?

I apologise in advance for asking this, I was kindly provided with some code to draw a rounded corner rectangle progress bar which was great:

http://jsfiddle.net/P2qTq/

I need to reverse the drawing of the rectangle but I can't for the life of me manage it

http://jsfiddle.net/P2qTq/7/

I tried changing the points at which the 4 lines and 4 corners are drawn so it starts with the top left corner but I'm making a total mess of it:

    var startT = 0;
    var startTR = horizLineLength;
    var startR = startTR + cornerLength;
    var startBR = startR + vertLineLength;
    var startB = startBR + cornerLength;
    var startBL = startB + horizLineLength;
    var startL = startBL + cornerLength;
    var startTL = startL + vertLineLength;

to

var startTL = 0;
var startL = startTL + cornerLength;
var startBL = startL + vertLineLength;
var startB = startBL + cornerLength;
var startBR = startB + horizLineLength;
var startR = startBR + cornerLength;
var startTR = startR + vertLineLength;
var startT = startTR = cornerLength;

Can anyone point me in the right direction please?

Upvotes: 0

Views: 342

Answers (1)

markE
markE

Reputation: 105015

Instead of this:

drawPercentRect(ui.value);

Do this:

drawPercentRect(100-ui.value);

Upvotes: 1

Related Questions