Second HTML5 App Update – Text Arranger 1.1
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/