Added ability to align button text to the left, right or center

README.md

@@ -114,7 +114,9 @@ myButton.text = "Press Me";       //Text of the clickable (string)
 myButton.textColor = "#000000";   //Color of the text (hex number as a string)
 myButton.textSize = 12;           //Size of the text (integer)
 myButton.textFont = "sans-serif"; //Font of the text (string)
-myButton.textScaled = false;       //Whether to scale the text with the clickable (boolean)
+myButton.textScaled = false;      //Whether to scale the text with the clickable (boolean)
+myButton.textAlign = CENTER;      //The Horizontal alignment of the text (LEFT, RIGHT, CENTER)
+myButton.textPadding = 10;        //The space between the border and left or right aligned text in px (integer)
 ```
 
 ### Clickable Events

library/p5.clickable.js

@@ -69,6 +69,8 @@ function Clickable(x,y) {
 	this.textSize = 12;		//Size for the text shown
 	this.textFont = "sans-serif";	//Font for the text shown
 	this.textScaled = false;     //Scale the text with the size of the clickable
+    this.textAlign = CENTER;
+    this.textPadding = 10;
 
 	// image options
 	this.image = null; // image object from p5loadimage()
@@ -167,10 +169,21 @@ function Clickable(x,y) {
 		if(this.image){
 			this.drawImage();
 		}
-		textAlign(CENTER, CENTER);
+		textAlign(this.textAlign, CENTER);
 		textSize(this.textSize);
 		textFont(this.textFont);
-		text(this.text, this.x + this.width / 2, this.y + this.height / 2);
+
+        switch (this.textAlign) {
+          case LEFT:
+            text(this.text, this.x + this.textPadding, this.y + this.height / 2);
+            break;
+          case RIGHT:
+            text(this.text, this.x + this.width - this.textPadding, this.y + this.height / 2);
+            break;
+          default:
+            text(this.text, this.x + this.width / 2, this.y + this.height / 2);
+        }
+
 		if (mouseX >= this.x && mouseY >= this.y
 			&& mouseX < this.x + this.width && mouseY < this.y + this.height) {
 			cl_lastHovered = this;