Backgrounds | Title & Lines | Numbers & Free-Space | Markers | ||||||||||||
Card-Background:
Keep Outer and Inner Background Colors the Same?:YES NO |
Title & Line Color:
Keep Outer and Inner Line Colors the Same?:YES NO |
Numbers:
Free-Space Toggle:
ON
OFF
|
Marker Color:
Marker Outline Color:
|
Bingo! This was my first truly successful HTML5 Canvas project. You can use this site to play an active game of bingo with a randomly-generated card, or you can turn-on caller mode and call a game of bingo yourself! In addition, you can save the cards to your device for printing/future use/reference.
The controls are fairly straight-forward. Generate a new card at the top; click/tap where you'd like to place a marker; click/tap again to remove it. For subsequent rounds, you can either opt to clear your card of markers or simply generate a new card. Switch to caller mode with the option at the bottom. Saving cards is done via the download option below the canvas. You can also control the inclusion/exclusion (default) of your markers in the download (if applicable). You can also pre-determine a filename for your bingo card if you desire (optional).
USE: Cards may be used/shared/printed in any way you'd like with my only requirement being that they are not modified in any way (the only exception being is resizing). The code itself may NOT be used elsewhere. Thanks!
This project wouldn't have been possible without GoalKicker's guide on HTML5Canvas, especially the idea about using hidden canvases, and downloading the canvas to an image file.