@ -12,33 +12,27 @@ function setFont(ctx, bold, mono) {
ctx . font = font ;
}
function measureWidth( ctx , text , bold , mono ) {
function text( ctx , x , y , text , bold , mono ) {
setFont ( ctx , bold , mono ) ;
return ctx . measureText ( text ) . width ;
ctx . fillText ( text , x , y ) ;
}
function text ( ctx , x , y , text , bold , mono ) {
function text Center ( ctx , x , y , text , bold , mono ) {
setFont ( ctx , bold , mono ) ;
ctx . fillText ( text , x , y ) ;
var w = ctx . measureText ( text ) . width ;
ctx . fillText ( text , x - w / 2 , y ) ;
}
function render ( ) {
var title _str = document . getElementById ( "title" ) . value ;
var line1 _str = document . getElementById ( "line1" ) . value ;
var line2 _str = document . getElementById ( "line2" ) . value ;
var line3 _str = document . getElementById ( "line3" ) . value ;
var line4 _str = document . getElementById ( "line4" ) . value ;
var line5 _str = document . getElementById ( "line5" ) . value ;
var bold1 = document . getElementById ( "bold_line1" ) . checked ;
var bold2 = document . getElementById ( "bold_line2" ) . checked ;
var bold3 = document . getElementById ( "bold_line3" ) . checked ;
var bold4 = document . getElementById ( "bold_line4" ) . checked ;
var bold5 = document . getElementById ( "bold_line5" ) . checked ;
var mono1 = document . getElementById ( "mono_line1" ) . checked ;
var mono2 = document . getElementById ( "mono_line2" ) . checked ;
var mono3 = document . getElementById ( "mono_line3" ) . checked ;
var mono4 = document . getElementById ( "mono_line4" ) . checked ;
var mono5 = document . getElementById ( "mono_line5" ) . checked ;
var line _str = [ ] ;
var bold = [ ] ;
var mono = [ ] ;
for ( var i = 1 ; i <= 5 ; i ++ ) {
line _str [ i ] = document . getElementById ( "line" + i ) . value ;
bold [ i ] = document . getElementById ( "bold_line" + i ) . checked ;
mono [ i ] = document . getElementById ( "mono_line" + i ) . checked ;
}
var confirm _str = document . getElementById ( "confirm" ) . value ;
var canvas = document . getElementById ( 'canvas' ) ;
@ -51,33 +45,19 @@ function render() {
}
text ( ctx , 44 , 35 , title _str , true ) ;
text ( ctx , 14 , 48 + 26 * 1 , line1 _str , bold1 , mono1 ) ;
text ( ctx , 14 , 48 + 26 * 2 , line2 _str , bold2 , mono2 ) ;
text ( ctx , 14 , 48 + 26 * 3 , line3 _str , bold3 , mono3 ) ;
text ( ctx , 14 , 48 + 26 * 4 , line4 _str , bold4 , mono4 ) ;
text ( ctx , 14 , 48 + 26 * 5 , line5 _str , bold5 , mono5 ) ;
var w = measureWidth ( ctx , confirm _str ) ;
text ( ctx , 120 - w / 2 , 215 , confirm _str , true ) ;
for ( var i = 1 ; i <= 5 ; i ++ ) {
text ( ctx , 14 , 48 + 26 * i , line _str [ i ] , bold [ i ] , mono [ i ] ) ;
}
textCenter ( ctx , 120 , 215 , confirm _str , true ) ;
}
window . onload = function ( ) {
document . getElementById ( "title" ) . onkeyup = render ;
document . getElementById ( "line1" ) . onkeyup = render ;
document . getElementById ( "line2" ) . onkeyup = render ;
document . getElementById ( "line3" ) . onkeyup = render ;
document . getElementById ( "line4" ) . onkeyup = render ;
document . getElementById ( "line5" ) . onkeyup = render ;
document . getElementById ( "bold_line1" ) . onclick = render ;
document . getElementById ( "bold_line2" ) . onclick = render ;
document . getElementById ( "bold_line3" ) . onclick = render ;
document . getElementById ( "bold_line4" ) . onclick = render ;
document . getElementById ( "bold_line5" ) . onclick = render ;
document . getElementById ( "mono_line1" ) . onclick = render ;
document . getElementById ( "mono_line2" ) . onclick = render ;
document . getElementById ( "mono_line3" ) . onclick = render ;
document . getElementById ( "mono_line4" ) . onclick = render ;
document . getElementById ( "mono_line5" ) . onclick = render ;
for ( var i = 1 ; i <= 5 ; i ++ ) {
document . getElementById ( "line" + i ) . onkeyup = render ;
document . getElementById ( "bold_line" + i ) . onclick = render ;
document . getElementById ( "mono_line" + i ) . onclick = render ;
}
document . getElementById ( "confirm" ) . onkeyup = render ;
render ( ) ;
}