Upgrade to Pro — share decks privately, control downloads, hide ads and more …

2016 計中短期資訊推廣課程 —— 多人線上繪圖板

David Kuo (Davy)
May 22, 2016
Education
0
130

2016 計中短期資訊推廣課程 —— 多人線上繪圖板

http://www.cc.ncu.edu.tw/teach/TrainingCourse2016/

David Kuo (Davy)

May 22, 2016
Tweet

More Decks by David Kuo (Davy)

See All by David Kuo (Davy)
Operator SDK 帶你玩轉 Kubernetes
david50407
0
370
GraphQL 簡介
david50407
0
110
Open Source Software and Culture -- Crystal
david50407
1
200
簡潔優雅的語言 —— Crystal
david50407
0
160
各種工具介紹
david50407
1
95
Crystal
david50407
0
280
Mail Server
david50407
0
88
Git 基礎講座
david50407
0
380
PHP Cookie/Session MySQL 資料庫操作
david50407
1
190

Other Decks in Education

See All in Education
Web 2.0 Patterns and Technologies - Lecture 8 - Web Technologies (1019888BNR)
signer
PRO
0
2.5k
Security, Privacy and Trust - Lecture 11 - Web Technologies (1019888BNR)
signer
PRO
0
2.6k
Chapitre_1_-__L_atmosphère_et_la_vie_-_Partie_1.pdf
bernhardsvt
0
230
HTML5 and the Open Web Platform - Lecture 3 - Web Technologies (1019888BNR)
signer
PRO
1
2.6k
お仕事図鑑pitchトーク
tetsuyaooooo
0
2.3k
HP用_松尾研紹介資料.pdf
matsuolab
0
300
Comment aborder et contribuer sereinement à un projet open source ? (Masterclass Université Toulouse III)
pylapp
0
3.2k
Repaso electricidade e electrónica
irocho
0
210
Adobe Express
matleenalaakso
1
7.6k
20241004_Microsoft認定資格のFundamentals全部取ってみた
ponponmikankan
2
370
Image compression
hachama
0
210
自分にあった読書方法を探索するワークショップ / Reading Catalog Workshop
aki_moon
0
240

Featured

See All Featured
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
17
2.3k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
229
52k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
169
50k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
28
900
Rails Girls Zürich Keynote
gr2m
94
13k
Building a Scalable Design System with Sketch
lauravandoore
460
33k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.7k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
Documentation Writing (for coders)
carmenintech
66
4.5k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
28
2.1k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
BBQ
matthewcrist
85
9.4k

