An HTML5 Canvas At-Bat Box with colour-notation scoring capability for the Internet Baseball Scorecard

This HTML5 Canvas At-Bat Box is three layers. The bottom layer is the outline of the At-bat box and the outfield icon coded in JavaScript in a canvas box. Layer two is a couple of elements: five text boxes and the keyholes that hide their scroll bars; and colour notation boxes equipped with 'span' tagged text areas that allow one to use the Text Background Color pallet in the Blogger Compose Interface - in order to colour code the progress of base-runners around the infield icon diamond. The third layer is a canvas drawing of the infield icon diamond - which is positioned directly over the 'span' boxes in layer two.

The sizes of the Span text areas are regulated by font-size elements for height; and five 'periods' for width (the smallest text character there is).

A background color widget would be nice so I could create properly sized boxes under the infield icon.

The Compose interface does not show any part of the canvas drawings - all that shows before any text background color is added - is the outfield-icon-colour-green, that is preloaded into the upper colour notation boxes so that it matches the outfield icon behind it. Also I have the top text areas (northwest & northeast) set to render a dashed line along the bottom of their extent - so I can see where they are in Compose. Like-wise, in order to indicate the top and bottom borders of the At-Bat Box in Compose, I set the Pitching notation box to render a dashed line along it's right border.

It will work but it doesn't look very good on publish - as you can see. I'll keeping working on it - but at least I can score ball games now.

Blogger is not HTML5 ready - which is a little disappointing, considering they just spent 2 years rebuilding it.

Your browser does not support the HTML5 canvas tag.

.....

.....

.....

.....

RS
RBI

3BH9
#7 2,H

Your browser does not support the HTML5 canvas tag.
]

Here's a screen shot of how what you're reading looks like for me writing it in the Blogger Compose Interface:

Cross-posted at Internet Baseball Scorecard | "At-Bat Box - span TEST"  | http://internetbaseballscorecard2013.blogspot.ca/2014/04/at-bat-box-span-test.html



mh