The HTML5 Canvas Text API - HTML5 Canvas

HTML and CSS Reference

In-Depth Information

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);

formElement = document.getElementById("fontStyle");

formElement.addEventListener('change', fontStyleChanged, false);

drawScreen();

function drawScreen() {

//Background

context.fillStyle = "#ffffaa";

context.fillRect(0, 0, theCanvas.width, theCanvas.height);

//Box

context.strokeStyle = "#000000";

context.strokeRect(5, 5, theCanvas.width−10, theCanvas.height−10);

//Text

context.textBaseline = textBaseline;

context.textAlign = textAlign;

context.font = fontWeight + " " + fontStyle + " " + fontSize + "px " + fontFace;

var xPosition = (theCanvas.width/2);

var yPosition = (theCanvas.height/2);

Search WWH ::

Custom Search

Home