Transcript

  1. 22 05 2016

  2. None
  3. None
  4. None
  5. None
  6. None
  7. None
  8. None
  9. None
  10. None
  11. None
  12. None
  13. None
  14. None
  15. None
  16. None
  17. None
  18. None

  19. <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <span class="navbar-brand"> </span>

    </div> <div class="collapse navbar-collapse"> <p class="navbar-text navbar-right">Author: [email protected]</p> </div> </div> </nav>

  20. <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <span class="navbar-brand"> </span>

    </div> <div class="collapse navbar-collapse"> <p class="navbar-text navbar-right">Author: [email protected]</p> </div> </div> </nav> <nav class="navbar navbar-default"> </nav>

  21. <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <span class="navbar-brand"> </span>

    </div> <div class="collapse navbar-collapse"> <p class="navbar-text navbar-right">Author: [email protected]</p> </div> </div> </nav> <nav class="navbar navbar-default"> </nav>

  22. <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <span class="navbar-brand"> </span>

    </div> <div class="collapse navbar-collapse"> <p class="navbar-text navbar-right">Author: [email protected]</p> </div> </div> </nav> <nav class="navbar navbar-default"> </nav>

  23. <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <span class="navbar-brand"> </span>

    </div> <div class="collapse navbar-collapse"> <p class="navbar-text navbar-right">Author: [email protected]</p> </div> </div> </nav> <nav class="navbar navbar-default"> </nav>

  24. <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <span class="navbar-brand"> </span>

    </div> <div class="collapse navbar-collapse"> <p class="navbar-text navbar-right">Author: [email protected]</p> </div> </div> </nav> <nav class="navbar navbar-default"> </nav> navbar-default navbar-inverse

  25. <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <span class="navbar-brand"> </span>

    </div> <div class="collapse navbar-collapse"> <p class="navbar-text navbar-right">Author: [email protected]</p> </div> </div> </nav> <div class="container-fluid"> </div>

  26. <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <span class="navbar-brand"> </span>

    </div> <div class="collapse navbar-collapse"> <p class="navbar-text navbar-right">Author: [email protected]</p> </div> </div> </nav> <div class="container-fluid"> </div>

  27. <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <span class="navbar-brand"> </span>

    </div> <div class="collapse navbar-collapse"> <p class="navbar-text navbar-right">Author: [email protected]</p> </div> </div> </nav> <div class="container-fluid"> </div>

  28. <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <span class="navbar-brand"> </span>

    </div> <div class="collapse navbar-collapse"> <p class="navbar-text navbar-right">Author: [email protected]</p> </div> </div> </nav> <div class="navbar-header"> <span class="navbar-brand"> </span> </div> <div class="collapse navbar-collapse"> <p class="navbar-text navbar-right">Author: [email protected]</p> </div>

  29. <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <span class="navbar-brand"> </span>

    </div> <div class="collapse navbar-collapse"> <p class="navbar-text navbar-right">Author: [email protected]</p> </div> </div> </nav> <div class="navbar-header"> <span class="navbar-brand"> </span> </div>

  30. <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <span class="navbar-brand"> </span>

    </div> <div class="collapse navbar-collapse"> <p class="navbar-text navbar-right">Author: [email protected]</p> </div> </div> </nav> <div class="navbar-header"> <span class="navbar-brand"> </span> </div>

  31. <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <span class="navbar-brand"> </span>

    </div> <div class="collapse navbar-collapse"> <p class="navbar-text navbar-right">Author: [email protected]</p> </div> </div> </nav> <div class="navbar-header"> <span class="navbar-brand"> </span> </div>

  32. <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <span class="navbar-brand"> </span>

    </div> <div class="collapse navbar-collapse"> <p class="navbar-text navbar-right">Author: [email protected]</p> </div> </div> </nav> <div class="navbar-header"> <span class="navbar-brand"> </span> </div>

  33. <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <span class="navbar-brand"> </span>

    </div> <div class="collapse navbar-collapse"> <p class="navbar-text navbar-right">Author: [email protected]</p> </div> </div> </nav> <div class="navbar-header"> <span class="navbar-brand"> </span> </div>

  34. <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <span class="navbar-brand"> </span>

    </div> <div class="collapse navbar-collapse"> <p class="navbar-text navbar-right">Author: [email protected]</p> </div> </div> </nav> <div class="navbar-header"> <span class="navbar-brand"> </span> </div>

  35. <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <span class="navbar-brand"> </span>

    </div> <div class="collapse navbar-collapse"> <p class="navbar-text navbar-right">Author: [email protected]</p> </div> </div> </nav> <div class="collapse navbar-collapse"> <p class="navbar-text navbar-right">Author: [email protected]</p> </div>

  36. <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <span class="navbar-brand"> </span>

    </div> <div class="collapse navbar-collapse"> <p class="navbar-text navbar-right">Author: [email protected]</p> </div> </div> </nav> <div class="collapse navbar-collapse"> <p class="navbar-text navbar-right">Author: [email protected]</p> </div>

  37. <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <span class="navbar-brand"> </span>

    </div> <div class="collapse navbar-collapse"> <p class="navbar-text navbar-right">Author: [email protected]</p> </div> </div> </nav> <div class="collapse navbar-collapse"> <p class="navbar-text navbar-right">Author: [email protected]</p> </div>

  38. <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <span class="navbar-brand"> </span>

    </div> <div class="collapse navbar-collapse"> <p class="navbar-text navbar-right">Author: [email protected]</p> </div> </div> </nav> <div class="collapse navbar-collapse"> <p class="navbar-text navbar-right">Author: [email protected]</p> </div>

  39. <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <span class="navbar-brand"> </span>

    </div> <div class="collapse navbar-collapse"> <p class="navbar-text navbar-right">Author: [email protected]</p> </div> </div> </nav> <div class="collapse navbar-collapse"> <p class="navbar-text navbar-right">Author: [email protected]</p> </div>

  40. <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <span class="navbar-brand"> </span>

    </div> <div class="collapse navbar-collapse"> <p class="navbar-text navbar-right">Author: [email protected]</p> </div> </div> </nav> <div class="collapse navbar-collapse"> <p class="navbar-text navbar-right">Author: [email protected]</p> </div>

  41. <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <span class="navbar-brand"> </span>

    </div> <div class="collapse navbar-collapse"> <p class="navbar-text navbar-right">Author: [email protected]</p> </div> </div> </nav> <div class="collapse navbar-collapse"> <p class="navbar-text navbar-right">Author: [email protected]</p> </div>
  42. None

  43. <div id="colorbar" class="btn-toolbar" role="toolbar"> <div class="btn-group" role="group"> <button id="current-color" class="btn

    btn-default colorbox" /> </div> <div id="colorholder" class="btn-group" role="group"></div> </div>

  44. <div id="colorbar" class="btn-toolbar" role="toolbar"> <div class="btn-group" role="group"> <button id="current-color" class="btn

    btn-default colorbox" /> </div> <div id="colorholder" class="btn-group" role="group"></div> </div> <div id="colorbar" class="btn-toolbar" role="toolbar"> </div>

  45. <div id="colorbar" class="btn-toolbar" role="toolbar"> <div class="btn-group" role="group"> <button id="current-color" class="btn

    btn-default colorbox" /> </div> <div id="colorholder" class="btn-group" role="group"></div> </div> <div id="colorbar" class="btn-toolbar" role="toolbar"> </div>

  46. <div id="colorbar" class="btn-toolbar" role="toolbar"> <div class="btn-group" role="group"> <button id="current-color" class="btn

    btn-default colorbox" /> </div> <div id="colorholder" class="btn-group" role="group"></div> </div> <div id="colorbar" class="btn-toolbar" role="toolbar"> </div>

  47. <div id="colorbar" class="btn-toolbar" role="toolbar"> <div class="btn-group" role="group"> <button id="current-color" class="btn

    btn-default colorbox" /> </div> <div id="colorholder" class="btn-group" role="group"></div> </div> <div id="colorbar" class="btn-toolbar" role="toolbar"> </div>

  48. <div id="colorbar" class="btn-toolbar" role="toolbar"> <div class="btn-group" role="group"> <button id="current-color" class="btn

    btn-default colorbox" /> </div> <div id="colorholder" class="btn-group" role="group"></div> </div> <div id="colorbar" class="btn-toolbar" role="toolbar"> </div> #colorbar { display: block; text-align: center; margin: 1em; }

  49. <div id="colorbar" class="btn-toolbar" role="toolbar"> <div class="btn-group" role="group"> <button id="current-color" class="btn

    btn-default colorbox" /> </div> <div id="colorholder" class="btn-group" role="group"></div> </div> <div id="colorbar" class="btn-toolbar" role="toolbar"> </div> #colorbar { display: block; text-align: center; margin: 1em; }

  50. <div id="colorbar" class="btn-toolbar" role="toolbar"> <div class="btn-group" role="group"> <button id="current-color" class="btn

    btn-default colorbox" /> </div> <div id="colorholder" class="btn-group" role="group"></div> </div> <div id="colorbar" class="btn-toolbar" role="toolbar"> </div> #colorbar { display: block; text-align: center; margin: 1em; }

  51. <div id="colorbar" class="btn-toolbar" role="toolbar"> <div class="btn-group" role="group"> <button id="current-color" class="btn

    btn-default colorbox" /> </div> <div id="colorholder" class="btn-group" role="group"></div> </div> <div id="colorbar" class="btn-toolbar" role="toolbar"> </div> #colorbar { display: block; text-align: center; margin: 1em; }

  52. <div id="colorbar" class="btn-toolbar" role="toolbar"> <div class="btn-group" role="group"> <button id="current-color" class="btn

    btn-default colorbox" /> </div> <div id="colorholder" class="btn-group" role="group"></div> </div> <div id="colorbar" class="btn-toolbar" role="toolbar"> </div> #colorbar { display: block; text-align: center; margin: 1em; }

  53. <div id="colorbar" class="btn-toolbar" role="toolbar"> <div class="btn-group" role="group"> <button id="current-color" class="btn

    btn-default colorbox" /> </div> <div id="colorholder" class="btn-group" role="group"></div> </div> <div id="colorbar" class="btn-toolbar" role="toolbar"> </div> #colorbar { display: block; text-align: center; margin: 1em; }

  54. <div id="colorbar" class="btn-toolbar" role="toolbar"> <div class="btn-group" role="group"> <button id="current-color" class="btn

    btn-default colorbox" /> </div> <div id="colorholder" class="btn-group" role="group"></div> </div> <div id="colorbar" class="btn-toolbar" role="toolbar"> </div> #colorbar { display: block; text-align: center; margin: 1em; }

  55. <div id="colorbar" class="btn-toolbar" role="toolbar"> <div class="btn-group" role="group"> <button id="current-color" class="btn

    btn-default colorbox" /> </div> <div id="colorholder" class="btn-group" role="group"></div> </div> <div class="btn-group" role="group"> <button id="current-color" class="btn btn-default colorbox" /> </div>

  56. <div id="colorbar" class="btn-toolbar" role="toolbar"> <div class="btn-group" role="group"> <button id="current-color" class="btn

    btn-default colorbox" /> </div> <div id="colorholder" class="btn-group" role="group"></div> </div> <div class="btn-group" role="group"> <button id="current-color" class="btn btn-default colorbox" /> </div>

  57. <div id="colorbar" class="btn-toolbar" role="toolbar"> <div class="btn-group" role="group"> <button id="current-color" class="btn

    btn-default colorbox" /> </div> <div id="colorholder" class="btn-group" role="group"></div> </div> <div class="btn-group" role="group"> <button id="current-color" class="btn btn-default colorbox" /> </div> #colorbar .btn-group { float: none; }

  58. <div id="colorbar" class="btn-toolbar" role="toolbar"> <div class="btn-group" role="group"> <button id="current-color" class="btn

    btn-default colorbox" /> </div> <div id="colorholder" class="btn-group" role="group"></div> </div> <div class="btn-group" role="group"> <button id="current-color" class="btn btn-default colorbox" /> </div> #colorbar .btn-group { float: none; }

  59. <div id="colorbar" class="btn-toolbar" role="toolbar"> <div class="btn-group" role="group"> <button id="current-color" class="btn

    btn-default colorbox" /> </div> <div id="colorholder" class="btn-group" role="group"></div> </div> <div class="btn-group" role="group"> <button id="current-color" class="btn btn-default colorbox" /> </div> #colorbar .btn-group { float: none; }

  60. <div id="colorbar" class="btn-toolbar" role="toolbar"> <div class="btn-group" role="group"> <button id="current-color" class="btn

    btn-default colorbox" /> </div> <div id="colorholder" class="btn-group" role="group"></div> </div> <div class="btn-group" role="group"> <button id="current-color" class="btn btn-default colorbox" /> </div> #colorbar .btn-group { float: none; } .btn-group left

  61. <div id="colorbar" class="btn-toolbar" role="toolbar"> <div class="btn-group" role="group"> <button id="current-color" class="btn

    btn-default colorbox" /> </div> <div id="colorholder" class="btn-group" role="group"></div> </div> <div id="colorbar" class="btn-toolbar" role="toolbar"> <div class="btn-group" role="group"> <button id="current-color" class="btn btn-default colorbox" /> </div> #colorbar .btn-group { float: none; }

  62. <div id="colorbar" class="btn-toolbar" role="toolbar"> <div class="btn-group" role="group"> <button id="current-color" class="btn

    btn-default colorbox" /> </div> <div id="colorholder" class="btn-group" role="group"></div> </div> <div id="colorbar" class="btn-toolbar" role="toolbar"> <div class="btn-group" role="group"> <button id="current-color" class="btn btn-default colorbox" /> </div> #colorbar .btn-group { float: none; }

  63. <div id="colorbar" class="btn-toolbar" role="toolbar"> <div class="btn-group" role="group"> <button id="current-color" class="btn

    btn-default colorbox" /> </div> <div id="colorholder" class="btn-group" role="group"></div> </div> <div id="colorbar" class="btn-toolbar" role="toolbar"> <div class="btn-group" role="group"> <button id="current-color" class="btn btn-default colorbox" /> </div> #colorbar .btn-group { float: none; }

  64. <div id="colorbar" class="btn-toolbar" role="toolbar"> <div class="btn-group" role="group"> <button id="current-color" class="btn

    btn-default colorbox" /> </div> <div id="colorholder" class="btn-group" role="group"></div> </div> <div id="colorbar" class="btn-toolbar" role="toolbar"> <div class="btn-group" role="group"> <button id="current-color" class="btn btn-default colorbox" /> </div> <div id="colorholder" class="btn-group" role="group"></div> #colorbar .btn-group { float: none; }

  65. <div id="colorbar" class="btn-toolbar" role="toolbar"> <div class="btn-group" role="group"> <button id="current-color" class="btn

    btn-default colorbox" /> </div> <div id="colorholder" class="btn-group" role="group"></div> </div> <div class="btn-group" role="group"> <button id="current-color" class="btn btn-default colorbox" /> </div>

  66. <div id="colorbar" class="btn-toolbar" role="toolbar"> <div class="btn-group" role="group"> <button id="current-color" class="btn

    btn-default colorbox" /> </div> <div id="colorholder" class="btn-group" role="group"></div> </div> <div class="btn-group" role="group"> <button id="current-color" class="btn btn-default colorbox" /> </div>

  67. <div id="colorbar" class="btn-toolbar" role="toolbar"> <div class="btn-group" role="group"> <button id="current-color" class="btn

    btn-default colorbox" /> </div> <div id="colorholder" class="btn-group" role="group"></div> </div> <div class="btn-group" role="group"> <button id="current-color" class="btn btn-default colorbox" /> </div> .colorbox { width: 24px; height: 24px; float: none; }

  68. <div id="colorbar" class="btn-toolbar" role="toolbar"> <div class="btn-group" role="group"> <button id="current-color" class="btn

    btn-default colorbox" /> </div> <div id="colorholder" class="btn-group" role="group"></div> </div> <div class="btn-group" role="group"> <button id="current-color" class="btn btn-default colorbox" /> </div> .colorbox { width: 24px; height: 24px; float: none; }

  69. <div id="colorbar" class="btn-toolbar" role="toolbar"> <div class="btn-group" role="group"> <button id="current-color" class="btn

    btn-default colorbox" /> </div> <div id="colorholder" class="btn-group" role="group"></div> </div> <div class="btn-group" role="group"> <button id="current-color" class="btn btn-default colorbox" /> </div> .colorbox { width: 24px; height: 24px; float: none; }

  70. <div id="colorbar" class="btn-toolbar" role="toolbar"> <div class="btn-group" role="group"> <button id="current-color" class="btn

    btn-default colorbox" /> </div> <div id="colorholder" class="btn-group" role="group"></div> </div> <div class="btn-group" role="group"> <button id="current-color" class="btn btn-default colorbox" /> </div> .colorbox { width: 24px; height: 24px; float: none; }

  71. <div id="colorbar" class="btn-toolbar" role="toolbar"> <div class="btn-group" role="group"> <button id="current-color" class="btn

    btn-default colorbox" /> </div> <div id="colorholder" class="btn-group" role="group"></div> </div> <div class="btn-group" role="group"> <button id="current-color" class="btn btn-default colorbox" /> </div> .colorbox { width: 24px; height: 24px; float: none; }

  72. <div id="colorbar" class="btn-toolbar" role="toolbar"> <div class="btn-group" role="group"> <button id="current-color" class="btn

    btn-default colorbox" /> </div> <div id="colorholder" class="btn-group" role="group"></div> </div> <div class="btn-group" role="group"> <button id="current-color" class="btn btn-default colorbox" /> </div> .colorbox { width: 24px; height: 24px; float: none; }

  73. <div id="colorbar" class="btn-toolbar" role="toolbar"> <div class="btn-group" role="group"> <button id="current-color" class="btn

    btn-default colorbox" /> </div> <div id="colorholder" class="btn-group" role="group"></div> </div> <div class="btn-group" role="group"> <button id="current-color" class="btn btn-default colorbox" /> </div> .colorbox { width: 24px; height: 24px; float: none; }

  74. <div id="colorbar" class="btn-toolbar" role="toolbar"> <div class="btn-group" role="group"> <button id="current-color" class="btn

    btn-default colorbox" /> </div> <div id="colorholder" class="btn-group" role="group"></div> </div> <div class="btn-group" role="group"> <button id="current-color" class="btn btn-default colorbox" /> </div> .colorbox { width: 24px; height: 24px; float: none; } .btn left

  75. <div id="colorbar" class="btn-toolbar" role="toolbar"> <div class="btn-group" role="group"> <button id="current-color" class="btn

    btn-default colorbox" /> </div> <div id="colorholder" class="btn-group" role="group"></div> </div> <div id="colorholder" class="btn-group" role="group"></div>

  76. <div id="colorbar" class="btn-toolbar" role="toolbar"> <div class="btn-group" role="group"> <button id="current-color" class="btn

    btn-default colorbox" /> </div> <div id="colorholder" class="btn-group" role="group"></div> </div> <div id="colorholder" class="btn-group" role="group"></div>

  77. <div id="colorbar" class="btn-toolbar" role="toolbar"> <div class="btn-group" role="group"> <button id="current-color" class="btn

    btn-default colorbox" /> </div> <div id="colorholder" class="btn-group" role="group"></div> </div> <div id="colorholder" class="btn-group" role="group"></div>

  78. var currentColor; var setColor = function (color) { currentColor =

    color; $('#current-color').css("background-color", '#' + color); }; setColor("000");

  79. var currentColor; var setColor = function (color) { currentColor =

    color; $('#current-color').css("background-color", '#' + color); }; setColor("000"); var currentColor;

  80. var currentColor; var setColor = function (color) { currentColor =

    color; $('#current-color').css("background-color", '#' + color); }; setColor("000"); var currentColor;

  81. var currentColor; var setColor = function (color) { currentColor =

    color; $('#current-color').css("background-color", '#' + color); }; setColor("000"); var currentColor;

  82. var currentColor; var setColor = function (color) { currentColor =

    color; $('#current-color').css("background-color", '#' + color); }; setColor("000"); var setColor = function (color) { currentColor = color; $('#current-color').css("background-color", '#' + color); };

  83. var currentColor; var setColor = function (color) { currentColor =

    color; $('#current-color').css("background-color", '#' + color); }; setColor("000"); var setColor = function (color) { currentColor = color; $('#current-color').css("background-color", '#' + color); };

  84. var currentColor; var setColor = function (color) { currentColor =

    color; $('#current-color').css("background-color", '#' + color); }; setColor("000"); var setColor = function (color) { currentColor = color; $('#current-color').css("background-color", '#' + color); }; <div class="btn-group" role="group"> <button id="current-color" class="btn btn-default colorbox" /> </div>

  85. var currentColor; var setColor = function (color) { currentColor =

    color; $('#current-color').css("background-color", '#' + color); }; setColor("000"); var setColor = function (color) { currentColor = color; $('#current-color').css("background-color", '#' + color); };

  86. var currentColor; var setColor = function (color) { currentColor =

    color; $('#current-color').css("background-color", '#' + color); }; setColor("000"); var setColor = function (color) { currentColor = color; $('#current-color').css("background-color", '#' + color); }; #000, #FFF

  87. var currentColor; var setColor = function (color) { currentColor =

    color; $('#current-color').css("background-color", '#' + color); }; setColor("000"); setColor("000");

  88. var currentColor; var setColor = function (color) { currentColor =

    color; $('#current-color').css("background-color", '#' + color); }; setColor("000"); setColor("000");

  89. var colors = ["fff", "000", "f00", "0f0", ...]; for (c

    in colors) { var item = $('<button/>') .css("background-color", '#' + colors[c]) .addClass("btn btn-default colorbox"); item.click((function (color) { return function () { setColor(color); }; })(colors[c])); item.appendTo('#colorholder'); }

  90. var colors = ["fff", "000", "f00", "0f0", ...]; for (c

    in colors) { var item = $('<button/>') .css("background-color", '#' + colors[c]) .addClass("btn btn-default colorbox"); item.click((function (color) { return function () { setColor(color); }; })(colors[c])); item.appendTo('#colorholder'); } var colors = ["fff", "000", "f00", "0f0", ...];

  91. var colors = ["fff", "000", "f00", "0f0", ...]; for (c

    in colors) { var item = $('<button/>') .css("background-color", '#' + colors[c]) .addClass("btn btn-default colorbox"); item.click((function (color) { return function () { setColor(color); }; })(colors[c])); item.appendTo('#colorholder'); } var colors = ["fff", "000", "f00", "0f0", ...];

  92. var colors = ["fff", "000", "f00", "0f0", ...]; for (c

    in colors) { var item = $('<button/>') .css("background-color", '#' + colors[c]) .addClass("btn btn-default colorbox"); item.click((function (color) { return function () { setColor(color); }; })(colors[c])); item.appendTo('#colorholder'); } var colors = ["fff", "000", "f00", "0f0", ...];

  93. var colors = ["fff", "000", "f00", "0f0", ...]; for (c

    in colors) { var item = $('<button/>') .css("background-color", '#' + colors[c]) .addClass("btn btn-default colorbox"); item.click((function (color) { return function () { setColor(color); }; })(colors[c])); item.appendTo('#colorholder'); } var colors = ["fff", "000", "f00", "0f0", ...]; #666, #878787

  94. var colors = ["fff", "000", "f00", "0f0", ...]; for (c

    in colors) { var item = $('<button/>') .css("background-color", '#' + colors[c]) .addClass("btn btn-default colorbox"); item.click((function (color) { return function () { setColor(color); }; })(colors[c])); item.appendTo('#colorholder'); } for (c in colors) { var item = $('<button/>') .css("background-color", '#' + colors[c]) .addClass("btn btn-default colorbox"); }

  95. var colors = ["fff", "000", "f00", "0f0", ...]; for (c

    in colors) { var item = $('<button/>') .css("background-color", '#' + colors[c]) .addClass("btn btn-default colorbox"); item.click((function (color) { return function () { setColor(color); }; })(colors[c])); item.appendTo('#colorholder'); } for (c in colors) { var item = $('<button/>') .css("background-color", '#' + colors[c]) .addClass("btn btn-default colorbox"); }

  96. var colors = ["fff", "000", "f00", "0f0", ...]; for (c

    in colors) { var item = $('<button/>') .css("background-color", '#' + colors[c]) .addClass("btn btn-default colorbox"); item.click((function (color) { return function () { setColor(color); }; })(colors[c])); item.appendTo('#colorholder'); } for (c in colors) { var item = $('<button/>') .css("background-color", '#' + colors[c]) .addClass("btn btn-default colorbox"); } colors c

  97. var colors = ["fff", "000", "f00", "0f0", ...]; for (c

    in colors) { var item = $('<button/>') .css("background-color", '#' + colors[c]) .addClass("btn btn-default colorbox"); item.click((function (color) { return function () { setColor(color); }; })(colors[c])); item.appendTo('#colorholder'); } for (c in colors) { var item = $('<button/>') .css("background-color", '#' + colors[c]) .addClass("btn btn-default colorbox"); } colors c for (var i = 0; i < colors.length; i++) { var c = colors[i];

  98. var colors = ["fff", "000", "f00", "0f0", ...]; for (c

    in colors) { var item = $('<button/>') .css("background-color", '#' + colors[c]) .addClass("btn btn-default colorbox"); item.click((function (color) { return function () { setColor(color); }; })(colors[c])); item.appendTo('#colorholder'); } for (c in colors) { var item = $('<button/>') .css("background-color", '#' + colors[c]) .addClass("btn btn-default colorbox"); }

  99. var colors = ["fff", "000", "f00", "0f0", ...]; for (c

    in colors) { var item = $('<button/>') .css("background-color", '#' + colors[c]) .addClass("btn btn-default colorbox"); item.click((function (color) { return function () { setColor(color); }; })(colors[c])); item.appendTo('#colorholder'); } for (c in colors) { var item = $('<button/>') .css("background-color", '#' + colors[c]) .addClass("btn btn-default colorbox"); } button

  100. var colors = ["fff", "000", "f00", "0f0", ...]; for (c

    in colors) { var item = $('<button/>') .css("background-color", '#' + colors[c]) .addClass("btn btn-default colorbox"); item.click((function (color) { return function () { setColor(color); }; })(colors[c])); item.appendTo('#colorholder'); } for (c in colors) { var item = $('<button/>') .css("background-color", '#' + colors[c]) .addClass("btn btn-default colorbox"); }

  101. var colors = ["fff", "000", "f00", "0f0", ...]; for (c

    in colors) { var item = $('<button/>') .css("background-color", '#' + colors[c]) .addClass("btn btn-default colorbox"); item.click((function (color) { return function () { setColor(color); }; })(colors[c])); item.appendTo('#colorholder'); } for (c in colors) { var item = $('<button/>') .css("background-color", '#' + colors[c]) .addClass("btn btn-default colorbox"); }

  102. var colors = ["fff", "000", "f00", "0f0", ...]; for (c

    in colors) { var item = $('<button/>') .css("background-color", '#' + colors[c]) .addClass("btn btn-default colorbox"); item.click((function (color) { return function () { setColor(color); }; })(colors[c])); item.appendTo('#colorholder'); } for (c in colors) { var item = $('<button/>') .css("background-color", '#' + colors[c]) .addClass("btn btn-default colorbox"); }

  103. var colors = ["fff", "000", "f00", "0f0", ...]; for (c

    in colors) { var item = $('<button/>') .css("background-color", '#' + colors[c]) .addClass("btn btn-default colorbox"); item.click((function (color) { return function () { setColor(color); }; })(colors[c])); item.appendTo('#colorholder'); } for (c in colors) { var item = $('<button/>') .css("background-color", '#' + colors[c]) .addClass("btn btn-default colorbox"); } Class

  104. var colors = ["fff", "000", "f00", "0f0", ...]; for (c

    in colors) { var item = $('<button/>') .css("background-color", '#' + colors[c]) .addClass("btn btn-default colorbox"); item.click((function (color) { return function () { setColor(color); }; })(colors[c])); item.appendTo('#colorholder'); } for (c in colors) { var item = $('<button/>') .css("background-color", '#' + colors[c]) .addClass("btn btn-default colorbox"); } Class

  105. var colors = ["fff", "000", "f00", "0f0", ...]; for (c

    in colors) { var item = $('<button/>') .css("background-color", '#' + colors[c]) .addClass("btn btn-default colorbox"); item.click((function (color) { return function () { setColor(color); }; })(colors[c])); item.appendTo('#colorholder'); } for (c in colors) { var item = $('<button/>') .css("background-color", '#' + colors[c]) .addClass("btn btn-default colorbox"); } Class .colorbox { width: 24px; height: 24px; float: none; }

  106. var colors = ["fff", "000", "f00", "0f0", ...]; for (c

    in colors) { var item = $('<button/>') .css("background-color", '#' + colors[c]) .addClass("btn btn-default colorbox"); item.click((function (color) { return function () { setColor(color); }; })(colors[c])); item.appendTo('#colorholder'); } for (c in colors) { item.click((function (color) { return function () { setColor(color); }; })(colors[c])); }

  107. var colors = ["fff", "000", "f00", "0f0", ...]; for (c

    in colors) { var item = $('<button/>') .css("background-color", '#' + colors[c]) .addClass("btn btn-default colorbox"); item.click((function (color) { return function () { setColor(color); }; })(colors[c])); item.appendTo('#colorholder'); } for (c in colors) { item.click((function (color) { return function () { setColor(color); }; })(colors[c])); }

  108. var colors = ["fff", "000", "f00", "0f0", ...]; for (c

    in colors) { var item = $('<button/>') .css("background-color", '#' + colors[c]) .addClass("btn btn-default colorbox"); item.click((function (color) { return function () { setColor(color); }; })(colors[c])); item.appendTo('#colorholder'); } for (c in colors) { item.click((function (color) { return function () { setColor(color); }; })(colors[c])); }

  109. var colors = ["fff", "000", "f00", "0f0", ...]; for (c

    in colors) { var item = $('<button/>') .css("background-color", '#' + colors[c]) .addClass("btn btn-default colorbox"); item.click((function (color) { return function () { setColor(color); }; })(colors[c])); item.appendTo('#colorholder'); } (function (color) { return function () { setColor(color); }; })(colors[c])

  110. var colors = ["fff", "000", "f00", "0f0", ...]; for (c

    in colors) { var item = $('<button/>') .css("background-color", '#' + colors[c]) .addClass("btn btn-default colorbox"); item.click((function (color) { return function () { setColor(color); }; })(colors[c])); item.appendTo('#colorholder'); } (function (color) { })(colors[c])

  111. var colors = ["fff", "000", "f00", "0f0", ...]; for (c

    in colors) { var item = $('<button/>') .css("background-color", '#' + colors[c]) .addClass("btn btn-default colorbox"); item.click((function (color) { return function () { setColor(color); }; })(colors[c])); item.appendTo('#colorholder'); } (function (color) { })(colors[c])

  112. var colors = ["fff", "000", "f00", "0f0", ...]; for (c

    in colors) { var item = $('<button/>') .css("background-color", '#' + colors[c]) .addClass("btn btn-default colorbox"); item.click((function (color) { return function () { setColor(color); }; })(colors[c])); item.appendTo('#colorholder'); } (function (color) { })(colors[c])

  113. var colors = ["fff", "000", "f00", "0f0", ...]; for (c

    in colors) { var item = $('<button/>') .css("background-color", '#' + colors[c]) .addClass("btn btn-default colorbox"); item.click((function (color) { return function () { setColor(color); }; })(colors[c])); item.appendTo('#colorholder'); } (function (color) { })(colors[c]) c

  114. var a = 100; var myFunc = function () {

    console.log(a); }; a = 200; myFunc();

  115. var a = 100; var myFunc = function () {

    console.log(a); }; a = 200; myFunc();

  116. var a = 100; var myFunc = function () {

    console.log(a); }; a = 200; myFunc(); 200

  117. var a = 100; var myFunc = function () {

    console.log(a); }; a = 200; myFunc(); 200

  118. var a = 100; var myFunc = function () {

    console.log(a); }; a = 200; myFunc(); 200

  119. var a = 100; var myFunc = function () {

    console.log(a); }; a = 200; myFunc(); 200

  120. var a = 100; var myFunc = function () {

    console.log(a); }; a = 200; myFunc(); 200

  121. var a = 100; var myFunc = (function (x) {

    return function () { console.log(x); }; })(a); a = 200; myFunc();

  122. var a = 100; var myFunc = (function (x) {

    return function () { console.log(x); }; })(a); a = 200; myFunc();

  123. var a = 100; var myFunc = (function (x) {

    return function () { console.log(x); }; })(a); a = 200; myFunc(); 100

  124. var a = 100; var myFunc = (function (x) {

    return function () { console.log(x); }; })(a); a = 200; myFunc(); function (x) { }

  125. var a = 100; var myFunc = (function (x) {

    return function () { console.log(x); }; })(a); a = 200; myFunc(); function (x) { }

  126. var a = 100; var myFunc = (function (x) {

    return function () { console.log(x); }; })(a); a = 200; myFunc(); function (x) { }

  127. var a = 100; var myFunc = (function (x) {

    return function () { console.log(x); }; })(a); a = 200; myFunc(); (function (x) { })(a);

  128. var a = 100; var myFunc = (function (x) {

    return function () { console.log(x); }; })(a); a = 200; myFunc(); (function (x) { })(a);

  129. var a = 100; var myFunc = (function (x) {

    return function () { console.log(x); }; })(a); a = 200; myFunc(); (function (x) { })(a);

  130. var a = 100; var myFunc = (function (x) {

    return function () { console.log(x); }; })(a); a = 200; myFunc(); (function (x) { })(a);

  131. var a = 100; var myFunc = (function (x) {

    return function () { console.log(x); }; })(a); a = 200; myFunc(); var a = 100; (function (x) { })(a);

  132. var a = 100; var myFunc = (function (x) {

    return function () { console.log(x); }; })(a); a = 200; myFunc(); var a = 100; (function (x) { })(a);

  133. var a = 100; var myFunc = (function (x) {

    return function () { console.log(x); }; })(a); a = 200; myFunc(); var a = 100; (function (x) { })(a);

  134. var a = 100; var myFunc = (function (x) {

    return function () { console.log(x); }; })(a); a = 200; myFunc(); var a = 100; (function (x) { })(a);

  135. var a = 100; var myFunc = (function (x) {

    return function () { console.log(x); }; })(a); a = 200; myFunc(); var a = 100; (function (x) { console.log(x); })(a);

  136. var a = 100; var myFunc = (function (x) {

    return function () { console.log(x); }; })(a); a = 200; myFunc(); var a = 100; (function (x) { console.log(x); })(a);

  137. var a = 100; var myFunc = (function (x) {

    return function () { console.log(x); }; })(a); a = 200; myFunc(); var a = 100; (function (x) { console.log(x); })(a);

  138. var a = 100; var myFunc = (function (x) {

    return function () { console.log(x); }; })(a); a = 200; myFunc(); var myFunc = (function (x) { return function () { console.log(x); }; })(a);

  139. var a = 100; var myFunc = (function (x) {

    return function () { console.log(x); }; })(a); a = 200; myFunc(); var myFunc = (function (x) { return function () { console.log(x); }; })(a);

  140. var a = 100; var myFunc = (function (x) {

    return function () { console.log(x); }; })(a); a = 200; myFunc(); var myFunc = (function (x) { return function () { console.log(x); }; })(a);

  141. var colors = ["fff", "000", "f00", "0f0", ...]; for (c

    in colors) { var item = $('<button/>') .css("background-color", '#' + colors[c]) .addClass("btn btn-default colorbox"); item.click((function (color) { return function () { setColor(color); }; })(colors[c])); item.appendTo('#colorholder'); } (function (color) { })(colors[c]) c

  142. var colors = ["fff", "000", "f00", "0f0", ...]; for (c

    in colors) { var item = $('<button/>') .css("background-color", '#' + colors[c]) .addClass("btn btn-default colorbox"); item.click((function (color) { return function () { setColor(color); }; })(colors[c])); item.appendTo('#colorholder'); } for (c in colors) { item.click((function (color) { return function () { setColor(color); }; })(colors[c])); }

  143. var colors = ["fff", "000", "f00", "0f0", ...]; for (c

    in colors) { var item = $('<button/>') .css("background-color", '#' + colors[c]) .addClass("btn btn-default colorbox"); item.click((function (color) { return function () { setColor(color); }; })(colors[c])); item.appendTo('#colorholder'); } for (c in colors) { item.click((function (color) { return function () { setColor(color); }; })(colors[c])); }

  144. var colors = ["fff", "000", "f00", "0f0", ...]; for (c

    in colors) { var item = $('<button/>') .css("background-color", '#' + colors[c]) .addClass("btn btn-default colorbox"); item.click((function (color) { return function () { setColor(color); }; })(colors[c])); item.appendTo('#colorholder'); } for (c in colors) { item.click((function (color) { return function () { setColor(color); }; })(colors[c])); }

  145. var colors = ["fff", "000", "f00", "0f0", ...]; for (c

    in colors) { var item = $('<button/>') .css("background-color", '#' + colors[c]) .addClass("btn btn-default colorbox"); item.click((function (color) { return function () { setColor(color); }; })(colors[c])); item.appendTo('#colorholder'); } for (c in colors) { item.appendTo('#colorholder'); }

  146. var colors = ["fff", "000", "f00", "0f0", ...]; for (c

    in colors) { var item = $('<button/>') .css("background-color", '#' + colors[c]) .addClass("btn btn-default colorbox"); item.click((function (color) { return function () { setColor(color); }; })(colors[c])); item.appendTo('#colorholder'); } for (c in colors) { item.appendTo('#colorholder'); }

  147. var colors = ["fff", "000", "f00", "0f0", ...]; for (c

    in colors) { var item = $('<button/>') .css("background-color", '#' + colors[c]) .addClass("btn btn-default colorbox"); item.click((function (color) { return function () { setColor(color); }; })(colors[c])); item.appendTo('#colorholder'); } for (c in colors) { item.appendTo('#colorholder'); } #colorholder

  148. var colors = ["fff", "000", "f00", "0f0", ...]; for (c

    in colors) { var item = $('<button/>') .css("background-color", '#' + colors[c]) .addClass("btn btn-default colorbox"); item.click((function (color) { return function () { setColor(color); }; })(colors[c])); item.appendTo('#colorholder'); } for (c in colors) { item.appendTo('#colorholder'); } #colorholder <div id="colorholder" class="btn-group" role="group"></div>
  149. None

  150. <div class="panel panel-default canvas-container"> <canvas width="480" height="480"></canvas> </div>

  151. <div class="panel panel-default canvas-container"> <canvas width="480" height="480"></canvas> </div>

  152. <div class="panel panel-default canvas-container"> <canvas width="480" height="480"></canvas> </div>

  153. <div class="panel panel-default canvas-container"> <canvas width="480" height="480"></canvas> </div> .canvas-container {

    width: 482px; margin: 0 auto; line-height: 0.6; overflow: hidden; }

  154. <div class="panel panel-default canvas-container"> <canvas width="480" height="480"></canvas> </div> .canvas-container {

    width: 482px; margin: 0 auto; line-height: 0.6; overflow: hidden; }

  155. <div class="panel panel-default canvas-container"> <canvas width="480" height="480"></canvas> </div> .canvas-container {

    width: 482px; margin: 0 auto; line-height: 0.6; overflow: hidden; }

  156. <div class="panel panel-default canvas-container"> <canvas width="480" height="480"></canvas> </div> .canvas-container {

    width: 482px; margin: 0 auto; line-height: 0.6; overflow: hidden; } 1 + 480 + 1 ( )

  157. <div class="panel panel-default canvas-container"> <canvas width="480" height="480"></canvas> </div> .canvas-container {

    width: 482px; margin: 0 auto; line-height: 0.6; overflow: hidden; }

  158. <div class="panel panel-default canvas-container"> <canvas width="480" height="480"></canvas> </div> .canvas-container {

    width: 482px; margin: 0 auto; line-height: 0.6; overflow: hidden; }

  159. <div class="panel panel-default canvas-container"> <canvas width="480" height="480"></canvas> </div> .canvas-container {

    width: 482px; margin: 0 auto; line-height: 0.6; overflow: hidden; }

  160. <div class="panel panel-default canvas-container"> <canvas width="480" height="480"></canvas> </div> .canvas-container {

    width: 482px; margin: 0 auto; line-height: 0.6; overflow: hidden; } panel 1.2

  161. <div class="panel panel-default canvas-container"> <canvas width="480" height="480"></canvas> </div> .canvas-container {

    width: 482px; margin: 0 auto; line-height: 0.6; overflow: hidden; }

  162. <div class="panel panel-default canvas-container"> <canvas width="480" height="480"></canvas> </div> .canvas-container {

    width: 482px; margin: 0 auto; line-height: 0.6; overflow: hidden; }

  163. <div class="panel panel-default canvas-container"> <canvas width="480" height="480"></canvas> </div>

  164. <div class="panel panel-default canvas-container"> <canvas width="480" height="480"></canvas> </div>

  165. <div class="panel panel-default canvas-container"> <canvas width="480" height="480"></canvas> </div>

  166. <div class="panel panel-default canvas-container"> <canvas width="480" height="480"></canvas> </div>

  167. <div class="panel panel-default canvas-container"> <canvas width="480" height="480"></canvas> </div>

  168. var myCanvas = $('.canvas-container canvas')[0]; var myContext = myCanvas.getContext ?

    myCanvas.getContext('2d') : null; if (myContext == null) { alert("Must use a browser that supports HTML5 Canvas."); return; }

  169. var myCanvas = $('.canvas-container canvas')[0]; var myContext = myCanvas.getContext ?

    myCanvas.getContext('2d') : null; if (myContext == null) { alert("Must use a browser that supports HTML5 Canvas."); return; } var myCanvas = $('.canvas-container canvas')[0];

  170. var myCanvas = $('.canvas-container canvas')[0]; var myContext = myCanvas.getContext ?

    myCanvas.getContext('2d') : null; if (myContext == null) { alert("Must use a browser that supports HTML5 Canvas."); return; } var myCanvas = $('.canvas-container canvas')[0];

  171. var myCanvas = $('.canvas-container canvas')[0]; var myContext = myCanvas.getContext ?

    myCanvas.getContext('2d') : null; if (myContext == null) { alert("Must use a browser that supports HTML5 Canvas."); return; } var myCanvas = $('.canvas-container canvas')[0]; canvas

  172. var myCanvas = $('.canvas-container canvas')[0]; var myContext = myCanvas.getContext ?

    myCanvas.getContext('2d') : null; if (myContext == null) { alert("Must use a browser that supports HTML5 Canvas."); return; } var myContext = myCanvas.getContext ? myCanvas.getContext('2d') : null;

  173. var myCanvas = $('.canvas-container canvas')[0]; var myContext = myCanvas.getContext ?

    myCanvas.getContext('2d') : null; if (myContext == null) { alert("Must use a browser that supports HTML5 Canvas."); return; } var myContext = myCanvas.getContext ? myCanvas.getContext('2d') : null;

  174. var myCanvas = $('.canvas-container canvas')[0]; var myContext = myCanvas.getContext ?

    myCanvas.getContext('2d') : null; if (myContext == null) { alert("Must use a browser that supports HTML5 Canvas."); return; } var myContext = myCanvas.getContext ? myCanvas.getContext('2d') : null;

  175. var myCanvas = $('.canvas-container canvas')[0]; var myContext = myCanvas.getContext ?

    myCanvas.getContext('2d') : null; if (myContext == null) { alert("Must use a browser that supports HTML5 Canvas."); return; } var myContext = myCanvas.getContext ? myCanvas.getContext('2d') : null;

  176. var myCanvas = $('.canvas-container canvas')[0]; var myContext = myCanvas.getContext ?

    myCanvas.getContext('2d') : null; if (myContext == null) { alert("Must use a browser that supports HTML5 Canvas."); return; } var myContext = myCanvas.getContext ? myCanvas.getContext('2d') : null;

  177. var myCanvas = $('.canvas-container canvas')[0]; var myContext = myCanvas.getContext ?

    myCanvas.getContext('2d') : null; if (myContext == null) { alert("Must use a browser that supports HTML5 Canvas."); return; } var myContext = myCanvas.getContext ? myCanvas.getContext('2d') : null;

  178. var myCanvas = $('.canvas-container canvas')[0]; var myContext = myCanvas.getContext ?

    myCanvas.getContext('2d') : null; if (myContext == null) { alert("Must use a browser that supports HTML5 Canvas."); return; } if (myContext == null) { alert("Must use a browser that supports HTML5 Canvas."); return; }

  179. var myCanvas = $('.canvas-container canvas')[0]; var myContext = myCanvas.getContext ?

    myCanvas.getContext('2d') : null; if (myContext == null) { alert("Must use a browser that supports HTML5 Canvas."); return; } if (myContext == null) { alert("Must use a browser that supports HTML5 Canvas."); return; }

  180. var myCanvas = $('.canvas-container canvas')[0]; var myContext = myCanvas.getContext ?

    myCanvas.getContext('2d') : null; if (myContext == null) { alert("Must use a browser that supports HTML5 Canvas."); return; } if (myContext == null) { alert("Must use a browser that supports HTML5 Canvas."); return; }

  181. var myCanvas = $('.canvas-container canvas')[0]; var myContext = myCanvas.getContext ?

    myCanvas.getContext('2d') : null; if (myContext == null) { alert("Must use a browser that supports HTML5 Canvas."); return; } if (myContext == null) { alert("Must use a browser that supports HTML5 Canvas."); return; }

  182. var myCanvas = $('.canvas-container canvas')[0]; var myContext = myCanvas.getContext ?

    myCanvas.getContext('2d') : null; if (myContext == null) { alert("Must use a browser that supports HTML5 Canvas."); return; } if (myContext == null) { alert("Must use a browser that supports HTML5 Canvas."); return; }

  183. var mouseDown = false, lastPoint = null; myCanvas.onmousedown = function

    () { mouseDown = true; }; myCanvas.onmouseout = myCanvas.onmouseup = function () { mouseDown = false; lastPoint = null; };

  184. var mouseDown = false, lastPoint = null; myCanvas.onmousedown = function

    () { mouseDown = true; }; myCanvas.onmouseout = myCanvas.onmouseup = function () { mouseDown = false; lastPoint = null; }; var mouseDown = false, lastPoint = null;

  185. var mouseDown = false, lastPoint = null; myCanvas.onmousedown = function

    () { mouseDown = true; }; myCanvas.onmouseout = myCanvas.onmouseup = function () { mouseDown = false; lastPoint = null; }; var mouseDown = false, lastPoint = null;

  186. var mouseDown = false, lastPoint = null; myCanvas.onmousedown = function

    () { mouseDown = true; }; myCanvas.onmouseout = myCanvas.onmouseup = function () { mouseDown = false; lastPoint = null; }; var mouseDown = false, lastPoint = null;

  187. var mouseDown = false, lastPoint = null; myCanvas.onmousedown = function

    () { mouseDown = true; }; myCanvas.onmouseout = myCanvas.onmouseup = function () { mouseDown = false; lastPoint = null; }; var mouseDown = false, lastPoint = null;

  188. var mouseDown = false, lastPoint = null; myCanvas.onmousedown = function

    () { mouseDown = true; }; myCanvas.onmouseout = myCanvas.onmouseup = function () { mouseDown = false; lastPoint = null; }; var mouseDown = false, lastPoint = null;

  189. var mouseDown = false, lastPoint = null; myCanvas.onmousedown = function

    () { mouseDown = true; }; myCanvas.onmouseout = myCanvas.onmouseup = function () { mouseDown = false; lastPoint = null; }; var mouseDown = false, lastPoint = null;

  190. var mouseDown = false, lastPoint = null; myCanvas.onmousedown = function

    () { mouseDown = true; }; myCanvas.onmouseout = myCanvas.onmouseup = function () { mouseDown = false; lastPoint = null; }; var mouseDown = false, lastPoint = null;

  191. var mouseDown = false, lastPoint = null; myCanvas.onmousedown = function

    () { mouseDown = true; }; myCanvas.onmouseout = myCanvas.onmouseup = function () { mouseDown = false; lastPoint = null; }; var mouseDown = false, lastPoint = null;

  192. var mouseDown = false, lastPoint = null; myCanvas.onmousedown = function

    () { mouseDown = true; }; myCanvas.onmouseout = myCanvas.onmouseup = function () { mouseDown = false; lastPoint = null; }; var mouseDown = false, lastPoint = null;

  193. var mouseDown = false, lastPoint = null; myCanvas.onmousedown = function

    () { mouseDown = true; }; myCanvas.onmouseout = myCanvas.onmouseup = function () { mouseDown = false; lastPoint = null; }; myCanvas.onmousedown = function () { mouseDown = true; };

  194. var mouseDown = false, lastPoint = null; myCanvas.onmousedown = function

    () { mouseDown = true; }; myCanvas.onmouseout = myCanvas.onmouseup = function () { mouseDown = false; lastPoint = null; }; myCanvas.onmousedown = function () { mouseDown = true; };

  195. var mouseDown = false, lastPoint = null; myCanvas.onmousedown = function

    () { mouseDown = true; }; myCanvas.onmouseout = myCanvas.onmouseup = function () { mouseDown = false; lastPoint = null; }; myCanvas.onmousedown = function () { mouseDown = true; };

  196. var mouseDown = false, lastPoint = null; myCanvas.onmousedown = function

    () { mouseDown = true; }; myCanvas.onmouseout = myCanvas.onmouseup = function () { mouseDown = false; lastPoint = null; }; myCanvas.onmousedown = function () { mouseDown = true; };

  197. var mouseDown = false, lastPoint = null; myCanvas.onmousedown = function

    () { mouseDown = true; }; myCanvas.onmouseout = myCanvas.onmouseup = function () { mouseDown = false; lastPoint = null; }; myCanvas.onmousedown = function () { mouseDown = true; };

  198. var mouseDown = false, lastPoint = null; myCanvas.onmousedown = function

    () { mouseDown = true; }; myCanvas.onmouseout = myCanvas.onmouseup = function () { mouseDown = false; lastPoint = null; }; myCanvas.onmouseout = myCanvas.onmouseup = function () { mouseDown = false; lastPoint = null; };

  199. var mouseDown = false, lastPoint = null; myCanvas.onmousedown = function

    () { mouseDown = true; }; myCanvas.onmouseout = myCanvas.onmouseup = function () { mouseDown = false; lastPoint = null; }; myCanvas.onmouseout = myCanvas.onmouseup = function () { mouseDown = false; lastPoint = null; };

  200. var mouseDown = false, lastPoint = null; myCanvas.onmousedown = function

    () { mouseDown = true; }; myCanvas.onmouseout = myCanvas.onmouseup = function () { mouseDown = false; lastPoint = null; }; myCanvas.onmouseout = myCanvas.onmouseup = function () { mouseDown = false; lastPoint = null; };

  201. var mouseDown = false, lastPoint = null; myCanvas.onmousedown = function

    () { mouseDown = true; }; myCanvas.onmouseout = myCanvas.onmouseup = function () { mouseDown = false; lastPoint = null; }; myCanvas.onmouseout = myCanvas.onmouseup = function () { mouseDown = false; lastPoint = null; };

  202. var mouseDown = false, lastPoint = null; myCanvas.onmousedown = function

    () { mouseDown = true; }; myCanvas.onmouseout = myCanvas.onmouseup = function () { mouseDown = false; lastPoint = null; }; myCanvas.onmouseout = myCanvas.onmouseup = function () { mouseDown = false; lastPoint = null; };

  203. var mouseDown = false, lastPoint = null; myCanvas.onmousedown = function

    () { mouseDown = true; }; myCanvas.onmouseout = myCanvas.onmouseup = function () { mouseDown = false; lastPoint = null; }; myCanvas.onmouseout = myCanvas.onmouseup = function () { mouseDown = false; lastPoint = null; };

  204. var mouseDown = false, lastPoint = null; myCanvas.onmousedown = function

    () { mouseDown = true; }; myCanvas.onmouseout = myCanvas.onmouseup = function () { mouseDown = false; lastPoint = null; }; myCanvas.onmouseout = myCanvas.onmouseup = function () { mouseDown = false; lastPoint = null; };

  205. var mouseDown = false, lastPoint = null; myCanvas.onmousedown = function

    () { mouseDown = true; }; myCanvas.onmouseout = myCanvas.onmouseup = function () { mouseDown = false; lastPoint = null; }; myCanvas.onmouseout = myCanvas.onmouseup = function () { mouseDown = false; lastPoint = null; };

  206. var mouseDown = false, lastPoint = null; myCanvas.onmousedown = function

    () { mouseDown = true; }; myCanvas.onmouseout = myCanvas.onmouseup = function () { mouseDown = false; lastPoint = null; }; myCanvas.onmouseout = myCanvas.onmouseup = function () { mouseDown = false; lastPoint = null; };

  207. var drawLineOnMouseMove = function (e) { if (!mouseDown) return; e.preventDefault();

    ... }; $(myCanvas).mousemove(drawLineOnMouseMove); $(myCanvas).mousedown(drawLineOnMouseMove);

  208. var drawLineOnMouseMove = function (e) { if (!mouseDown) return; e.preventDefault();

    ... }; $(myCanvas).mousemove(drawLineOnMouseMove); $(myCanvas).mousedown(drawLineOnMouseMove); var drawLineOnMouseMove = function (e) { };

  209. var drawLineOnMouseMove = function (e) { if (!mouseDown) return; e.preventDefault();

    ... }; $(myCanvas).mousemove(drawLineOnMouseMove); $(myCanvas).mousedown(drawLineOnMouseMove); var drawLineOnMouseMove = function (e) { };

  210. var drawLineOnMouseMove = function (e) { if (!mouseDown) return; e.preventDefault();

    ... }; $(myCanvas).mousemove(drawLineOnMouseMove); $(myCanvas).mousedown(drawLineOnMouseMove); var drawLineOnMouseMove = function (e) { };

  211. var drawLineOnMouseMove = function (e) { if (!mouseDown) return; e.preventDefault();

    ... }; $(myCanvas).mousemove(drawLineOnMouseMove); $(myCanvas).mousedown(drawLineOnMouseMove); var drawLineOnMouseMove = function (e) { };

  212. var drawLineOnMouseMove = function (e) { if (!mouseDown) return; e.preventDefault();

    ... }; $(myCanvas).mousemove(drawLineOnMouseMove); $(myCanvas).mousedown(drawLineOnMouseMove); var drawLineOnMouseMove = function (e) { };

  213. var drawLineOnMouseMove = function (e) { if (!mouseDown) return; e.preventDefault();

    ... }; $(myCanvas).mousemove(drawLineOnMouseMove); $(myCanvas).mousedown(drawLineOnMouseMove); $(myCanvas).mousemove(drawLineOnMouseMove); $(myCanvas).mousedown(drawLineOnMouseMove);

  214. var drawLineOnMouseMove = function (e) { if (!mouseDown) return; e.preventDefault();

    ... }; $(myCanvas).mousemove(drawLineOnMouseMove); $(myCanvas).mousedown(drawLineOnMouseMove); $(myCanvas).mousemove(drawLineOnMouseMove); $(myCanvas).mousedown(drawLineOnMouseMove);

  215. var drawLineOnMouseMove = function (e) { if (!mouseDown) return; e.preventDefault();

    ... }; $(myCanvas).mousemove(drawLineOnMouseMove); $(myCanvas).mousedown(drawLineOnMouseMove); $(myCanvas).mousemove(drawLineOnMouseMove); $(myCanvas).mousedown(drawLineOnMouseMove);

  216. var drawLineOnMouseMove = function (e) { if (!mouseDown) return; e.preventDefault();

    ... }; $(myCanvas).mousemove(drawLineOnMouseMove); $(myCanvas).mousedown(drawLineOnMouseMove); $(myCanvas).mousemove(drawLineOnMouseMove); $(myCanvas).mousedown(drawLineOnMouseMove);

  217. var drawLineOnMouseMove = function (e) { if (!mouseDown) return; e.preventDefault();

    ... }; $(myCanvas).mousemove(drawLineOnMouseMove); $(myCanvas).mousedown(drawLineOnMouseMove); $(myCanvas).mousemove(drawLineOnMouseMove); $(myCanvas).mousedown(drawLineOnMouseMove);

  218. var drawLineOnMouseMove = function (e) { if (!mouseDown) return; e.preventDefault();

    ... }; $(myCanvas).mousemove(drawLineOnMouseMove); $(myCanvas).mousedown(drawLineOnMouseMove); $(myCanvas).mousemove(drawLineOnMouseMove); $(myCanvas).mousedown(drawLineOnMouseMove);

  219. var drawLineOnMouseMove = function (e) { if (!mouseDown) return; e.preventDefault();

    ... }; $(myCanvas).mousemove(drawLineOnMouseMove); $(myCanvas).mousedown(drawLineOnMouseMove); $(myCanvas).mousemove(drawLineOnMouseMove); $(myCanvas).mousedown(drawLineOnMouseMove);

  220. var drawLineOnMouseMove = function (e) { if (!mouseDown) return; e.preventDefault();

    ... }; $(myCanvas).mousemove(drawLineOnMouseMove); $(myCanvas).mousedown(drawLineOnMouseMove); var drawLineOnMouseMove = function (e) { }; $(myCanvas).mousemove(drawLineOnMouseMove); $(myCanvas).mousedown(drawLineOnMouseMove);

  221. var drawLineOnMouseMove = function (e) { if (!mouseDown) return; e.preventDefault();

    ... }; $(myCanvas).mousemove(drawLineOnMouseMove); $(myCanvas).mousedown(drawLineOnMouseMove); var drawLineOnMouseMove = function (e) { }; $(myCanvas).mousemove(drawLineOnMouseMove); $(myCanvas).mousedown(drawLineOnMouseMove);

  222. var drawLineOnMouseMove = function (e) { if (!mouseDown) return; e.preventDefault();

    ... }; $(myCanvas).mousemove(drawLineOnMouseMove); $(myCanvas).mousedown(drawLineOnMouseMove); var drawLineOnMouseMove = function (e) { if (!mouseDown) return; e.preventDefault(); ... };

  223. var drawLineOnMouseMove = function (e) { if (!mouseDown) return; e.preventDefault();

    ... }; $(myCanvas).mousemove(drawLineOnMouseMove); $(myCanvas).mousedown(drawLineOnMouseMove); if (!mouseDown) return; e.preventDefault();

  224. var drawLineOnMouseMove = function (e) { if (!mouseDown) return; e.preventDefault();

    ... }; $(myCanvas).mousemove(drawLineOnMouseMove); $(myCanvas).mousedown(drawLineOnMouseMove); if (!mouseDown) return; e.preventDefault();

  225. var drawLineOnMouseMove = function (e) { if (!mouseDown) return; e.preventDefault();

    ... }; $(myCanvas).mousemove(drawLineOnMouseMove); $(myCanvas).mousedown(drawLineOnMouseMove); if (!mouseDown) return; e.preventDefault();

  226. var drawLineOnMouseMove = function (e) { if (!mouseDown) return; e.preventDefault();

    ... }; $(myCanvas).mousemove(drawLineOnMouseMove); $(myCanvas).mousedown(drawLineOnMouseMove); if (!mouseDown) return; e.preventDefault();

  227. var drawLineOnMouseMove = function (e) { if (!mouseDown) return; e.preventDefault();

    ... }; $(myCanvas).mousemove(drawLineOnMouseMove); $(myCanvas).mousedown(drawLineOnMouseMove); if (!mouseDown) return; e.preventDefault();

  228. var drawLineOnMouseMove = function (e) { if (!mouseDown) return; e.preventDefault();

    ... }; $(myCanvas).mousemove(drawLineOnMouseMove); $(myCanvas).mousedown(drawLineOnMouseMove); if (!mouseDown) return; e.preventDefault();

  229. var drawLineOnMouseMove = function (e) { if (!mouseDown) return; e.preventDefault();

    ... }; $(myCanvas).mousemove(drawLineOnMouseMove); $(myCanvas).mousedown(drawLineOnMouseMove); if (!mouseDown) return; e.preventDefault();

  230. var drawLineOnMouseMove = function (e) { if (!mouseDown) return; e.preventDefault();

    ... }; $(myCanvas).mousemove(drawLineOnMouseMove); $(myCanvas).mousedown(drawLineOnMouseMove); ...

  231. var drawLineOnMouseMove = function (e) { if (!mouseDown) return; e.preventDefault();

    ... }; $(myCanvas).mousemove(drawLineOnMouseMove); $(myCanvas).mousedown(drawLineOnMouseMove); ...

  232. var drawLineOnMouseMove = function (e) { if (!mouseDown) return; e.preventDefault();

    ... }; $(myCanvas).mousemove(drawLineOnMouseMove); $(myCanvas).mousedown(drawLineOnMouseMove); ...
  233. None
  234. None
  235. None
  236. None

  237. var drawLineOnMouseMove = function (e) { if (!mouseDown) return; e.preventDefault();

    ... }; $(myCanvas).mousemove(drawLineOnMouseMove); $(myCanvas).mousedown(drawLineOnMouseMove); var drawLineOnMouseMove = function (e) { ... };

  238. var offset = $('canvas').offset(); var x1 = Math.floor((e.pageX - offset.left)

    / pixSize - 0.1), y1 = Math.floor((e.pageY - offset.top) / pixSize - 0.1); var x0 = (lastPoint == null) ? x1 : lastPoint[0], y0 = (lastPoint == null) ? y1 : lastPoint[1]; var dx = Math.abs(x1 - x0), dy = Math.abs(y1 - y0); var sx = (x0 < x1) ? 1 : -1, sy = (y0 < y1) ? 1 : -1, err = dx - dy; ...

  239. var offset = $('canvas').offset(); var x1 = Math.floor((e.pageX - offset.left)

    / pixSize - 0.1), y1 = Math.floor((e.pageY - offset.top) / pixSize - 0.1); var x0 = (lastPoint == null) ? x1 : lastPoint[0], y0 = (lastPoint == null) ? y1 : lastPoint[1]; var dx = Math.abs(x1 - x0), dy = Math.abs(y1 - y0); var sx = (x0 < x1) ? 1 : -1, sy = (y0 < y1) ? 1 : -1, err = dx - dy; ... var x0 = (lastPoint == null) ? x1 : lastPoint[0], y0 = (lastPoint == null) ? y1 : lastPoint[1]; ...

  240. var offset = $('canvas').offset(); var x1 = Math.floor((e.pageX - offset.left)

    / pixSize - 0.1), y1 = Math.floor((e.pageY - offset.top) / pixSize - 0.1); var x0 = (lastPoint == null) ? x1 : lastPoint[0], y0 = (lastPoint == null) ? y1 : lastPoint[1]; var dx = Math.abs(x1 - x0), dy = Math.abs(y1 - y0); var sx = (x0 < x1) ? 1 : -1, sy = (y0 < y1) ? 1 : -1, err = dx - dy; ... var x0 = (lastPoint == null) ? x1 : lastPoint[0], y0 = (lastPoint == null) ? y1 : lastPoint[1]; ...

  241. var offset = $('canvas').offset(); var x1 = Math.floor((e.pageX - offset.left)

    / pixSize - 0.1), y1 = Math.floor((e.pageY - offset.top) / pixSize - 0.1); var x0 = (lastPoint == null) ? x1 : lastPoint[0], y0 = (lastPoint == null) ? y1 : lastPoint[1]; var dx = Math.abs(x1 - x0), dy = Math.abs(y1 - y0); var sx = (x0 < x1) ? 1 : -1, sy = (y0 < y1) ? 1 : -1, err = dx - dy; ... var x0 = (lastPoint == null) ? x1 : lastPoint[0], y0 = (lastPoint == null) ? y1 : lastPoint[1]; ... var mouseDown = false, lastPoint = null;

  242. while (true) { onDraw(x0, y0, currentColor); if (x0 == x1

    && y0 == y1) break; var e2 = 2 * err; if (e2 > -dy) { err = err - dy; x0 = x0 + sx; } if (e2 < dx) { err = err + dx; y0 = y0 + sy; } } lastPoint = [x1, y1];

  243. while (true) { onDraw(x0, y0, currentColor); if (x0 == x1

    && y0 == y1) break; var e2 = 2 * err; if (e2 > -dy) { err = err - dy; x0 = x0 + sx; } if (e2 < dx) { err = err + dx; y0 = y0 + sy; } } lastPoint = [x1, y1]; while (true) { onDraw(x0, y0, currentColor); }

  244. while (true) { onDraw(x0, y0, currentColor); if (x0 == x1

    && y0 == y1) break; var e2 = 2 * err; if (e2 > -dy) { err = err - dy; x0 = x0 + sx; } if (e2 < dx) { err = err + dx; y0 = y0 + sy; } } lastPoint = [x1, y1]; while (true) { onDraw(x0, y0, currentColor); }

  245. while (true) { onDraw(x0, y0, currentColor); if (x0 == x1

    && y0 == y1) break; var e2 = 2 * err; if (e2 > -dy) { err = err - dy; x0 = x0 + sx; } if (e2 < dx) { err = err + dx; y0 = y0 + sy; } } lastPoint = [x1, y1]; while (true) { onDraw(x0, y0, currentColor); }

  246. while (true) { onDraw(x0, y0, currentColor); if (x0 == x1

    && y0 == y1) break; var e2 = 2 * err; if (e2 > -dy) { err = err - dy; x0 = x0 + sx; } if (e2 < dx) { err = err + dx; y0 = y0 + sy; } } lastPoint = [x1, y1]; while (true) { onDraw(x0, y0, currentColor); }

  247. while (true) { onDraw(x0, y0, currentColor); if (x0 == x1

    && y0 == y1) break; var e2 = 2 * err; if (e2 > -dy) { err = err - dy; x0 = x0 + sx; } if (e2 < dx) { err = err + dx; y0 = y0 + sy; } } lastPoint = [x1, y1]; while (true) { onDraw(x0, y0, currentColor); }

  248. while (true) { onDraw(x0, y0, currentColor); if (x0 == x1

    && y0 == y1) break; var e2 = 2 * err; if (e2 > -dy) { err = err - dy; x0 = x0 + sx; } if (e2 < dx) { err = err + dx; y0 = y0 + sy; } } lastPoint = [x1, y1]; while (true) { onDraw(x0, y0, currentColor); }

  249. while (true) { onDraw(x0, y0, currentColor); if (x0 == x1

    && y0 == y1) break; var e2 = 2 * err; if (e2 > -dy) { err = err - dy; x0 = x0 + sx; } if (e2 < dx) { err = err + dx; y0 = y0 + sy; } } lastPoint = [x1, y1]; while (true) { onDraw(x0, y0, currentColor); }

  250. while (true) { onDraw(x0, y0, currentColor); if (x0 == x1

    && y0 == y1) break; var e2 = 2 * err; if (e2 > -dy) { err = err - dy; x0 = x0 + sx; } if (e2 < dx) { err = err + dx; y0 = y0 + sy; } } lastPoint = [x1, y1]; while (true) { onDraw(x0, y0, currentColor); }

  251. while (true) { onDraw(x0, y0, currentColor); if (x0 == x1

    && y0 == y1) break; var e2 = 2 * err; if (e2 > -dy) { err = err - dy; x0 = x0 + sx; } if (e2 < dx) { err = err + dx; y0 = y0 + sy; } } lastPoint = [x1, y1]; while (true) { onDraw(x0, y0, currentColor); }

  252. while (true) { onDraw(x0, y0, currentColor); if (x0 == x1

    && y0 == y1) break; var e2 = 2 * err; if (e2 > -dy) { err = err - dy; x0 = x0 + sx; } if (e2 < dx) { err = err + dx; y0 = y0 + sy; } } lastPoint = [x1, y1]; while (true) { onDraw(x0, y0, currentColor); }

  253. while (true) { onDraw(x0, y0, currentColor); if (x0 == x1

    && y0 == y1) break; var e2 = 2 * err; if (e2 > -dy) { err = err - dy; x0 = x0 + sx; } if (e2 < dx) { err = err + dx; y0 = y0 + sy; } } lastPoint = [x1, y1]; while (true) { onDraw(x0, y0, currentColor); } var currentColor;

  254. while (true) { onDraw(x0, y0, currentColor); if (x0 == x1

    && y0 == y1) break; var e2 = 2 * err; if (e2 > -dy) { err = err - dy; x0 = x0 + sx; } if (e2 < dx) { err = err + dx; y0 = y0 + sy; } } lastPoint = [x1, y1]; while (true) { onDraw(x0, y0, currentColor); }

  255. var pixSize = 8; var onDraw = function (x, y,

    color) { myContext.fillStyle = "#" + color; myContext.fillRect(x * pixSize, y * pixSize, pixSize, pixSize); };

  256. var pixSize = 8; var onDraw = function (x, y,

    color) { myContext.fillStyle = "#" + color; myContext.fillRect(x * pixSize, y * pixSize, pixSize, pixSize); }; var pixSize = 8;

  257. var pixSize = 8; var onDraw = function (x, y,

    color) { myContext.fillStyle = "#" + color; myContext.fillRect(x * pixSize, y * pixSize, pixSize, pixSize); }; var pixSize = 8;

  258. var pixSize = 8; var onDraw = function (x, y,

    color) { myContext.fillStyle = "#" + color; myContext.fillRect(x * pixSize, y * pixSize, pixSize, pixSize); }; var pixSize = 8;

  259. var pixSize = 8; var onDraw = function (x, y,

    color) { myContext.fillStyle = "#" + color; myContext.fillRect(x * pixSize, y * pixSize, pixSize, pixSize); }; var pixSize = 8;

  260. var pixSize = 8; var onDraw = function (x, y,

    color) { myContext.fillStyle = "#" + color; myContext.fillRect(x * pixSize, y * pixSize, pixSize, pixSize); }; var pixSize = 8; 8px

  261. var pixSize = 8; var onDraw = function (x, y,

    color) { myContext.fillStyle = "#" + color; myContext.fillRect(x * pixSize, y * pixSize, pixSize, pixSize); }; var pixSize = 8; 8px <canvas width="480" height="480"></canvas>

  262. var pixSize = 8; var onDraw = function (x, y,

    color) { myContext.fillStyle = "#" + color; myContext.fillRect(x * pixSize, y * pixSize, pixSize, pixSize); }; var pixSize = 8; 8px <canvas width="480" height="480"></canvas> pixSize

  263. var pixSize = 8; var onDraw = function (x, y,

    color) { myContext.fillStyle = "#" + color; myContext.fillRect(x * pixSize, y * pixSize, pixSize, pixSize); }; var onDraw = function (x, y, color) { };

  264. var pixSize = 8; var onDraw = function (x, y,

    color) { myContext.fillStyle = "#" + color; myContext.fillRect(x * pixSize, y * pixSize, pixSize, pixSize); }; var onDraw = function (x, y, color) { };

  265. var pixSize = 8; var onDraw = function (x, y,

    color) { myContext.fillStyle = "#" + color; myContext.fillRect(x * pixSize, y * pixSize, pixSize, pixSize); }; var onDraw = function (x, y, color) { };

  266. var pixSize = 8; var onDraw = function (x, y,

    color) { myContext.fillStyle = "#" + color; myContext.fillRect(x * pixSize, y * pixSize, pixSize, pixSize); }; var onDraw = function (x, y, color) { };

  267. var pixSize = 8; var onDraw = function (x, y,

    color) { myContext.fillStyle = "#" + color; myContext.fillRect(x * pixSize, y * pixSize, pixSize, pixSize); }; var onDraw = function (x, y, color) { };

  268. var pixSize = 8; var onDraw = function (x, y,

    color) { myContext.fillStyle = "#" + color; myContext.fillRect(x * pixSize, y * pixSize, pixSize, pixSize); }; var onDraw = function (x, y, color) { };

  269. var pixSize = 8; var onDraw = function (x, y,

    color) { myContext.fillStyle = "#" + color; myContext.fillRect(x * pixSize, y * pixSize, pixSize, pixSize); }; var onDraw = function (x, y, color) { };

  270. var pixSize = 8; var onDraw = function (x, y,

    color) { myContext.fillStyle = "#" + color; myContext.fillRect(x * pixSize, y * pixSize, pixSize, pixSize); }; myContext.fillStyle = "#" + color; myContext.fillRect(x * pixSize, y * pixSize, pixSize, pixSize);

  271. var pixSize = 8; var onDraw = function (x, y,

    color) { myContext.fillStyle = "#" + color; myContext.fillRect(x * pixSize, y * pixSize, pixSize, pixSize); }; myContext.fillStyle = "#" + color;

  272. var pixSize = 8; var onDraw = function (x, y,

    color) { myContext.fillStyle = "#" + color; myContext.fillRect(x * pixSize, y * pixSize, pixSize, pixSize); }; myContext.fillStyle = "#" + color;

  273. var pixSize = 8; var onDraw = function (x, y,

    color) { myContext.fillStyle = "#" + color; myContext.fillRect(x * pixSize, y * pixSize, pixSize, pixSize); }; myContext.fillStyle = "#" + color;

  274. var pixSize = 8; var onDraw = function (x, y,

    color) { myContext.fillStyle = "#" + color; myContext.fillRect(x * pixSize, y * pixSize, pixSize, pixSize); }; myContext.fillStyle = "#" + color;

  275. var pixSize = 8; var onDraw = function (x, y,

    color) { myContext.fillStyle = "#" + color; myContext.fillRect(x * pixSize, y * pixSize, pixSize, pixSize); }; myContext.fillStyle = "#" + color; aabbcc

  276. var pixSize = 8; var onDraw = function (x, y,

    color) { myContext.fillStyle = "#" + color; myContext.fillRect(x * pixSize, y * pixSize, pixSize, pixSize); }; myContext.fillStyle = "#" + color; aabbcc

  277. var pixSize = 8; var onDraw = function (x, y,

    color) { myContext.fillStyle = "#" + color; myContext.fillRect(x * pixSize, y * pixSize, pixSize, pixSize); }; myContext.fillStyle = "#" + color; #aabbcc aabbcc

  278. var pixSize = 8; var onDraw = function (x, y,

    color) { myContext.fillStyle = "#" + color; myContext.fillRect(x * pixSize, y * pixSize, pixSize, pixSize); }; myContext.fillRect(x * pixSize, y * pixSize, pixSize, pixSize);

  279. var pixSize = 8; var onDraw = function (x, y,

    color) { myContext.fillStyle = "#" + color; myContext.fillRect(x * pixSize, y * pixSize, pixSize, pixSize); }; myContext.fillRect(x * pixSize, y * pixSize, pixSize, pixSize);

  280. var pixSize = 8; var onDraw = function (x, y,

    color) { myContext.fillStyle = "#" + color; myContext.fillRect(x * pixSize, y * pixSize, pixSize, pixSize); }; myContext.fillRect(x * pixSize, y * pixSize, pixSize, pixSize);

  281. var pixSize = 8; var onDraw = function (x, y,

    color) { myContext.fillStyle = "#" + color; myContext.fillRect(x * pixSize, y * pixSize, pixSize, pixSize); }; myContext.fillRect(x * pixSize, y * pixSize, pixSize, pixSize);

  282. var pixSize = 8; var onDraw = function (x, y,

    color) { myContext.fillStyle = "#" + color; myContext.fillRect(x * pixSize, y * pixSize, pixSize, pixSize); }; myContext.fillRect(x * pixSize, y * pixSize, pixSize, pixSize);

  283. var pixSize = 8; var onDraw = function (x, y,

    color) { myContext.fillStyle = "#" + color; myContext.fillRect(x * pixSize, y * pixSize, pixSize, pixSize); }; myContext.fillRect(x * pixSize, y * pixSize, pixSize, pixSize);

  284. var pixSize = 8; var onDraw = function (x, y,

    color) { myContext.fillStyle = "#" + color; myContext.fillRect(x * pixSize, y * pixSize, pixSize, pixSize); }; myContext.fillRect(x * pixSize, y * pixSize, pixSize, pixSize);

  285. var pixSize = 8; var onDraw = function (x, y,

    color) { myContext.fillStyle = "#" + color; myContext.fillRect(x * pixSize, y * pixSize, pixSize, pixSize); }; myContext.fillRect(x * pixSize, y * pixSize, pixSize, pixSize);

  286. var pixSize = 8; var onDraw = function (x, y,

    color) { myContext.fillStyle = "#" + color; myContext.fillRect(x * pixSize, y * pixSize, pixSize, pixSize); }; myContext.fillRect(x * pixSize, y * pixSize, pixSize, pixSize);

  287. var pixSize = 8; var onDraw = function (x, y,

    color) { myContext.fillStyle = "#" + color; myContext.fillRect(x * pixSize, y * pixSize, pixSize, pixSize); }; myContext.fillRect(x * pixSize, y * pixSize, pixSize, pixSize);

  288. var pixSize = 8; var onDraw = function (x, y,

    color) { myContext.fillStyle = "#" + color; myContext.fillRect(x * pixSize, y * pixSize, pixSize, pixSize); }; myContext.fillRect(x * pixSize, y * pixSize, pixSize, pixSize);

  289. var pixSize = 8; var onDraw = function (x, y,

    color) { myContext.fillStyle = "#" + color; myContext.fillRect(x * pixSize, y * pixSize, pixSize, pixSize); }; myContext.fillRect(x * pixSize, y * pixSize, pixSize, pixSize);

  290. var pixSize = 8; var onDraw = function (x, y,

    color) { myContext.fillStyle = "#" + color; myContext.fillRect(x * pixSize, y * pixSize, pixSize, pixSize); }; myContext.fillRect(x * pixSize, y * pixSize, pixSize, pixSize);
  291. None
  292. None
  293. None
  294. None
  295. None

  296. var config = { apiKey: "xR4nD03xlgfaq689pzEw9o2raN00mLoLx", databaseURL: "https://waiting-me-c8763.firebaseio.com" }; firebase.initializeApp(config);

    var dataRef = firebase.database().ref();

  297. var config = { apiKey: "xR4nD03xlgfaq689pzEw9o2raN00mLoLx", databaseURL: "https://waiting-me-c8763.firebaseio.com" }; firebase.initializeApp(config);

    var dataRef = firebase.database().ref();

  298. var config = { apiKey: "xR4nD03xlgfaq689pzEw9o2raN00mLoLx", databaseURL: "https://waiting-me-c8763.firebaseio.com" }; firebase.initializeApp(config);

    var dataRef = firebase.database().ref();

  299. var config = { apiKey: "xR4nD03xlgfaq689pzEw9o2raN00mLoLx", databaseURL: "https://waiting-me-c8763.firebaseio.com" }; firebase.initializeApp(config);

    var dataRef = firebase.database().ref();

  300. var config = { apiKey: "xR4nD03xlgfaq689pzEw9o2raN00mLoLx", databaseURL: "https://waiting-me-c8763.firebaseio.com" }; firebase.initializeApp(config);

    var dataRef = firebase.database().ref();

  301. var config = { apiKey: "xR4nD03xlgfaq689pzEw9o2raN00mLoLx", databaseURL: "https://waiting-me-c8763.firebaseio.com" }; firebase.initializeApp(config);

    var dataRef = firebase.database().ref();

  302. var config = { apiKey: "xR4nD03xlgfaq689pzEw9o2raN00mLoLx", databaseURL: "https://waiting-me-c8763.firebaseio.com" }; firebase.initializeApp(config);

    var dataRef = firebase.database().ref();

  303. var config = { apiKey: "xR4nD03xlgfaq689pzEw9o2raN00mLoLx", databaseURL: "https://waiting-me-c8763.firebaseio.com" }; firebase.initializeApp(config);

    var dataRef = firebase.database().ref();

  304. var config = { apiKey: "xR4nD03xlgfaq689pzEw9o2raN00mLoLx", databaseURL: "https://waiting-me-c8763.firebaseio.com" }; firebase.initializeApp(config);

    var dataRef = firebase.database().ref();

  305. var config = { apiKey: "xR4nD03xlgfaq689pzEw9o2raN00mLoLx", databaseURL: "https://waiting-me-c8763.firebaseio.com" }; firebase.initializeApp(config);

    var dataRef = firebase.database().ref();

  306. var config = { apiKey: "xR4nD03xlgfaq689pzEw9o2raN00mLoLx", databaseURL: "https://waiting-me-c8763.firebaseio.com" }; firebase.initializeApp(config);

    var dataRef = firebase.database().ref();

  307. var drawPixel = function(snapshot) { var coords = snapshot.key.split(":"); myContext.fillStyle

    = "#" + snapshot.val(); myContext.fillRect( parseInt(coords[0]) * pixSize, parseInt(coords[1]) * pixSize, pixSize, pixSize); }; dataRef.on('child_added' , drawPixel); dataRef.on('child_changed', drawPixel);

  308. var drawPixel = function(snapshot) { var coords = snapshot.key.split(":"); myContext.fillStyle

    = "#" + snapshot.val(); myContext.fillRect( parseInt(coords[0]) * pixSize, parseInt(coords[1]) * pixSize, pixSize, pixSize); }; dataRef.on('child_added' , drawPixel); dataRef.on('child_changed', drawPixel); dataRef.on('child_added' , drawPixel); dataRef.on('child_changed', drawPixel);

  309. var drawPixel = function(snapshot) { var coords = snapshot.key.split(":"); myContext.fillStyle

    = "#" + snapshot.val(); myContext.fillRect( parseInt(coords[0]) * pixSize, parseInt(coords[1]) * pixSize, pixSize, pixSize); }; dataRef.on('child_added' , drawPixel); dataRef.on('child_changed', drawPixel); dataRef.on('child_added' , drawPixel); dataRef.on('child_changed', drawPixel);

  310. var drawPixel = function(snapshot) { var coords = snapshot.key.split(":"); myContext.fillStyle

    = "#" + snapshot.val(); myContext.fillRect( parseInt(coords[0]) * pixSize, parseInt(coords[1]) * pixSize, pixSize, pixSize); }; dataRef.on('child_added' , drawPixel); dataRef.on('child_changed', drawPixel); dataRef.on('child_added' , drawPixel); dataRef.on('child_changed', drawPixel); child

  311. var drawPixel = function(snapshot) { var coords = snapshot.key.split(":"); myContext.fillStyle

    = "#" + snapshot.val(); myContext.fillRect( parseInt(coords[0]) * pixSize, parseInt(coords[1]) * pixSize, pixSize, pixSize); }; dataRef.on('child_added' , drawPixel); dataRef.on('child_changed', drawPixel); dataRef.on('child_added' , drawPixel); dataRef.on('child_changed', drawPixel); child

  312. var drawPixel = function(snapshot) { var coords = snapshot.key.split(":"); myContext.fillStyle

    = "#" + snapshot.val(); myContext.fillRect( parseInt(coords[0]) * pixSize, parseInt(coords[1]) * pixSize, pixSize, pixSize); }; dataRef.on('child_added' , drawPixel); dataRef.on('child_changed', drawPixel); dataRef.on('child_added' , drawPixel); dataRef.on('child_changed', drawPixel); child child

  313. var drawPixel = function(snapshot) { var coords = snapshot.key.split(":"); myContext.fillStyle

    = "#" + snapshot.val(); myContext.fillRect( parseInt(coords[0]) * pixSize, parseInt(coords[1]) * pixSize, pixSize, pixSize); }; dataRef.on('child_added' , drawPixel); dataRef.on('child_changed', drawPixel); dataRef.on('child_added' , drawPixel); dataRef.on('child_changed', drawPixel);

  314. var drawPixel = function(snapshot) { var coords = snapshot.key.split(":"); myContext.fillStyle

    = "#" + snapshot.val(); myContext.fillRect( parseInt(coords[0]) * pixSize, parseInt(coords[1]) * pixSize, pixSize, pixSize); }; dataRef.on('child_added' , drawPixel); dataRef.on('child_changed', drawPixel); var drawPixel = function(snapshot) { }; dataRef.on('child_added' , drawPixel); dataRef.on('child_changed', drawPixel);

  315. var drawPixel = function(snapshot) { var coords = snapshot.key.split(":"); myContext.fillStyle

    = "#" + snapshot.val(); myContext.fillRect( parseInt(coords[0]) * pixSize, parseInt(coords[1]) * pixSize, pixSize, pixSize); }; dataRef.on('child_added' , drawPixel); dataRef.on('child_changed', drawPixel); var drawPixel = function(snapshot) { }; dataRef.on('child_added' , drawPixel); dataRef.on('child_changed', drawPixel);

  316. var drawPixel = function(snapshot) { var coords = snapshot.key.split(":"); myContext.fillStyle

    = "#" + snapshot.val(); myContext.fillRect( parseInt(coords[0]) * pixSize, parseInt(coords[1]) * pixSize, pixSize, pixSize); }; dataRef.on('child_added' , drawPixel); dataRef.on('child_changed', drawPixel); var drawPixel = function(snapshot) { };

  317. var drawPixel = function(snapshot) { var coords = snapshot.key.split(":"); myContext.fillStyle

    = "#" + snapshot.val(); myContext.fillRect( parseInt(coords[0]) * pixSize, parseInt(coords[1]) * pixSize, pixSize, pixSize); }; dataRef.on('child_added' , drawPixel); dataRef.on('child_changed', drawPixel); var drawPixel = function(snapshot) { };

  318. var drawPixel = function(snapshot) { var coords = snapshot.key.split(":"); myContext.fillStyle

    = "#" + snapshot.val(); myContext.fillRect( parseInt(coords[0]) * pixSize, parseInt(coords[1]) * pixSize, pixSize, pixSize); }; dataRef.on('child_added' , drawPixel); dataRef.on('child_changed', drawPixel); var drawPixel = function(snapshot) { };

  319. var drawPixel = function(snapshot) { var coords = snapshot.key.split(":"); myContext.fillStyle

    = "#" + snapshot.val(); myContext.fillRect( parseInt(coords[0]) * pixSize, parseInt(coords[1]) * pixSize, pixSize, pixSize); }; dataRef.on('child_added' , drawPixel); dataRef.on('child_changed', drawPixel); var drawPixel = function(snapshot) { }; key xx:yy val aabbcc

  320. var drawPixel = function(snapshot) { var coords = snapshot.key.split(":"); myContext.fillStyle

    = "#" + snapshot.val(); myContext.fillRect( parseInt(coords[0]) * pixSize, parseInt(coords[1]) * pixSize, pixSize, pixSize); }; dataRef.on('child_added' , drawPixel); dataRef.on('child_changed', drawPixel); var coords = snapshot.key.split(":"); myContext.fillStyle = "#" + snapshot.val(); myContext.fillRect( parseInt(coords[0]) * pixSize, parseInt(coords[1]) * pixSize, pixSize, pixSize);

  321. var drawPixel = function(snapshot) { var coords = snapshot.key.split(":"); myContext.fillStyle

    = "#" + snapshot.val(); myContext.fillRect( parseInt(coords[0]) * pixSize, parseInt(coords[1]) * pixSize, pixSize, pixSize); }; dataRef.on('child_added' , drawPixel); dataRef.on('child_changed', drawPixel); var coords = snapshot.key.split(":"); myContext.fillStyle = "#" + snapshot.val(); myContext.fillRect( parseInt(coords[0]) * pixSize, parseInt(coords[1]) * pixSize, pixSize, pixSize);

  322. var drawPixel = function(snapshot) { var coords = snapshot.key.split(":"); myContext.fillStyle

    = "#" + snapshot.val(); myContext.fillRect( parseInt(coords[0]) * pixSize, parseInt(coords[1]) * pixSize, pixSize, pixSize); }; dataRef.on('child_added' , drawPixel); dataRef.on('child_changed', drawPixel); var coords = snapshot.key.split(":"); myContext.fillStyle = "#" + snapshot.val(); myContext.fillRect( parseInt(coords[0]) * pixSize, parseInt(coords[1]) * pixSize, pixSize, pixSize);

  323. var drawPixel = function(snapshot) { var coords = snapshot.key.split(":"); myContext.fillStyle

    = "#" + snapshot.val(); myContext.fillRect( parseInt(coords[0]) * pixSize, parseInt(coords[1]) * pixSize, pixSize, pixSize); }; dataRef.on('child_added' , drawPixel); dataRef.on('child_changed', drawPixel); var coords = snapshot.key.split(":"); myContext.fillStyle = "#" + snapshot.val(); myContext.fillRect( parseInt(coords[0]) * pixSize, parseInt(coords[1]) * pixSize, pixSize, pixSize);

  324. var drawPixel = function(snapshot) { var coords = snapshot.key.split(":"); myContext.fillStyle

    = "#" + snapshot.val(); myContext.fillRect( parseInt(coords[0]) * pixSize, parseInt(coords[1]) * pixSize, pixSize, pixSize); }; dataRef.on('child_added' , drawPixel); dataRef.on('child_changed', drawPixel); var coords = snapshot.key.split(":"); myContext.fillStyle = "#" + snapshot.val(); myContext.fillRect( parseInt(coords[0]) * pixSize, parseInt(coords[1]) * pixSize, pixSize, pixSize); xx:yy

  325. var drawPixel = function(snapshot) { var coords = snapshot.key.split(":"); myContext.fillStyle

    = "#" + snapshot.val(); myContext.fillRect( parseInt(coords[0]) * pixSize, parseInt(coords[1]) * pixSize, pixSize, pixSize); }; dataRef.on('child_added' , drawPixel); dataRef.on('child_changed', drawPixel); var coords = snapshot.key.split(":"); myContext.fillStyle = "#" + snapshot.val(); myContext.fillRect( parseInt(coords[0]) * pixSize, parseInt(coords[1]) * pixSize, pixSize, pixSize); xx:yy

  326. var drawPixel = function(snapshot) { var coords = snapshot.key.split(":"); myContext.fillStyle

    = "#" + snapshot.val(); myContext.fillRect( parseInt(coords[0]) * pixSize, parseInt(coords[1]) * pixSize, pixSize, pixSize); }; dataRef.on('child_added' , drawPixel); dataRef.on('child_changed', drawPixel); var coords = snapshot.key.split(":"); myContext.fillStyle = "#" + snapshot.val(); myContext.fillRect( parseInt(coords[0]) * pixSize, parseInt(coords[1]) * pixSize, pixSize, pixSize); xx:yy :

  327. var drawPixel = function(snapshot) { var coords = snapshot.key.split(":"); myContext.fillStyle

    = "#" + snapshot.val(); myContext.fillRect( parseInt(coords[0]) * pixSize, parseInt(coords[1]) * pixSize, pixSize, pixSize); }; dataRef.on('child_added' , drawPixel); dataRef.on('child_changed', drawPixel); var coords = snapshot.key.split(":"); myContext.fillStyle = "#" + snapshot.val(); myContext.fillRect( parseInt(coords[0]) * pixSize, parseInt(coords[1]) * pixSize, pixSize, pixSize);

  328. var drawPixel = function(snapshot) { var coords = snapshot.key.split(":"); myContext.fillStyle

    = "#" + snapshot.val(); myContext.fillRect( parseInt(coords[0]) * pixSize, parseInt(coords[1]) * pixSize, pixSize, pixSize); }; dataRef.on('child_added' , drawPixel); dataRef.on('child_changed', drawPixel); var coords = snapshot.key.split(":"); myContext.fillStyle = "#" + snapshot.val(); myContext.fillRect( parseInt(coords[0]) * pixSize, parseInt(coords[1]) * pixSize, pixSize, pixSize); aabbcc

  329. var drawPixel = function(snapshot) { var coords = snapshot.key.split(":"); myContext.fillStyle

    = "#" + snapshot.val(); myContext.fillRect( parseInt(coords[0]) * pixSize, parseInt(coords[1]) * pixSize, pixSize, pixSize); }; dataRef.on('child_added' , drawPixel); dataRef.on('child_changed', drawPixel); var coords = snapshot.key.split(":"); myContext.fillStyle = "#" + snapshot.val(); myContext.fillRect( parseInt(coords[0]) * pixSize, parseInt(coords[1]) * pixSize, pixSize, pixSize); aabbcc

  330. var drawPixel = function(snapshot) { var coords = snapshot.key.split(":"); myContext.fillStyle

    = "#" + snapshot.val(); myContext.fillRect( parseInt(coords[0]) * pixSize, parseInt(coords[1]) * pixSize, pixSize, pixSize); }; dataRef.on('child_added' , drawPixel); dataRef.on('child_changed', drawPixel); var coords = snapshot.key.split(":"); myContext.fillStyle = "#" + snapshot.val(); myContext.fillRect( parseInt(coords[0]) * pixSize, parseInt(coords[1]) * pixSize, pixSize, pixSize); #aabbcc aabbcc

  331. var drawPixel = function(snapshot) { var coords = snapshot.key.split(":"); myContext.fillStyle

    = "#" + snapshot.val(); myContext.fillRect( parseInt(coords[0]) * pixSize, parseInt(coords[1]) * pixSize, pixSize, pixSize); }; dataRef.on('child_added' , drawPixel); dataRef.on('child_changed', drawPixel); var coords = snapshot.key.split(":"); myContext.fillStyle = "#" + snapshot.val(); myContext.fillRect( parseInt(coords[0]) * pixSize, parseInt(coords[1]) * pixSize, pixSize, pixSize);

  332. var drawPixel = function(snapshot) { var coords = snapshot.key.split(":"); myContext.fillStyle

    = "#" + snapshot.val(); myContext.fillRect( parseInt(coords[0]) * pixSize, parseInt(coords[1]) * pixSize, pixSize, pixSize); }; dataRef.on('child_added' , drawPixel); dataRef.on('child_changed', drawPixel); var coords = snapshot.key.split(":"); myContext.fillStyle = "#" + snapshot.val(); myContext.fillRect( parseInt(coords[0]) * pixSize, parseInt(coords[1]) * pixSize, pixSize, pixSize); x

  333. var drawPixel = function(snapshot) { var coords = snapshot.key.split(":"); myContext.fillStyle

    = "#" + snapshot.val(); myContext.fillRect( parseInt(coords[0]) * pixSize, parseInt(coords[1]) * pixSize, pixSize, pixSize); }; dataRef.on('child_added' , drawPixel); dataRef.on('child_changed', drawPixel); var coords = snapshot.key.split(":"); myContext.fillStyle = "#" + snapshot.val(); myContext.fillRect( parseInt(coords[0]) * pixSize, parseInt(coords[1]) * pixSize, pixSize, pixSize); x

  334. var drawPixel = function(snapshot) { var coords = snapshot.key.split(":"); myContext.fillStyle

    = "#" + snapshot.val(); myContext.fillRect( parseInt(coords[0]) * pixSize, parseInt(coords[1]) * pixSize, pixSize, pixSize); }; dataRef.on('child_added' , drawPixel); dataRef.on('child_changed', drawPixel); var coords = snapshot.key.split(":"); myContext.fillStyle = "#" + snapshot.val(); myContext.fillRect( parseInt(coords[0]) * pixSize, parseInt(coords[1]) * pixSize, pixSize, pixSize); x

  335. var drawPixel = function(snapshot) { var coords = snapshot.key.split(":"); myContext.fillStyle

    = "#" + snapshot.val(); myContext.fillRect( parseInt(coords[0]) * pixSize, parseInt(coords[1]) * pixSize, pixSize, pixSize); }; dataRef.on('child_added' , drawPixel); dataRef.on('child_changed', drawPixel); var coords = snapshot.key.split(":"); myContext.fillStyle = "#" + snapshot.val(); myContext.fillRect( parseInt(coords[0]) * pixSize, parseInt(coords[1]) * pixSize, pixSize, pixSize); x

  336. var drawPixel = function(snapshot) { var coords = snapshot.key.split(":"); myContext.fillStyle

    = "#" + snapshot.val(); myContext.fillRect( parseInt(coords[0]) * pixSize, parseInt(coords[1]) * pixSize, pixSize, pixSize); }; dataRef.on('child_added' , drawPixel); dataRef.on('child_changed', drawPixel); var coords = snapshot.key.split(":"); myContext.fillStyle = "#" + snapshot.val(); myContext.fillRect( parseInt(coords[0]) * pixSize, parseInt(coords[1]) * pixSize, pixSize, pixSize); x

  337. var drawPixel = function(snapshot) { var coords = snapshot.key.split(":"); myContext.fillStyle

    = "#" + snapshot.val(); myContext.fillRect( parseInt(coords[0]) * pixSize, parseInt(coords[1]) * pixSize, pixSize, pixSize); }; dataRef.on('child_added' , drawPixel); dataRef.on('child_changed', drawPixel); var coords = snapshot.key.split(":"); myContext.fillStyle = "#" + snapshot.val(); myContext.fillRect( parseInt(coords[0]) * pixSize, parseInt(coords[1]) * pixSize, pixSize, pixSize); x y

  338. var drawPixel = function(snapshot) { var coords = snapshot.key.split(":"); myContext.fillStyle

    = "#" + snapshot.val(); myContext.fillRect( parseInt(coords[0]) * pixSize, parseInt(coords[1]) * pixSize, pixSize, pixSize); }; dataRef.on('child_added' , drawPixel); dataRef.on('child_changed', drawPixel); var coords = snapshot.key.split(":"); myContext.fillStyle = "#" + snapshot.val(); myContext.fillRect( parseInt(coords[0]) * pixSize, parseInt(coords[1]) * pixSize, pixSize, pixSize);

  339. var drawPixel = function(snapshot) { var coords = snapshot.key.split(":"); myContext.fillStyle

    = "#" + snapshot.val(); myContext.fillRect( parseInt(coords[0]) * pixSize, parseInt(coords[1]) * pixSize, pixSize, pixSize); }; dataRef.on('child_added' , drawPixel); dataRef.on('child_changed', drawPixel); var coords = snapshot.key.split(":"); myContext.fillStyle = "#" + snapshot.val(); myContext.fillRect( parseInt(coords[0]) * pixSize, parseInt(coords[1]) * pixSize, pixSize, pixSize); var onDraw = function (x, y, color) { myContext.fillStyle = "#" + color; myContext.fillRect(x * pixSize, y * pixSize, pixSize, pixSize); };

  340. var onDraw = function (x, y, color) { myContext.fillStyle =

    "#" + color; myContext.fillRect(x * pixSize, y * pixSize, pixSize, pixSize); };

  341. var onDraw = function (x, y, color) { myContext.fillStyle =

    "#" + color; myContext.fillRect(x * pixSize, y * pixSize, pixSize, pixSize); };

  342. var onDraw = function (x, y, color) { myContext.fillStyle =

    "#" + color; myContext.fillRect(x * pixSize, y * pixSize, pixSize, pixSize); };

  343. var onDraw = function (x, y, color) { myContext.fillStyle =

    "#" + color; myContext.fillRect(x * pixSize, y * pixSize, pixSize, pixSize); };

  344. var onDraw = function (x, y, color) { myContext.fillStyle =

    "#" + color; myContext.fillRect(x * pixSize, y * pixSize, pixSize, pixSize); };

  345. var onDraw = function (x, y, color) { myContext.fillStyle =

    "#" + color; myContext.fillRect(x * pixSize, y * pixSize, pixSize, pixSize); dataRef.child(x + ":" + y) .set(color === "fff" ? null : color); };

  346. var onDraw = function (x, y, color) { myContext.fillStyle =

    "#" + color; myContext.fillRect(x * pixSize, y * pixSize, pixSize, pixSize); dataRef.child(x + ":" + y) .set(color === "fff" ? null : color); }; dataRef.child(x + ":" + y) .set(color === "fff" ? null : color);

  347. var onDraw = function (x, y, color) { myContext.fillStyle =

    "#" + color; myContext.fillRect(x * pixSize, y * pixSize, pixSize, pixSize); dataRef.child(x + ":" + y) .set(color === "fff" ? null : color); }; dataRef.child(x + ":" + y) .set(color === "fff" ? null : color);

  348. var onDraw = function (x, y, color) { myContext.fillStyle =

    "#" + color; myContext.fillRect(x * pixSize, y * pixSize, pixSize, pixSize); dataRef.child(x + ":" + y) .set(color === "fff" ? null : color); }; dataRef.child(x + ":" + y) .set(color === "fff" ? null : color); xx:yy

  349. var onDraw = function (x, y, color) { myContext.fillStyle =

    "#" + color; myContext.fillRect(x * pixSize, y * pixSize, pixSize, pixSize); dataRef.child(x + ":" + y) .set(color === "fff" ? null : color); }; dataRef.child(x + ":" + y) .set(color === "fff" ? null : color);

  350. var onDraw = function (x, y, color) { myContext.fillStyle =

    "#" + color; myContext.fillRect(x * pixSize, y * pixSize, pixSize, pixSize); dataRef.child(x + ":" + y) .set(color === "fff" ? null : color); }; dataRef.child(x + ":" + y) .set(color === "fff" ? null : color);

  351. var onDraw = function (x, y, color) { myContext.fillStyle =

    "#" + color; myContext.fillRect(x * pixSize, y * pixSize, pixSize, pixSize); dataRef.child(x + ":" + y) .set(color === "fff" ? null : color); }; dataRef.child(x + ":" + y) .set(color === "fff" ? null : color);

  352. var onDraw = function (x, y, color) { myContext.fillStyle =

    "#" + color; myContext.fillRect(x * pixSize, y * pixSize, pixSize, pixSize); dataRef.child(x + ":" + y) .set(color === "fff" ? null : color); }; dataRef.child(x + ":" + y) .set(color === "fff" ? null : color);

  353. var onDraw = function (x, y, color) { myContext.fillStyle =

    "#" + color; myContext.fillRect(x * pixSize, y * pixSize, pixSize, pixSize); dataRef.child(x + ":" + y) .set(color === "fff" ? null : color); }; dataRef.child(x + ":" + y) .set(color === "fff" ? null : color);

  354. var onDraw = function (x, y, color) { myContext.fillStyle =

    "#" + color; myContext.fillRect(x * pixSize, y * pixSize, pixSize, pixSize); dataRef.child(x + ":" + y) .set(color === "fff" ? null : color); }; dataRef.child(x + ":" + y) .set(color === "fff" ? null : color);

  355. var onDraw = function (x, y, color) { myContext.fillStyle =

    "#" + color; myContext.fillRect(x * pixSize, y * pixSize, pixSize, pixSize); dataRef.child(x + ":" + y) .set(color === "fff" ? null : color); }; dataRef.child(x + ":" + y) .set(color === "fff" ? null : color);

  356. var onDraw = function (x, y, color) { myContext.fillStyle =

    "#" + color; myContext.fillRect(x * pixSize, y * pixSize, pixSize, pixSize); dataRef.child(x + ":" + y) .set(color === "fff" ? null : color); }; dataRef.child(x + ":" + y) .set(color === "fff" ? null : color);

  357. var clearPixel = function(snapshot) { var coords = snapshot.key.split(":"); myContext.clearRect(

    parseInt(coords[0]) * pixSize, parseInt(coords[1]) * pixSize, pixSize, pixSize); }; dataRef.on('child_removed', clearPixel);

  358. var clearPixel = function(snapshot) { var coords = snapshot.key.split(":"); myContext.clearRect(

    parseInt(coords[0]) * pixSize, parseInt(coords[1]) * pixSize, pixSize, pixSize); }; dataRef.on('child_removed', clearPixel); dataRef.on('child_removed', clearPixel);

  359. var clearPixel = function(snapshot) { var coords = snapshot.key.split(":"); myContext.clearRect(

    parseInt(coords[0]) * pixSize, parseInt(coords[1]) * pixSize, pixSize, pixSize); }; dataRef.on('child_removed', clearPixel); dataRef.on('child_removed', clearPixel);

  360. var clearPixel = function(snapshot) { var coords = snapshot.key.split(":"); myContext.clearRect(

    parseInt(coords[0]) * pixSize, parseInt(coords[1]) * pixSize, pixSize, pixSize); }; dataRef.on('child_removed', clearPixel); dataRef.on('child_removed', clearPixel); child

  361. var clearPixel = function(snapshot) { var coords = snapshot.key.split(":"); myContext.clearRect(

    parseInt(coords[0]) * pixSize, parseInt(coords[1]) * pixSize, pixSize, pixSize); }; dataRef.on('child_removed', clearPixel); dataRef.on('child_removed', clearPixel);

  362. var clearPixel = function(snapshot) { var coords = snapshot.key.split(":"); myContext.clearRect(

    parseInt(coords[0]) * pixSize, parseInt(coords[1]) * pixSize, pixSize, pixSize); }; dataRef.on('child_removed', clearPixel); var clearPixel = function(snapshot) { }; dataRef.on('child_removed', clearPixel);

  363. var clearPixel = function(snapshot) { var coords = snapshot.key.split(":"); myContext.clearRect(

    parseInt(coords[0]) * pixSize, parseInt(coords[1]) * pixSize, pixSize, pixSize); }; dataRef.on('child_removed', clearPixel); var clearPixel = function(snapshot) { }; dataRef.on('child_removed', clearPixel);

  364. var clearPixel = function(snapshot) { var coords = snapshot.key.split(":"); myContext.clearRect(

    parseInt(coords[0]) * pixSize, parseInt(coords[1]) * pixSize, pixSize, pixSize); }; dataRef.on('child_removed', clearPixel); var clearPixel = function(snapshot) { }; dataRef.on('child_removed', clearPixel); var drawPixel = function(snapshot) { var coords = snapshot.key.split(":"); myContext.fillStyle = "#" + snapshot.val(); ... };

  365. var clearPixel = function(snapshot) { var coords = snapshot.key.split(":"); myContext.clearRect(

    parseInt(coords[0]) * pixSize, parseInt(coords[1]) * pixSize, pixSize, pixSize); }; dataRef.on('child_removed', clearPixel); myContext.clearRect( parseInt(coords[0]) * pixSize, parseInt(coords[1]) * pixSize, pixSize, pixSize);

  366. var clearPixel = function(snapshot) { var coords = snapshot.key.split(":"); myContext.clearRect(

    parseInt(coords[0]) * pixSize, parseInt(coords[1]) * pixSize, pixSize, pixSize); }; dataRef.on('child_removed', clearPixel); myContext.clearRect( parseInt(coords[0]) * pixSize, parseInt(coords[1]) * pixSize, pixSize, pixSize);

  367. var clearPixel = function(snapshot) { var coords = snapshot.key.split(":"); myContext.clearRect(

    parseInt(coords[0]) * pixSize, parseInt(coords[1]) * pixSize, pixSize, pixSize); }; dataRef.on('child_removed', clearPixel); myContext.clearRect( parseInt(coords[0]) * pixSize, parseInt(coords[1]) * pixSize, pixSize, pixSize);

  368. var clearPixel = function(snapshot) { var coords = snapshot.key.split(":"); myContext.clearRect(

    parseInt(coords[0]) * pixSize, parseInt(coords[1]) * pixSize, pixSize, pixSize); }; dataRef.on('child_removed', clearPixel); myContext.clearRect( parseInt(coords[0]) * pixSize, parseInt(coords[1]) * pixSize, pixSize, pixSize);

  369. var clearPixel = function(snapshot) { var coords = snapshot.key.split(":"); myContext.clearRect(

    parseInt(coords[0]) * pixSize, parseInt(coords[1]) * pixSize, pixSize, pixSize); }; dataRef.on('child_removed', clearPixel); myContext.clearRect( parseInt(coords[0]) * pixSize, parseInt(coords[1]) * pixSize, pixSize, pixSize); var drawPixel = function(snapshot) { ... myContext.fillRect( parseInt(coords[0]) * pixSize, parseInt(coords[1]) * pixSize, pixSize, pixSize); };
  370. None
  371. None
  372. None
  373. None
  374. None
  375. None
  376. None
  377. None
  378. None

  379.        

  380. None

  381.   

  382. None