• Choose a category
• All
• Classic-Fiction

var xPosition = (theCanvas.width/2);

var yPosition = (theCanvas.height/2);

switch(fillOrStroke) {

case "fill":

context.fillStyle = textFillColor;

context.fillText (message, xPosition,yPosition);

break;

case "stroke":

context.strokeStyle = textFillColor;

context.strokeText (message, xPosition,yPosition);

break;

case "both":

context.fillStyle = textFillColor;

context.fillText (message, xPosition ,yPosition);

context.strokeStyle = "#000000";

context.strokeText (message, xPosition,yPosition);

break;

}

}

function textBoxChanged(e) {

var target = e.target;

message = target.value;

drawScreen();

}

function fillOrStrokeChanged(e) {

var target = e.target;

fillOrStroke = target.value;

drawScreen();

}

function textSizeChanged(e) {

var target = e.target;

fontSize = target.value;

drawScreen();

}

function textFillColorChanged(e) {

var target = e.target;

textFillColor = "#" + target.value;

drawScreen();

}

function textFontChanged(e) {

var target = e.target;

fontFace = target.value;

drawScreen();

}

function textBaselineChanged(e) {

var target = e.target;

textBaseline = target.value;

drawScreen();

}

function textAlignChanged(e) {

var target = e.target;

textAlign = 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();

}

}

Text and the Canvas Context

We’ve already discussed a couple Canvas context properties that affect the canvas in a global fashion: fillStyle and strokeStyle. However, there are two areas that visually demonstrate how changes to the properties of the context can affect the entire HTML5 Canvas: alpha transparencies and shadows.

Global Alpha and Text

Using alpha is a cool way to make objects seem to be partially or fully transparent on HTML5 Canvas. The globalAlpha property of the Canvas context is used for this purpose. After globalAlpha is applied, it affects all drawing on the canvas, so you need to be careful when setting it.

The valid values for context.globalAlpha are numbers between 0.0 (transparent) and 1.0 (opaque), and they act as a percentage