The HTML5 Canvas Text API - HTML5 Canvas - page 153

formElement = document . getElementById ( "textFont" );
formElement . addEventListener ( 'change' , textFontChanged , false

false );

formElement = document . getElementById ( "fontWeight" );
formElement . addEventListener ( 'change' , fontWeightChanged , false false );

formElement = document . getElementById ( "fontStyle" );
formElement . addEventListener ( 'change' , fontStyleChanged , false

false );

Defining event handler functions in canvasApp()

Following are the event handlers we need to create for each form control. Notice that each
handler updates the variable associated with part of the valid CSS font string and then calls
drawScreen() so that the new text can be painted onto the canvas:

function function textSizeChanged ( e ) {

var

var target = e . target ;
fontSize = target . value ;
drawScreen ();

}

function function textFontChanged ( e ) {

var

var target = e . target ;
fontFace = target . value ;
drawScreen ();

}

function function fontWeightChanged ( e ) {

var

var target = e . target ;
fontWeight = target . value ;
drawScreen ();

}

function function fontStyleChanged ( e ) {

var

var target = e . target ;
fontStyle = target . value ;
drawScreen ();

}

Setting the font in the drawScreen() function

Finally, in the drawScreen() function, we put all of this together to create a valid CSS font
string that we apply to the context.font property:

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