The HTML5 Canvas Text API - HTML5 Canvas

HTML and CSS Reference

In-Depth Information

canvasApp();

}

function canvasApp() {

var message = "your text";

var fontSize = "50";

var fontFace = "serif";

var textFillColor = "#ff0000";

var textAlpha = 1;

var shadowX = 1;

var shadowY = 1;

var shadowBlur = 1;

var shadowColor = "#707070";

var textBaseline = "middle";

var textAlign = "center";

var fillOrStroke ="fill";

var fontWeight = "normal";

var fontStyle = "normal";

var fillType = "colorFill";

var textFillColor2 = "#000000";

var pattern = new Image();

if (!canvasSupport()) {

return;

}

var theCanvas = document.getElementById("canvasOne");

var context = theCanvas.getContext("2d");

var formElement = document.getElementById("textBox");

formElement.addEventListener("keyup", textBoxChanged, false);

formElement = document.getElementById("fillOrStroke");

formElement.addEventListener("change", fillOrStrokeChanged, false);

formElement = document.getElementById("textSize");

formElement.addEventListener("change", textSizeChanged, false);

formElement = document.getElementById("textFillColor");

formElement.addEventListener("change", textFillColorChanged, false);

formElement = document.getElementById("textFont");

formElement.addEventListener("change", textFontChanged, false);

formElement = document.getElementById("textBaseline");

formElement.addEventListener("change", textBaselineChanged, false);

formElement = document.getElementById("textAlign");

formElement.addEventListener("change", textAlignChanged, false);

formElement = document.getElementById("fontWeight");

formElement.addEventListener("change", fontWeightChanged, false);

Search WWH ::

Custom Search

Home