Just a few updates on my text editing app I’ve been creating as a means to learn the canvas text API. New features added are:

  • Font can now be changed! Not all browsers support the fonts I added though.
  • Font Size can now be modified.
  • Font colors, for both fill and outline, can be chosen.
  • Font style and weight can be edited.

 

I also added a few optimizations to keep the text on the center of the screen better, but they’re not really noticeable because the first version of the app did it quite nicely.

The Updated JavaScript

$(document).ready(function() {  
  // Uses Modernizr.js to check for canvas support
  function canvasSupport() {
    return Modernizr.canvas;
  }
  
  
  // Once DOM is ready, start the app
  canvasApp();
  
  function canvasApp() {
    // Check for canvas support
    if (!canvasSupport()) {
      return;
    }
  
    // Grab the canvas and set the context to 2d
    var theCanvas = $("#canvasOne");
    var context = theCanvas.get(0).getContext("2d");
    
    // Variables for text handling
    var message = "";
    var fillOutline = "fill"; // set default fill/outline to fill
    var fontSize = "50";
    var fontFace = "serif";
    var fontWeight = "normal";
    var fontStyle = "normal";
    var textFillColor = "#000000";
    var textStrokeColor = "#000000";
    
    // Variables used for positioning
    var textBaseline = "middle";
    var textAlign = "center";
    
    // Event listeners
    $("#textBox").keyup(textBoxChanged);
    $("#fillOutline").change(fillOutlineChanged);
    $("#textSize").change(textSizeChanged);
    $("#textFont").change(textFontChanged);
    $("#fontWeight").change(fontWeightChanged);
    $("#fontStyle").change(fontStyleChanged);
    $("#textFillColor").change(textFillColorChanged);
    $("#textStrokeColor").change(textStrokeColorChanged);
    
    // First screen draw
    drawScreen();
    
    // Event handler functions
    function textBoxChanged(e) {
      var target = e.target;
      message = target.value;
      drawScreen();
    }
    
    function fillOutlineChanged(e) {
      var target = e.target;
      fillOutline = target.value;
      drawScreen();
    }
    
    function textSizeChanged(e) {
      var target = e.target;
      fontSize = target.value;
      drawScreen();
    }
    
    function textFontChanged(e) {
      var target = e.target;
      fontFace = target.value;
      drawScreen();
    }

    function fontWeightChanged(e) {
      var target = e.target;
      fontWeight = target.value;
      drawScreen();
    }
    
    function fontStyleChanged(e) {
      var target = e.target;
      fontStyle = target.value;
      drawScreen();
    }
    
    function textFillColorChanged(e) {
      var target = e.target;
      textFillColor = "#" + target.value;
      drawScreen();
    }
    
    function textStrokeColorChanged(e) {
      var target = e.target;
      textStrokeColor = "#" + target.value;
      drawScreen();
    }
 
    // Draws or updates the screen.
    function drawScreen() {
      // Background
      context.fillStyle = "#ffffff";
      context.fillRect(0, 0, theCanvas.width(), theCanvas.height());
      
      // Outside Border
      context.strokeStyle = "#000000";
      context.strokeRect(5, 5, theCanvas.width()-10, theCanvas.height()-10);
      
      // Text
      context.font = fontWeight + " " + fontStyle + " " + fontSize + "px " + fontFace;
      context.textBaseline = textBaseline;
      context.textAlign = textAlign;
      
      // Variables created in order to center the text on the canvas
      var metrics = context.measureText(message);
      var textWidth = metrics.width;
      var xPosition = (theCanvas.width()/2);
      var yPosition = (theCanvas.height()/2);
      
      // Draw the text differently depending on fill or outline (stroke)
      switch(fillOutline) {
        case "fill":
          context.fillStyle = textFillColor;
          context.fillText(message, xPosition, yPosition);
          break;
        case "stroke":
          context.strokeStyle = textStrokeColor;
          context.strokeText(message, xPosition, yPosition);
          break;
        case "both":
          context.fillStyle = textFillColor;
          context.fillText(message, xPosition, yPosition);
          context.strokeStyle = textStrokeColor;
          context.strokeText(message, xPosition, yPosition);
          break;
      }
    }
  }
  
});

The App

Check out the updated app at: https://www.zesix.com/html5/textArranger1.1/