canvas draw functions

src/game-lib-a-2-utils.js

@@ -968,4 +968,23 @@ GameLib.Utils.UpperCaseUnderscore = function(word) {
     str = str.replace(new RegExp('^_'),'');
 
     return str;
+};
+
+/**
+ * Returns Left Padded Text - ex. length 5, padchar 0, string abc = '00abc'
+ * @param length
+ * @param padChar
+ * @param string
+ * @returns {string}
+ * @constructor
+ */
+GameLib.Utils.PaddedText = function(length, padChar, string) {
+
+    var pad = "";
+
+    for (var x = 0; x < length; x++) {
+        pad[x] = padChar;
+    }
+
+    return pad.substring(0, pad.length - string.length) + string;
 };

src/game-lib-api-canvas.js

@@ -10,6 +10,7 @@
  * @param offset
  * @param tabIndex
  * @param texts
+ * @param textBaseline
  * @constructor
  */
 GameLib.API.Canvas = function(
@@ -22,7 +23,8 @@ GameLib.API.Canvas = function(
     height,
     offset,
     tabIndex,
-    texts
+    texts,
+    textBaseline
 ) {
     if (GameLib.Utils.UndefinedOrNull(id)) {
         id = GameLib.Utils.RandomId();
@@ -69,6 +71,11 @@ GameLib.API.Canvas = function(
     }
     this.texts = texts;
 
+    if (GameLib.Utils.UndefinedOrNull(textBaseline)) {
+        textBaseline = 'middle';
+    }
+    this.textBaseline = textBaseline;
+
     GameLib.API.Component.call(
         this,
         GameLib.Component.CANVAS,

src/game-lib-canvas.js

@@ -26,7 +26,8 @@ GameLib.Canvas = function(
 		apiCanvas.height,
 		apiCanvas.offset,
 		apiCanvas.tabIndex,
-		apiCanvas.texts
+		apiCanvas.texts,
+        apiCanvas.textBaseline
 	);
 
     this.offset = new GameLib.Vector2(
@@ -42,6 +43,8 @@ GameLib.Canvas = function(
             'texts' : [GameLib.D3.Text]
         }
     );
+
+    this.context = null;
 };
 
 GameLib.Canvas.prototype = Object.create(GameLib.Component.prototype);
@@ -61,8 +64,6 @@ GameLib.Canvas.prototype.createInstance = function() {
 
     this.instance.setAttribute('style', 'left: ' + this.offset.x + 'px;top: ' + this.offset.y + 'px');
 
-    //this.instance.style.visibility = 'hidden';
-
     if (this.autoUpdateSize) {
         /**
          * Update our size from the instance size
@@ -77,10 +78,6 @@ GameLib.Canvas.prototype.createInstance = function() {
         this.instance.height    = this.height;
     }
 
-    this.writeText();
-
-    //document.body.appendChild(this.instance);
-
     GameLib.Component.prototype.createInstance.call(this);
 };
 
@@ -146,6 +143,14 @@ GameLib.Canvas.prototype.updateInstance = function(property) {
         return;
     }
 
+    if (property === 'textBaseLine') {
+        if (!this.context) {
+            this.context = this.instance.getContext('2d');
+        }
+        this.context.textBaseline = this.textBaseline;
+        return;
+    }
+
     GameLib.Component.prototype.updateInstance.call(this, property);
 };
 
@@ -167,26 +172,28 @@ GameLib.Canvas.prototype.toApiObject = function() {
         this.tabIndex,
 		this.texts.map(function(text){
 		    return GameLib.Utils.IdOrNull(text)
-        })
+        }),
+        this.textBaseline
 	);
 };
 
 GameLib.Canvas.prototype.writeText = function() {
 
-    if (this.texts.length > 0) {
+    this.clear();
-        var context = this.instance.getContext('2d');
-        context.textBaseline = "middle";
-        context.clearRect(0, 0, this.width, this.height);
-    }
 
     this.texts.map(
+
         function(text){
 
+            if (!this.context) {
+                this.context = this.instance.getContext('2d');
+            }
+
             text.parentCanvas = this;
 
-            context.fillStyle = text.fillStyle;
+            this.context.fillStyle = text.fillStyle;
-            context.font = text.font;
+            this.context.font = text.font;
-            context.fillText(text.value, text.offset.x, text.offset.y);
+            this.context.fillText(text.value, text.offset.x, text.offset.y);
 
             if (this.parentTexture && this.parentTexture.instance) {
                 this.parentTexture.instance.needsUpdate = true;
@@ -194,4 +201,135 @@ GameLib.Canvas.prototype.writeText = function() {
 
         }.bind(this)
     );
-};
+};
+
+GameLib.Canvas.prototype.clear = function() {
+
+    if (!this.context) {
+        this.context = this.instance.getContext('2d');
+    }
+
+    this.context.clearRect(0, 0, this.width, this.height);
+};
+
+GameLib.Canvas.prototype.filledRectangle = function(
+    x,
+    y,
+    width,
+    height,
+    fillStyle
+) {
+
+    if (!this.context) {
+        this.context = this.instance.getContext('2d');
+    }
+
+    if (fillStyle) {
+        this.context.fillStyle = fillStyle;
+    }
+
+    this.context.fillRect(x, y, width, height);
+};
+
+GameLib.Canvas.prototype.outlineRectangle = function(
+    x,
+    y,
+    width,
+    height,
+    lineWidth,
+    strokeStyle
+) {
+
+    if (!this.context) {
+        this.context = this.instance.getContext('2d');
+    }
+
+    if (lineWidth) {
+        this.context.lineWidth = lineWidth;
+    }
+
+    if (strokeStyle) {
+        this.context.strokeStyle = strokeStyle;
+    }
+
+    this.context.fillRect(x, y, width, height);
+};
+
+GameLib.Canvas.prototype.line = function(
+    x,
+    y,
+    endX,
+    endY,
+    lineWidth,
+    strokeStyle
+) {
+
+    if (!this.context) {
+        this.context = this.instance.getContext('2d');
+    }
+
+    if (lineWidth) {
+        this.context.lineWidth = lineWidth;
+    }
+
+    if (strokeStyle) {
+        this.context.strokeStyle = strokeStyle;
+    }
+
+    this.context.beginPath();
+    this.context.moveTo(x, y);
+    this.context.lineTo(endX, endY);
+    this.context.stroke();
+};
+
+GameLib.Canvas.prototype.text = function(
+    text,
+    x,
+    y,
+    font,
+    fillStyle
+) {
+
+    if (!this.context) {
+        this.context = this.instance.getContext('2d');
+    }
+
+    if (font) {
+        this.context.font = font;
+    }
+
+    if (fillStyle) {
+        this.context.fillStyle = fillStyle;
+    }
+
+    this.context.fillText(text, x, y);
+};
+
+GameLib.Canvas.prototype.image = function(
+    image,
+    x,
+    y,
+    width,
+    height,
+    sx,
+    sy,
+    swidth,
+    sheight
+) {
+
+    if (!this.context) {
+        this.context = this.instance.getContext('2d');
+    }
+
+    if (sx && sy && swidth && sheight) {
+        this.context.drawImage(image, sx, sy, swidth, sheight, x, y, width, height);
+        return;
+    }
+
+    if (width && height) {
+        this.context.drawImage(image, x, y, width, height);
+        return;
+    }
+
+    this.context.drawImage(image, x, y);
+};