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
360
GraphQL 簡介
david50407
0
110
Open Source Software and Culture -- Crystal
david50407
1
200
簡潔優雅的語言 —— Crystal
david50407
0
160
各種工具介紹
david50407
1
92
Crystal
david50407
0
280
Mail Server
david50407
0
86
Git 基礎講座
david50407
0
380
PHP Cookie/Session MySQL 資料庫操作
david50407
1
190

Other Decks in Education

See All in Education
CompTIA Security+ SY0-601 Resumo
mariliarochas
2
2.6k
情報処理工学問題集 /infoeng_practices
kfujita
0
120
Ch2_-_Partie_1.pdf
bernhardsvt
0
110
HP用_松尾研紹介資料.pdf
matsuolab
0
170
アニメに学ぶチームの多様性とコンピテンシー
terahide
0
240
2409_CompanyInfo_Hanji_published.pdf
yosukemurata
0
360
LLMs for Social Simulation: Progress, Opportunities and Challenges
wingnus
1
100
Medicare 101 for 2025
robinlee
PRO
0
230
Zoom-ohjeet
matleenalaakso
7
7.2k
HTML5 and the Open Web Platform - Lecture 3 - Web Technologies (1019888BNR)
signer
PRO
1
2.6k
世界のオープンソースロボットたち #1
shiba_8ro
0
140
Design Guidelines and Models - Lecture 5 - Human-Computer Interaction (1023841ANR)
signer
PRO
0
680

Featured

See All Featured
Art, The Web, and Tiny UX
lynnandtonic
297
20k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
169
50k
Building a Modern Day 
E-commerce SEO Strategy
aleyda
38
6.9k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Fashionably flexible responsive web design (full day workshop)
malarkey
405
65k
Mobile First: as difficult as doing things right
swwweet
222
8.9k
Scaling GitHub
holman
458
140k
Adopting Sorbet at Scale
ufuk
73
9.1k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.3k
Imperfection Machines: The Place of Print at Facebook
scottboms
265
13k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
27
4.3k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
42
9.2k

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