Динамически генерируемый значок

Можно ли использовать только JavaScript и HTML для динамической генерации значка, используя значок текущей страницы в качестве фона и случайное число на переднем плане?

Например, позволяет скажем, текущий значок выглядит примерно так:

======================
====XXXXXXXXXXXXXX====
====X=================
====X=================
====X=====XXXXXXXX====
====X============X====
====X============X====
====XXXXXXXXXXXXXX====
======================

Если возможно, как мне заставить его выглядеть примерно так, используя только JavaScript и HTML:

======================
====XXXXXXXXXXXXXX====
====X=================
====X=================
====X=====XXXXXXXX====
====X=========--111--=
====X=========--1-1--=
====XXXXXXXXXX----1--=
==============--1111-=

карта:
= : белый фон
x : исходное изображение Favicon
- : сгенерированное красным изображение с номером
1 : белый текст

Идеи:

• Canvas?
• Data Uri's?