表現力豊かなJavaScript：プロジェクト：ペイント

内容

• はじめに
• 値、タイプ、および演算子
• プログラム構成
• 機能
• データ構造：オブジェクトと配列
• 高階関数
• オブジェクトの秘密の生活
• プロジェクト：電子生活
• 検索とエラー処理
• 正規表現
• モジュール
• プロジェクト：プログラミング言語
• JavaScriptとブラウザー
• ドキュメントオブジェクトモデル
• イベント処理
• プロジェクト：プラットフォームゲーム
• キャンバスに描く
• HTTP
• フォームとフォームフィールド
• プロジェクト：ペイント
• Node.js
• プロジェクト：経験共有ウェブサイト
• コードのサンドボックス

さまざまな色を見ています。 空白のキャンバスを見ます。 それから、詩が生まれる言葉、音楽が生まれる音符として色を適用しようとします。

ジョアン・ミロ

前の章の資料は、単純なWebアプリケーションを作成するために必要なすべてを提供します。 それが私たちのすることです。

アプリケーションは、Microsoft Paintに似たブラウザ描画プログラムになります。 その助けを借りて、画像でファイルを開き、マウスでそれらをペイントし、それらを保存することが可能になります。 これは次のようになります。

簡単な描画プログラム

コンピューターにクールドロー。 材料、スキル、才能について心配する必要はありません。 あなたはちょうどそれを取り、あなたはがらくたを始めます。

実装

プログラムインターフェイスの上部に大きな要素が表示されます

 ,      .    ,     ,      .     ,   ,    .. 
 
      "mousedown"  ,   ,   .  , ,    "mousemove",      ,           . 
 
         .         fillStyle, strokeStyle,  lineWidth     . 
 
       .    file,       .   URL     . 
 
    .  save       .    ,       .   ,   . 
 
  DOM 
       30  DOM.   -  . 
 
      DOM  HTML.     HTML    –   DOM        ,    -   .       querySelector   ,     DOM  . 
 
      DOM      JavaScript,   .       DOM   JavaScript.      13,      DOM  .      ,    . 
 
   –    elt   13.        ,     ,  ,    ,      . 
 
 function elt(name, attributes) { var node = document.createElement(name); if (attributes) { for (var attr in attributes) if (attributes.hasOwnProperty(attr)) node.setAttribute(attr, attributes[attr]); } for (var i = 2; i < arguments.length; i++) { var child = arguments[i]; if (typeof child == "string") child = document.createTextNode(child); node.appendChild(child); } return node; } 
 
       ,       . 
 
  
    –  createPaint,      DOM,     .      ,    controls,           . 
 
 var controls = Object.create(null); function createPaint(parent) { var canvas = elt("canvas", {width: 500, height: 300}); var cx = canvas.getContext("2d"); var toolbar = elt("div", {class: "toolbar"}); for (var name in controls) toolbar.appendChild(controls[name](cx)); var panel = elt("div", {class: "picturepanel"}, canvas); parent.appendChild(elt("div", null, panel, toolbar)); } 
 
           ,    –   .        –    ,   (  fillStyle)    (  lineWidth). 
 
          ,      ,     . 
 
   
   ,    –  ,    .      controls,        ,           ,       .       ,          . 
 
 var tools = Object.create(null); controls.tool = function(cx) { var select = elt("select"); for (var name in tools) select.appendChild(elt("option", null, name)); cx.canvas.addEventListener("mousedown", function(event) { if (event.which == 1) { tools[select.value](event, cx); event.preventDefault(); } }); return elt("span", null, "Tool: ", select); }; 
 
   tool        ,    "mousedown"          ,    event  context.    preventDefault,          . 
 
    – ,     .   ,           .    13   getBoundingClientRect     .  ,   ,     .    clientX  clientY      ,                . 
 
 function relativePos(event, element) { var rect = element.getBoundingClientRect(); return {x: Math.floor(event.clientX - rect.left), y: Math.floor(event.clientY - rect.top)}; } 
 
       "mousemove",    .  trackDrag       . 
 
 function trackDrag(onMove, onEnd) { function end(event) { removeEventListener("mousemove", onMove); removeEventListener("mouseup", end); if (onEnd) onEnd(event); } addEventListener("mousemove", onMove); addEventListener("mouseup", end); } 
 
    .  – ,      "mousemove",   – ,     .      . 
 
           . 
 
 tools.Line = function(event, cx, onEnd) { cx.lineCap = "round"; var pos = relativePos(event, cx.canvas); trackDrag(function(event) { cx.beginPath(); cx.moveTo(pos.x, pos.y); pos = relativePos(event, cx.canvas); cx.lineTo(pos.x, pos.y); cx.stroke(); }, onEnd); }; 
 
      lineCap  “round”, -      ,   ,     .     ,      .     ,      ,     lineCap  . 
 
 ,    "mousemove",  ,   ,         ,      strokeStyle  lineWidth,     . 
 
  onEnd   ,  trackDrag.        ,        undefined,       .        ,  erase,      . 
 
 tools.Erase = function(event, cx) { cx.globalCompositeOperation = "destination-out"; tools.Line(event, cx, function() { cx.globalCompositeOperation = "source-over"; }); }; 
 
  globalCompositeOperation   ,        .  ,   "source-over",  ,  ,  ,   .   ,    ,     ,   . 
 
  “erase”  globalCompositeOperation  "destination-out",    ,     . 
 
         .          (     strokeStyle  lineWidth  ),   . ,   ,  . 
 
     
 ,              ,      . 
 
   18      .        .          ,            .    - .   - "date", "email", "url"  "number".      .      – “text”,     ,     ,       . ,   ,       ,       ,       . 
 
 controls.color = function(cx) { var input = elt("input", {type: "color"}); input.addEventListener("change", function() { cx.fillStyle = input.value; cx.strokeStyle = input.value; }); return elt("span", null, "Color: ", input); }; 
 
     color     fillStyle  strokeStyle    . 
 
      . 
 
 controls.brushSize = function(cx) { var select = elt("select"); var sizes = [1, 2, 3, 5, 8, 12, 25, 35, 50, 75, 100]; sizes.forEach(function(size) { select.appendChild(elt("option", {value: size}, size + " pixels")); }); select.addEventListener("change", function() { cx.lineWidth = select.value; }); return elt("span", null, "Brush size: ", select); }; 
 
       ,    ,    lineWidth    . 
 
  
  ,     ,      URL  .     http:  https:, URL      ,      .  URL  ,   HTML : 
 
 data:text/html,<h1 style="color:red">Hello!</h1> 
 
  URL    , , ,       .           ,  ,      - . 
 
       toDataURL,   URL  ,        .            .        URL   .       ,      href  ,            . 
 
 controls.save = function(cx) { var link = elt("a", {href: "/"}, "Save"); function update() { try { link.href = cx.canvas.toDataURL(); } catch (e) { if (e instanceof SecurityError) link.href = "javascript:alert(" + JSON.stringify("Can't save: " + e.toString()) + ")"; else throw e; } } link.addEventListener("mouseover", update); link.addEventListener("focus", update); return link; }; 
 
  ,          ,       ,      ,     . 
 
     ,      URL  ,    .       . 
 
           .     URL   ,      ,       (.  17),    ,    ,    . 
 
        (   ).        ,      . 
 
     ,  ,  ,    ,     «».  ,  URL  ,     «» .    ,     . 
 
     try/catch   update   .   «»,  toDataURL  ,   SecurityError.           URL   javascript:.     ,   ,     ,   . 
 
   
              URL.    ,      URL     . 
 
 function loadImageURL(cx, url) { var image = document.createElement("img"); image.addEventListener("load", function() { var color = cx.fillStyle, size = cx.lineWidth; cx.canvas.width = image.width; cx.canvas.height = image.height; cx.drawImage(image, 0, 0); cx.fillStyle = color; cx.strokeStyle = color; cx.lineWidth = size; }); image.src = url; } 
 
     ,    . -          (fillStyle  lineWidth),              . 
 
         FileReader   18.     readAsText        readAsDataURL –   ,   .   ,   ,  URL  ,     loadImageURL    . 
 
 controls.openFile = function(cx) { var input = elt("input", {type: "file"}); input.addEventListener("change", function() { if (input.files.length == 0) return; var reader = new FileReader(); reader.addEventListener("load", function() { loadImageURL(cx, reader.result); }); reader.readAsDataURL(input.files[0]); }); return elt("div", null, "Open file: ", input); }; 
 
    URL  .       ,       URL,        “change”.         ,     –    Enter,     load. 
 
 controls.openURL = function(cx) { var input = elt("input", {type: "text"}); var form = elt("form", null, "Open URL: ", input, elt("button", {type: "submit"}, "load")); form.addEventListener("submit", function(event) { event.preventDefault(); loadImageURL(cx, form.querySelector("input").value); }); return form; }; 
 
      ,   ,      . 
 
  
        ,    ,     . 
 
 tools.Text = function(event, cx) { var text = prompt("Text:", ""); if (text) { var pos = relativePos(event, cx.canvas); cx.font = Math.max(7, cx.lineWidth) + "px sans-serif"; cx.fillText(text, pos.x, pos.y); } }; 
 
          ,        sans-serif   ,    .   – 7 ,      . 
 
      - – “”.      ,    ,            . 
 
 tools.Spray = function(event, cx) { var radius = cx.lineWidth / 2; var area = radius * radius * Math.PI; var dotsPerTick = Math.ceil(area / 30); var currentPos = relativePos(event, cx.canvas); var spray = setInterval(function() { for (var i = 0; i < dotsPerTick; i++) { var offset = randomPointInRadius(radius); cx.fillRect(currentPos.x + offset.x, currentPos.y + offset.y, 1, 1); } }, 25); trackDrag(function(event) { currentPos = relativePos(event, cx.canvas); }, function() { clearInterval(spray); }); }; 
 
   setInterval      25 ,    .  trackDrag   ,  currentPos     ,       . 
 
  ,         ,           30.         randomPointInRadius. 
 
 function randomPointInRadius(radius) { for (;;) { var x = Math.random() * 2 - 1; var y = Math.random() * 2 - 1; if (x * x + y * y <= 1) return {x: x * radius, y: y * radius}; } } 
 
        (-1,-1)  (1,1).   ,  ,         1.    ,    ,   . 
 
      .       ,        Math.sin  Math.cos   .            .    ,    ,   . 
 
      .    . 
 
 <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body> 
 
  
        .    . 
 
  
   Rectangle,   (.  fillRect   16)  .      ,     ,    ,    . ,         . 
 
   ,  ,        .           ,       ,    ? 
 
   ,    position: absolute,      13.   ,      .  pageX  pageY          ,      left, top, width  height. 
 
 <script> tools.Rectangle = function(event, cx) { //   }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body> 
 
   
      –  ,        ,    .   . 
 
        .  toDataURL    ,       URL   .       getImageData,          width, height  data.   data     0  255,        - red, green, blue  alpha (). 
 
        ,  ,    (  –  ),   ,      . 
 
 function pixelAt(cx, x, y) { var data = cx.getImageData(x, y, 1, 1); console.log(data.data); } var canvas = document.createElement("canvas"); var cx = canvas.getContext("2d"); pixelAt(cx, 10, 10); // → [0, 0, 0, 0] cx.fillStyle = "red"; cx.fillRect(10, 10, 1, 1); pixelAt(cx, 10, 10); // → [255, 0, 0, 255] 
 
  getImageData     x  y,    ,      . 
 
     ,         .        color   .  ,  fillStyle  strokeStyle    ,   . 
 
 ,      ,   CSS,    rgb(R, G, B),      15. 
 
  getImageData    ,   toDataURL –   ,      ,    .   try/catch        alert. 
 
 <script> tools["Pick color"] = function(event, cx) { // Your code here. }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body> 
 
  
    ,  ,        . ,           ,   ,     -   . 
 
              ,    .       ,      ,      ,         (   ),    ,     . 
 
     , ,       : 
 
  
 
          ,   ,      ,   . 
 
    getImageData    .  ,       ,          .           7,  ,      .       (x,y)    (x + y × width) × 4 
 
      (),          () . 
 
            , ,   ,       .         .      -      ,    9.        ,    ,       ,    ,    . 
 
      .      ,       .  ,  ,    . 
 
       fillRect,   -  ,  ,     . 
 
 <script> tools["Flood fill"] = function(event, cx) { //   }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body> 
 ,      .    ,     ,      .     ,   ,    .. 
 
      "mousedown"  ,   ,   .  , ,    "mousemove",      ,           . 
 
         .         fillStyle, strokeStyle,  lineWidth     . 
 
       .    file,       .   URL     . 
 
    .  save       .    ,       .   ,   . 
 
  DOM 
       30  DOM.   -  . 
 
      DOM  HTML.     HTML    –   DOM        ,    -   .       querySelector   ,     DOM  . 
 
      DOM      JavaScript,   .       DOM   JavaScript.      13,      DOM  .      ,    . 
 
   –    elt   13.        ,     ,  ,    ,      . 
 
 function elt(name, attributes) { var node = document.createElement(name); if (attributes) { for (var attr in attributes) if (attributes.hasOwnProperty(attr)) node.setAttribute(attr, attributes[attr]); } for (var i = 2; i < arguments.length; i++) { var child = arguments[i]; if (typeof child == "string") child = document.createTextNode(child); node.appendChild(child); } return node; } 
 
       ,       . 
 
  
    –  createPaint,      DOM,     .      ,    controls,           . 
 
 var controls = Object.create(null); function createPaint(parent) { var canvas = elt("canvas", {width: 500, height: 300}); var cx = canvas.getContext("2d"); var toolbar = elt("div", {class: "toolbar"}); for (var name in controls) toolbar.appendChild(controls[name](cx)); var panel = elt("div", {class: "picturepanel"}, canvas); parent.appendChild(elt("div", null, panel, toolbar)); } 
 
           ,    –   .        –    ,   (  fillStyle)    (  lineWidth). 
 
          ,      ,     . 
 
   
   ,    –  ,    .      controls,        ,           ,       .       ,          . 
 
 var tools = Object.create(null); controls.tool = function(cx) { var select = elt("select"); for (var name in tools) select.appendChild(elt("option", null, name)); cx.canvas.addEventListener("mousedown", function(event) { if (event.which == 1) { tools[select.value](event, cx); event.preventDefault(); } }); return elt("span", null, "Tool: ", select); }; 
 
   tool        ,    "mousedown"          ,    event  context.    preventDefault,          . 
 
    – ,     .   ,           .    13   getBoundingClientRect     .  ,   ,     .    clientX  clientY      ,                . 
 
 function relativePos(event, element) { var rect = element.getBoundingClientRect(); return {x: Math.floor(event.clientX - rect.left), y: Math.floor(event.clientY - rect.top)}; } 
 
       "mousemove",    .  trackDrag       . 
 
 function trackDrag(onMove, onEnd) { function end(event) { removeEventListener("mousemove", onMove); removeEventListener("mouseup", end); if (onEnd) onEnd(event); } addEventListener("mousemove", onMove); addEventListener("mouseup", end); } 
 
    .  – ,      "mousemove",   – ,     .      . 
 
           . 
 
 tools.Line = function(event, cx, onEnd) { cx.lineCap = "round"; var pos = relativePos(event, cx.canvas); trackDrag(function(event) { cx.beginPath(); cx.moveTo(pos.x, pos.y); pos = relativePos(event, cx.canvas); cx.lineTo(pos.x, pos.y); cx.stroke(); }, onEnd); }; 
 
      lineCap  “round”, -      ,   ,     .     ,      .     ,      ,     lineCap  . 
 
 ,    "mousemove",  ,   ,         ,      strokeStyle  lineWidth,     . 
 
  onEnd   ,  trackDrag.        ,        undefined,       .        ,  erase,      . 
 
 tools.Erase = function(event, cx) { cx.globalCompositeOperation = "destination-out"; tools.Line(event, cx, function() { cx.globalCompositeOperation = "source-over"; }); }; 
 
  globalCompositeOperation   ,        .  ,   "source-over",  ,  ,  ,   .   ,    ,     ,   . 
 
  “erase”  globalCompositeOperation  "destination-out",    ,     . 
 
         .          (     strokeStyle  lineWidth  ),   . ,   ,  . 
 
     
 ,              ,      . 
 
   18      .        .          ,            .    - .   - "date", "email", "url"  "number".      .      – “text”,     ,     ,       . ,   ,       ,       ,       . 
 
 controls.color = function(cx) { var input = elt("input", {type: "color"}); input.addEventListener("change", function() { cx.fillStyle = input.value; cx.strokeStyle = input.value; }); return elt("span", null, "Color: ", input); }; 
 
     color     fillStyle  strokeStyle    . 
 
      . 
 
 controls.brushSize = function(cx) { var select = elt("select"); var sizes = [1, 2, 3, 5, 8, 12, 25, 35, 50, 75, 100]; sizes.forEach(function(size) { select.appendChild(elt("option", {value: size}, size + " pixels")); }); select.addEventListener("change", function() { cx.lineWidth = select.value; }); return elt("span", null, "Brush size: ", select); }; 
 
       ,    ,    lineWidth    . 
 
  
  ,     ,      URL  .     http:  https:, URL      ,      .  URL  ,   HTML : 
 
 data:text/html,<h1 style="color:red">Hello!</h1> 
 
  URL    , , ,       .           ,  ,      - . 
 
       toDataURL,   URL  ,        .            .        URL   .       ,      href  ,            . 
 
 controls.save = function(cx) { var link = elt("a", {href: "/"}, "Save"); function update() { try { link.href = cx.canvas.toDataURL(); } catch (e) { if (e instanceof SecurityError) link.href = "javascript:alert(" + JSON.stringify("Can't save: " + e.toString()) + ")"; else throw e; } } link.addEventListener("mouseover", update); link.addEventListener("focus", update); return link; }; 
 
  ,          ,       ,      ,     . 
 
     ,      URL  ,    .       . 
 
           .     URL   ,      ,       (.  17),    ,    ,    . 
 
        (   ).        ,      . 
 
     ,  ,  ,    ,     «».  ,  URL  ,     «» .    ,     . 
 
     try/catch   update   .   «»,  toDataURL  ,   SecurityError.           URL   javascript:.     ,   ,     ,   . 
 
   
              URL.    ,      URL     . 
 
 function loadImageURL(cx, url) { var image = document.createElement("img"); image.addEventListener("load", function() { var color = cx.fillStyle, size = cx.lineWidth; cx.canvas.width = image.width; cx.canvas.height = image.height; cx.drawImage(image, 0, 0); cx.fillStyle = color; cx.strokeStyle = color; cx.lineWidth = size; }); image.src = url; } 
 
     ,    . -          (fillStyle  lineWidth),              . 
 
         FileReader   18.     readAsText        readAsDataURL –   ,   .   ,   ,  URL  ,     loadImageURL    . 
 
 controls.openFile = function(cx) { var input = elt("input", {type: "file"}); input.addEventListener("change", function() { if (input.files.length == 0) return; var reader = new FileReader(); reader.addEventListener("load", function() { loadImageURL(cx, reader.result); }); reader.readAsDataURL(input.files[0]); }); return elt("div", null, "Open file: ", input); }; 
 
    URL  .       ,       URL,        “change”.         ,     –    Enter,     load. 
 
 controls.openURL = function(cx) { var input = elt("input", {type: "text"}); var form = elt("form", null, "Open URL: ", input, elt("button", {type: "submit"}, "load")); form.addEventListener("submit", function(event) { event.preventDefault(); loadImageURL(cx, form.querySelector("input").value); }); return form; }; 
 
      ,   ,      . 
 
  
        ,    ,     . 
 
 tools.Text = function(event, cx) { var text = prompt("Text:", ""); if (text) { var pos = relativePos(event, cx.canvas); cx.font = Math.max(7, cx.lineWidth) + "px sans-serif"; cx.fillText(text, pos.x, pos.y); } }; 
 
          ,        sans-serif   ,    .   – 7 ,      . 
 
      - – “”.      ,    ,            . 
 
 tools.Spray = function(event, cx) { var radius = cx.lineWidth / 2; var area = radius * radius * Math.PI; var dotsPerTick = Math.ceil(area / 30); var currentPos = relativePos(event, cx.canvas); var spray = setInterval(function() { for (var i = 0; i < dotsPerTick; i++) { var offset = randomPointInRadius(radius); cx.fillRect(currentPos.x + offset.x, currentPos.y + offset.y, 1, 1); } }, 25); trackDrag(function(event) { currentPos = relativePos(event, cx.canvas); }, function() { clearInterval(spray); }); }; 
 
   setInterval      25 ,    .  trackDrag   ,  currentPos     ,       . 
 
  ,         ,           30.         randomPointInRadius. 
 
 function randomPointInRadius(radius) { for (;;) { var x = Math.random() * 2 - 1; var y = Math.random() * 2 - 1; if (x * x + y * y <= 1) return {x: x * radius, y: y * radius}; } } 
 
        (-1,-1)  (1,1).   ,  ,         1.    ,    ,   . 
 
      .       ,        Math.sin  Math.cos   .            .    ,    ,   . 
 
      .    . 
 
 <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body> 
 
  
        .    . 
 
  
   Rectangle,   (.  fillRect   16)  .      ,     ,    ,    . ,         . 
 
   ,  ,        .           ,       ,    ? 
 
   ,    position: absolute,      13.   ,      .  pageX  pageY          ,      left, top, width  height. 
 
 <script> tools.Rectangle = function(event, cx) { //   }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body> 
 
   
      –  ,        ,    .   . 
 
        .  toDataURL    ,       URL   .       getImageData,          width, height  data.   data     0  255,        - red, green, blue  alpha (). 
 
        ,  ,    (  –  ),   ,      . 
 
 function pixelAt(cx, x, y) { var data = cx.getImageData(x, y, 1, 1); console.log(data.data); } var canvas = document.createElement("canvas"); var cx = canvas.getContext("2d"); pixelAt(cx, 10, 10); // → [0, 0, 0, 0] cx.fillStyle = "red"; cx.fillRect(10, 10, 1, 1); pixelAt(cx, 10, 10); // → [255, 0, 0, 255] 
 
  getImageData     x  y,    ,      . 
 
     ,         .        color   .  ,  fillStyle  strokeStyle    ,   . 
 
 ,      ,   CSS,    rgb(R, G, B),      15. 
 
  getImageData    ,   toDataURL –   ,      ,    .   try/catch        alert. 
 
 <script> tools["Pick color"] = function(event, cx) { // Your code here. }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body> 
 
  
    ,  ,        . ,           ,   ,     -   . 
 
              ,    .       ,      ,      ,         (   ),    ,     . 
 
     , ,       : 
 
  
 
          ,   ,      ,   . 
 
    getImageData    .  ,       ,          .           7,  ,      .       (x,y)    (x + y × width) × 4 
 
      (),          () . 
 
            , ,   ,       .         .      -      ,    9.        ,    ,       ,    ,    . 
 
      .      ,       .  ,  ,    . 
 
       fillRect,   -  ,  ,     . 
 
 <script> tools["Flood fill"] = function(event, cx) { //   }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body> 
 ,      .    ,     ,      .     ,   ,    .. 
 
      "mousedown"  ,   ,   .  , ,    "mousemove",      ,           . 
 
         .         fillStyle, strokeStyle,  lineWidth     . 
 
       .    file,       .   URL     . 
 
    .  save       .    ,       .   ,   . 
 
  DOM 
       30  DOM.   -  . 
 
      DOM  HTML.     HTML    –   DOM        ,    -   .       querySelector   ,     DOM  . 
 
      DOM      JavaScript,   .       DOM   JavaScript.      13,      DOM  .      ,    . 
 
   –    elt   13.        ,     ,  ,    ,      . 
 
 function elt(name, attributes) { var node = document.createElement(name); if (attributes) { for (var attr in attributes) if (attributes.hasOwnProperty(attr)) node.setAttribute(attr, attributes[attr]); } for (var i = 2; i < arguments.length; i++) { var child = arguments[i]; if (typeof child == "string") child = document.createTextNode(child); node.appendChild(child); } return node; } 
 
       ,       . 
 
  
    –  createPaint,      DOM,     .      ,    controls,           . 
 
 var controls = Object.create(null); function createPaint(parent) { var canvas = elt("canvas", {width: 500, height: 300}); var cx = canvas.getContext("2d"); var toolbar = elt("div", {class: "toolbar"}); for (var name in controls) toolbar.appendChild(controls[name](cx)); var panel = elt("div", {class: "picturepanel"}, canvas); parent.appendChild(elt("div", null, panel, toolbar)); } 
 
           ,    –   .        –    ,   (  fillStyle)    (  lineWidth). 
 
          ,      ,     . 
 
   
   ,    –  ,    .      controls,        ,           ,       .       ,          . 
 
 var tools = Object.create(null); controls.tool = function(cx) { var select = elt("select"); for (var name in tools) select.appendChild(elt("option", null, name)); cx.canvas.addEventListener("mousedown", function(event) { if (event.which == 1) { tools[select.value](event, cx); event.preventDefault(); } }); return elt("span", null, "Tool: ", select); }; 
 
   tool        ,    "mousedown"          ,    event  context.    preventDefault,          . 
 
    – ,     .   ,           .    13   getBoundingClientRect     .  ,   ,     .    clientX  clientY      ,                . 
 
 function relativePos(event, element) { var rect = element.getBoundingClientRect(); return {x: Math.floor(event.clientX - rect.left), y: Math.floor(event.clientY - rect.top)}; } 
 
       "mousemove",    .  trackDrag       . 
 
 function trackDrag(onMove, onEnd) { function end(event) { removeEventListener("mousemove", onMove); removeEventListener("mouseup", end); if (onEnd) onEnd(event); } addEventListener("mousemove", onMove); addEventListener("mouseup", end); } 
 
    .  – ,      "mousemove",   – ,     .      . 
 
           . 
 
 tools.Line = function(event, cx, onEnd) { cx.lineCap = "round"; var pos = relativePos(event, cx.canvas); trackDrag(function(event) { cx.beginPath(); cx.moveTo(pos.x, pos.y); pos = relativePos(event, cx.canvas); cx.lineTo(pos.x, pos.y); cx.stroke(); }, onEnd); }; 
 
      lineCap  “round”, -      ,   ,     .     ,      .     ,      ,     lineCap  . 
 
 ,    "mousemove",  ,   ,         ,      strokeStyle  lineWidth,     . 
 
  onEnd   ,  trackDrag.        ,        undefined,       .        ,  erase,      . 
 
 tools.Erase = function(event, cx) { cx.globalCompositeOperation = "destination-out"; tools.Line(event, cx, function() { cx.globalCompositeOperation = "source-over"; }); }; 
 
  globalCompositeOperation   ,        .  ,   "source-over",  ,  ,  ,   .   ,    ,     ,   . 
 
  “erase”  globalCompositeOperation  "destination-out",    ,     . 
 
         .          (     strokeStyle  lineWidth  ),   . ,   ,  . 
 
     
 ,              ,      . 
 
   18      .        .          ,            .    - .   - "date", "email", "url"  "number".      .      – “text”,     ,     ,       . ,   ,       ,       ,       . 
 
 controls.color = function(cx) { var input = elt("input", {type: "color"}); input.addEventListener("change", function() { cx.fillStyle = input.value; cx.strokeStyle = input.value; }); return elt("span", null, "Color: ", input); }; 
 
     color     fillStyle  strokeStyle    . 
 
      . 
 
 controls.brushSize = function(cx) { var select = elt("select"); var sizes = [1, 2, 3, 5, 8, 12, 25, 35, 50, 75, 100]; sizes.forEach(function(size) { select.appendChild(elt("option", {value: size}, size + " pixels")); }); select.addEventListener("change", function() { cx.lineWidth = select.value; }); return elt("span", null, "Brush size: ", select); }; 
 
       ,    ,    lineWidth    . 
 
  
  ,     ,      URL  .     http:  https:, URL      ,      .  URL  ,   HTML : 
 
 data:text/html,<h1 style="color:red">Hello!</h1> 
 
  URL    , , ,       .           ,  ,      - . 
 
       toDataURL,   URL  ,        .            .        URL   .       ,      href  ,            . 
 
 controls.save = function(cx) { var link = elt("a", {href: "/"}, "Save"); function update() { try { link.href = cx.canvas.toDataURL(); } catch (e) { if (e instanceof SecurityError) link.href = "javascript:alert(" + JSON.stringify("Can't save: " + e.toString()) + ")"; else throw e; } } link.addEventListener("mouseover", update); link.addEventListener("focus", update); return link; }; 
 
  ,          ,       ,      ,     . 
 
     ,      URL  ,    .       . 
 
           .     URL   ,      ,       (.  17),    ,    ,    . 
 
        (   ).        ,      . 
 
     ,  ,  ,    ,     «».  ,  URL  ,     «» .    ,     . 
 
     try/catch   update   .   «»,  toDataURL  ,   SecurityError.           URL   javascript:.     ,   ,     ,   . 
 
   
              URL.    ,      URL     . 
 
 function loadImageURL(cx, url) { var image = document.createElement("img"); image.addEventListener("load", function() { var color = cx.fillStyle, size = cx.lineWidth; cx.canvas.width = image.width; cx.canvas.height = image.height; cx.drawImage(image, 0, 0); cx.fillStyle = color; cx.strokeStyle = color; cx.lineWidth = size; }); image.src = url; } 
 
     ,    . -          (fillStyle  lineWidth),              . 
 
         FileReader   18.     readAsText        readAsDataURL –   ,   .   ,   ,  URL  ,     loadImageURL    . 
 
 controls.openFile = function(cx) { var input = elt("input", {type: "file"}); input.addEventListener("change", function() { if (input.files.length == 0) return; var reader = new FileReader(); reader.addEventListener("load", function() { loadImageURL(cx, reader.result); }); reader.readAsDataURL(input.files[0]); }); return elt("div", null, "Open file: ", input); }; 
 
    URL  .       ,       URL,        “change”.         ,     –    Enter,     load. 
 
 controls.openURL = function(cx) { var input = elt("input", {type: "text"}); var form = elt("form", null, "Open URL: ", input, elt("button", {type: "submit"}, "load")); form.addEventListener("submit", function(event) { event.preventDefault(); loadImageURL(cx, form.querySelector("input").value); }); return form; }; 
 
      ,   ,      . 
 
  
        ,    ,     . 
 
 tools.Text = function(event, cx) { var text = prompt("Text:", ""); if (text) { var pos = relativePos(event, cx.canvas); cx.font = Math.max(7, cx.lineWidth) + "px sans-serif"; cx.fillText(text, pos.x, pos.y); } }; 
 
          ,        sans-serif   ,    .   – 7 ,      . 
 
      - – “”.      ,    ,            . 
 
 tools.Spray = function(event, cx) { var radius = cx.lineWidth / 2; var area = radius * radius * Math.PI; var dotsPerTick = Math.ceil(area / 30); var currentPos = relativePos(event, cx.canvas); var spray = setInterval(function() { for (var i = 0; i < dotsPerTick; i++) { var offset = randomPointInRadius(radius); cx.fillRect(currentPos.x + offset.x, currentPos.y + offset.y, 1, 1); } }, 25); trackDrag(function(event) { currentPos = relativePos(event, cx.canvas); }, function() { clearInterval(spray); }); }; 
 
   setInterval      25 ,    .  trackDrag   ,  currentPos     ,       . 
 
  ,         ,           30.         randomPointInRadius. 
 
 function randomPointInRadius(radius) { for (;;) { var x = Math.random() * 2 - 1; var y = Math.random() * 2 - 1; if (x * x + y * y <= 1) return {x: x * radius, y: y * radius}; } } 
 
        (-1,-1)  (1,1).   ,  ,         1.    ,    ,   . 
 
      .       ,        Math.sin  Math.cos   .            .    ,    ,   . 
 
      .    . 
 
 <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body> 
 
  
        .    . 
 
  
   Rectangle,   (.  fillRect   16)  .      ,     ,    ,    . ,         . 
 
   ,  ,        .           ,       ,    ? 
 
   ,    position: absolute,      13.   ,      .  pageX  pageY          ,      left, top, width  height. 
 
 <script> tools.Rectangle = function(event, cx) { //   }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body> 
 
   
      –  ,        ,    .   . 
 
        .  toDataURL    ,       URL   .       getImageData,          width, height  data.   data     0  255,        - red, green, blue  alpha (). 
 
        ,  ,    (  –  ),   ,      . 
 
 function pixelAt(cx, x, y) { var data = cx.getImageData(x, y, 1, 1); console.log(data.data); } var canvas = document.createElement("canvas"); var cx = canvas.getContext("2d"); pixelAt(cx, 10, 10); // → [0, 0, 0, 0] cx.fillStyle = "red"; cx.fillRect(10, 10, 1, 1); pixelAt(cx, 10, 10); // → [255, 0, 0, 255] 
 
  getImageData     x  y,    ,      . 
 
     ,         .        color   .  ,  fillStyle  strokeStyle    ,   . 
 
 ,      ,   CSS,    rgb(R, G, B),      15. 
 
  getImageData    ,   toDataURL –   ,      ,    .   try/catch        alert. 
 
 <script> tools["Pick color"] = function(event, cx) { // Your code here. }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body> 
 
  
    ,  ,        . ,           ,   ,     -   . 
 
              ,    .       ,      ,      ,         (   ),    ,     . 
 
     , ,       : 
 
  
 
          ,   ,      ,   . 
 
    getImageData    .  ,       ,          .           7,  ,      .       (x,y)    (x + y × width) × 4 
 
      (),          () . 
 
            , ,   ,       .         .      -      ,    9.        ,    ,       ,    ,    . 
 
      .      ,       .  ,  ,    . 
 
       fillRect,   -  ,  ,     . 
 
 <script> tools["Flood fill"] = function(event, cx) { //   }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body> 

, . , , . , , ..

"mousedown" , , . , , "mousemove", , .

. fillStyle, strokeStyle, lineWidth .

. file, . URL .

. save . , . , .

DOM
30 DOM. - .

DOM HTML. HTML – DOM , - . querySelector , DOM .

DOM JavaScript, . DOM JavaScript. 13, DOM . , .

– elt 13. , , , , .

function elt(name, attributes) { var node = document.createElement(name); if (attributes) { for (var attr in attributes) if (attributes.hasOwnProperty(attr)) node.setAttribute(attr, attributes[attr]); } for (var i = 2; i < arguments.length; i++) { var child = arguments[i]; if (typeof child == "string") child = document.createTextNode(child); node.appendChild(child); } return node; }

, .


– createPaint, DOM, . , controls, .

var controls = Object.create(null); function createPaint(parent) { var canvas = elt("canvas", {width: 500, height: 300}); var cx = canvas.getContext("2d"); var toolbar = elt("div", {class: "toolbar"}); for (var name in controls) toolbar.appendChild(controls[name](cx)); var panel = elt("div", {class: "picturepanel"}, canvas); parent.appendChild(elt("div", null, panel, toolbar)); }

, – . – , ( fillStyle) ( lineWidth).

, , .


, – , . controls, , , . , .

var tools = Object.create(null); controls.tool = function(cx) { var select = elt("select"); for (var name in tools) select.appendChild(elt("option", null, name)); cx.canvas.addEventListener("mousedown", function(event) { if (event.which == 1) { tools[select.value](event, cx); event.preventDefault(); } }); return elt("span", null, "Tool: ", select); };

tool , "mousedown" , event context. preventDefault, .

– , . , . 13 getBoundingClientRect . , , . clientX clientY , .

function relativePos(event, element) { var rect = element.getBoundingClientRect(); return {x: Math.floor(event.clientX - rect.left), y: Math.floor(event.clientY - rect.top)}; }

"mousemove", . trackDrag .

function trackDrag(onMove, onEnd) { function end(event) { removeEventListener("mousemove", onMove); removeEventListener("mouseup", end); if (onEnd) onEnd(event); } addEventListener("mousemove", onMove); addEventListener("mouseup", end); }

. – , "mousemove", – , . .

.

tools.Line = function(event, cx, onEnd) { cx.lineCap = "round"; var pos = relativePos(event, cx.canvas); trackDrag(function(event) { cx.beginPath(); cx.moveTo(pos.x, pos.y); pos = relativePos(event, cx.canvas); cx.lineTo(pos.x, pos.y); cx.stroke(); }, onEnd); };

lineCap “round”, - , , . , . , , lineCap .

, "mousemove", , , , strokeStyle lineWidth, .

onEnd , trackDrag. , undefined, . , erase, .

tools.Erase = function(event, cx) { cx.globalCompositeOperation = "destination-out"; tools.Line(event, cx, function() { cx.globalCompositeOperation = "source-over"; }); };

globalCompositeOperation , . , "source-over", , , , . , , , .

“erase” globalCompositeOperation "destination-out", , .

. ( strokeStyle lineWidth ), . , , .


, , .

18 . . , . - . - "date", "email", "url" "number". . – “text”, , , . , , , , .

controls.color = function(cx) { var input = elt("input", {type: "color"}); input.addEventListener("change", function() { cx.fillStyle = input.value; cx.strokeStyle = input.value; }); return elt("span", null, "Color: ", input); };

color fillStyle strokeStyle .

.

controls.brushSize = function(cx) { var select = elt("select"); var sizes = [1, 2, 3, 5, 8, 12, 25, 35, 50, 75, 100]; sizes.forEach(function(size) { select.appendChild(elt("option", {value: size}, size + " pixels")); }); select.addEventListener("change", function() { cx.lineWidth = select.value; }); return elt("span", null, "Brush size: ", select); };

, , lineWidth .


, , URL . http: https:, URL , . URL , HTML :

data:text/html,<h1 style="color:red">Hello!</h1>

URL , , , . , , - .

toDataURL, URL , . . URL . , href , .

controls.save = function(cx) { var link = elt("a", {href: "/"}, "Save"); function update() { try { link.href = cx.canvas.toDataURL(); } catch (e) { if (e instanceof SecurityError) link.href = "javascript:alert(" + JSON.stringify("Can't save: " + e.toString()) + ")"; else throw e; } } link.addEventListener("mouseover", update); link.addEventListener("focus", update); return link; };

, , , , .

, URL , . .

. URL , , (. 17), , , .

( ). , .

, , , , «». , URL , «» . , .

try/catch update . «», toDataURL , SecurityError. URL javascript:. , , , .


URL. , URL .

function loadImageURL(cx, url) { var image = document.createElement("img"); image.addEventListener("load", function() { var color = cx.fillStyle, size = cx.lineWidth; cx.canvas.width = image.width; cx.canvas.height = image.height; cx.drawImage(image, 0, 0); cx.fillStyle = color; cx.strokeStyle = color; cx.lineWidth = size; }); image.src = url; }

, . - (fillStyle lineWidth), .

FileReader 18. readAsText readAsDataURL – , . , , URL , loadImageURL .

controls.openFile = function(cx) { var input = elt("input", {type: "file"}); input.addEventListener("change", function() { if (input.files.length == 0) return; var reader = new FileReader(); reader.addEventListener("load", function() { loadImageURL(cx, reader.result); }); reader.readAsDataURL(input.files[0]); }); return elt("div", null, "Open file: ", input); };

URL . , URL, “change”. , – Enter, load.

controls.openURL = function(cx) { var input = elt("input", {type: "text"}); var form = elt("form", null, "Open URL: ", input, elt("button", {type: "submit"}, "load")); form.addEventListener("submit", function(event) { event.preventDefault(); loadImageURL(cx, form.querySelector("input").value); }); return form; };

, , .


, , .

tools.Text = function(event, cx) { var text = prompt("Text:", ""); if (text) { var pos = relativePos(event, cx.canvas); cx.font = Math.max(7, cx.lineWidth) + "px sans-serif"; cx.fillText(text, pos.x, pos.y); } };

, sans-serif , . – 7 , .

- – “”. , , .

tools.Spray = function(event, cx) { var radius = cx.lineWidth / 2; var area = radius * radius * Math.PI; var dotsPerTick = Math.ceil(area / 30); var currentPos = relativePos(event, cx.canvas); var spray = setInterval(function() { for (var i = 0; i < dotsPerTick; i++) { var offset = randomPointInRadius(radius); cx.fillRect(currentPos.x + offset.x, currentPos.y + offset.y, 1, 1); } }, 25); trackDrag(function(event) { currentPos = relativePos(event, cx.canvas); }, function() { clearInterval(spray); }); };

setInterval 25 , . trackDrag , currentPos , .

, , 30. randomPointInRadius.

function randomPointInRadius(radius) { for (;;) { var x = Math.random() * 2 - 1; var y = Math.random() * 2 - 1; if (x * x + y * y <= 1) return {x: x * radius, y: y * radius}; } }

(-1,-1) (1,1). , , 1. , , .

. , Math.sin Math.cos . . , , .

. .

<link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>


. .


Rectangle, (. fillRect 16) . , , , . , .

, , . , , ?

, position: absolute, 13. , . pageX pageY , left, top, width height.

<script> tools.Rectangle = function(event, cx) { // }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>


– , , . .

. toDataURL , URL . getImageData, width, height data. data 0 255, - red, green, blue alpha ().

, , ( – ), , .

function pixelAt(cx, x, y) { var data = cx.getImageData(x, y, 1, 1); console.log(data.data); } var canvas = document.createElement("canvas"); var cx = canvas.getContext("2d"); pixelAt(cx, 10, 10); // → [0, 0, 0, 0] cx.fillStyle = "red"; cx.fillRect(10, 10, 1, 1); pixelAt(cx, 10, 10); // → [255, 0, 0, 255]

getImageData x y, , .

, . color . , fillStyle strokeStyle , .

, , CSS, rgb(R, G, B), 15.

getImageData , toDataURL – , , . try/catch alert.

<script> tools["Pick color"] = function(event, cx) { // Your code here. }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>


, , . , , , - .

, . , , , ( ), , .

, , :



, , , .

getImageData . , , . 7, , . (x,y) (x + y × width) × 4

(), () .

, , , . . - , 9. , , , , .

. , . , , .

fillRect, - , , .

<script> tools["Flood fill"] = function(event, cx) { // }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>

, . , , . , , ..

"mousedown" , , . , , "mousemove", , .

. fillStyle, strokeStyle, lineWidth .

. file, . URL .

. save . , . , .

DOM
30 DOM. - .

DOM HTML. HTML – DOM , - . querySelector , DOM .

DOM JavaScript, . DOM JavaScript. 13, DOM . , .

– elt 13. , , , , .

function elt(name, attributes) { var node = document.createElement(name); if (attributes) { for (var attr in attributes) if (attributes.hasOwnProperty(attr)) node.setAttribute(attr, attributes[attr]); } for (var i = 2; i < arguments.length; i++) { var child = arguments[i]; if (typeof child == "string") child = document.createTextNode(child); node.appendChild(child); } return node; }

, .


– createPaint, DOM, . , controls, .

var controls = Object.create(null); function createPaint(parent) { var canvas = elt("canvas", {width: 500, height: 300}); var cx = canvas.getContext("2d"); var toolbar = elt("div", {class: "toolbar"}); for (var name in controls) toolbar.appendChild(controls[name](cx)); var panel = elt("div", {class: "picturepanel"}, canvas); parent.appendChild(elt("div", null, panel, toolbar)); }

, – . – , ( fillStyle) ( lineWidth).

, , .


, – , . controls, , , . , .

var tools = Object.create(null); controls.tool = function(cx) { var select = elt("select"); for (var name in tools) select.appendChild(elt("option", null, name)); cx.canvas.addEventListener("mousedown", function(event) { if (event.which == 1) { tools[select.value](event, cx); event.preventDefault(); } }); return elt("span", null, "Tool: ", select); };

tool , "mousedown" , event context. preventDefault, .

– , . , . 13 getBoundingClientRect . , , . clientX clientY , .

function relativePos(event, element) { var rect = element.getBoundingClientRect(); return {x: Math.floor(event.clientX - rect.left), y: Math.floor(event.clientY - rect.top)}; }

"mousemove", . trackDrag .

function trackDrag(onMove, onEnd) { function end(event) { removeEventListener("mousemove", onMove); removeEventListener("mouseup", end); if (onEnd) onEnd(event); } addEventListener("mousemove", onMove); addEventListener("mouseup", end); }

. – , "mousemove", – , . .

.

tools.Line = function(event, cx, onEnd) { cx.lineCap = "round"; var pos = relativePos(event, cx.canvas); trackDrag(function(event) { cx.beginPath(); cx.moveTo(pos.x, pos.y); pos = relativePos(event, cx.canvas); cx.lineTo(pos.x, pos.y); cx.stroke(); }, onEnd); };

lineCap “round”, - , , . , . , , lineCap .

, "mousemove", , , , strokeStyle lineWidth, .

onEnd , trackDrag. , undefined, . , erase, .

tools.Erase = function(event, cx) { cx.globalCompositeOperation = "destination-out"; tools.Line(event, cx, function() { cx.globalCompositeOperation = "source-over"; }); };

globalCompositeOperation , . , "source-over", , , , . , , , .

“erase” globalCompositeOperation "destination-out", , .

. ( strokeStyle lineWidth ), . , , .


, , .

18 . . , . - . - "date", "email", "url" "number". . – “text”, , , . , , , , .

controls.color = function(cx) { var input = elt("input", {type: "color"}); input.addEventListener("change", function() { cx.fillStyle = input.value; cx.strokeStyle = input.value; }); return elt("span", null, "Color: ", input); };

color fillStyle strokeStyle .

.

controls.brushSize = function(cx) { var select = elt("select"); var sizes = [1, 2, 3, 5, 8, 12, 25, 35, 50, 75, 100]; sizes.forEach(function(size) { select.appendChild(elt("option", {value: size}, size + " pixels")); }); select.addEventListener("change", function() { cx.lineWidth = select.value; }); return elt("span", null, "Brush size: ", select); };

, , lineWidth .


, , URL . http: https:, URL , . URL , HTML :

data:text/html,<h1 style="color:red">Hello!</h1>

URL , , , . , , - .

toDataURL, URL , . . URL . , href , .

controls.save = function(cx) { var link = elt("a", {href: "/"}, "Save"); function update() { try { link.href = cx.canvas.toDataURL(); } catch (e) { if (e instanceof SecurityError) link.href = "javascript:alert(" + JSON.stringify("Can't save: " + e.toString()) + ")"; else throw e; } } link.addEventListener("mouseover", update); link.addEventListener("focus", update); return link; };

, , , , .

, URL , . .

. URL , , (. 17), , , .

( ). , .

, , , , «». , URL , «» . , .

try/catch update . «», toDataURL , SecurityError. URL javascript:. , , , .


URL. , URL .

function loadImageURL(cx, url) { var image = document.createElement("img"); image.addEventListener("load", function() { var color = cx.fillStyle, size = cx.lineWidth; cx.canvas.width = image.width; cx.canvas.height = image.height; cx.drawImage(image, 0, 0); cx.fillStyle = color; cx.strokeStyle = color; cx.lineWidth = size; }); image.src = url; }

, . - (fillStyle lineWidth), .

FileReader 18. readAsText readAsDataURL – , . , , URL , loadImageURL .

controls.openFile = function(cx) { var input = elt("input", {type: "file"}); input.addEventListener("change", function() { if (input.files.length == 0) return; var reader = new FileReader(); reader.addEventListener("load", function() { loadImageURL(cx, reader.result); }); reader.readAsDataURL(input.files[0]); }); return elt("div", null, "Open file: ", input); };

URL . , URL, “change”. , – Enter, load.

controls.openURL = function(cx) { var input = elt("input", {type: "text"}); var form = elt("form", null, "Open URL: ", input, elt("button", {type: "submit"}, "load")); form.addEventListener("submit", function(event) { event.preventDefault(); loadImageURL(cx, form.querySelector("input").value); }); return form; };

, , .


, , .

tools.Text = function(event, cx) { var text = prompt("Text:", ""); if (text) { var pos = relativePos(event, cx.canvas); cx.font = Math.max(7, cx.lineWidth) + "px sans-serif"; cx.fillText(text, pos.x, pos.y); } };

, sans-serif , . – 7 , .

- – “”. , , .

tools.Spray = function(event, cx) { var radius = cx.lineWidth / 2; var area = radius * radius * Math.PI; var dotsPerTick = Math.ceil(area / 30); var currentPos = relativePos(event, cx.canvas); var spray = setInterval(function() { for (var i = 0; i < dotsPerTick; i++) { var offset = randomPointInRadius(radius); cx.fillRect(currentPos.x + offset.x, currentPos.y + offset.y, 1, 1); } }, 25); trackDrag(function(event) { currentPos = relativePos(event, cx.canvas); }, function() { clearInterval(spray); }); };

setInterval 25 , . trackDrag , currentPos , .

, , 30. randomPointInRadius.

function randomPointInRadius(radius) { for (;;) { var x = Math.random() * 2 - 1; var y = Math.random() * 2 - 1; if (x * x + y * y <= 1) return {x: x * radius, y: y * radius}; } }

(-1,-1) (1,1). , , 1. , , .

. , Math.sin Math.cos . . , , .

. .

<link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>


. .


Rectangle, (. fillRect 16) . , , , . , .

, , . , , ?

, position: absolute, 13. , . pageX pageY , left, top, width height.

<script> tools.Rectangle = function(event, cx) { // }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>


– , , . .

. toDataURL , URL . getImageData, width, height data. data 0 255, - red, green, blue alpha ().

, , ( – ), , .

function pixelAt(cx, x, y) { var data = cx.getImageData(x, y, 1, 1); console.log(data.data); } var canvas = document.createElement("canvas"); var cx = canvas.getContext("2d"); pixelAt(cx, 10, 10); // → [0, 0, 0, 0] cx.fillStyle = "red"; cx.fillRect(10, 10, 1, 1); pixelAt(cx, 10, 10); // → [255, 0, 0, 255]

getImageData x y, , .

, . color . , fillStyle strokeStyle , .

, , CSS, rgb(R, G, B), 15.

getImageData , toDataURL – , , . try/catch alert.

<script> tools["Pick color"] = function(event, cx) { // Your code here. }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>


, , . , , , - .

, . , , , ( ), , .

, , :



, , , .

getImageData . , , . 7, , . (x,y) (x + y × width) × 4

(), () .

, , , . . - , 9. , , , , .

. , . , , .

fillRect, - , , .

<script> tools["Flood fill"] = function(event, cx) { // }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>

, . , , . , , ..

"mousedown" , , . , , "mousemove", , .

. fillStyle, strokeStyle, lineWidth .

. file, . URL .

. save . , . , .

DOM
30 DOM. - .

DOM HTML. HTML – DOM , - . querySelector , DOM .

DOM JavaScript, . DOM JavaScript. 13, DOM . , .

– elt 13. , , , , .

function elt(name, attributes) { var node = document.createElement(name); if (attributes) { for (var attr in attributes) if (attributes.hasOwnProperty(attr)) node.setAttribute(attr, attributes[attr]); } for (var i = 2; i < arguments.length; i++) { var child = arguments[i]; if (typeof child == "string") child = document.createTextNode(child); node.appendChild(child); } return node; }

, .


– createPaint, DOM, . , controls, .

var controls = Object.create(null); function createPaint(parent) { var canvas = elt("canvas", {width: 500, height: 300}); var cx = canvas.getContext("2d"); var toolbar = elt("div", {class: "toolbar"}); for (var name in controls) toolbar.appendChild(controls[name](cx)); var panel = elt("div", {class: "picturepanel"}, canvas); parent.appendChild(elt("div", null, panel, toolbar)); }

, – . – , ( fillStyle) ( lineWidth).

, , .


, – , . controls, , , . , .

var tools = Object.create(null); controls.tool = function(cx) { var select = elt("select"); for (var name in tools) select.appendChild(elt("option", null, name)); cx.canvas.addEventListener("mousedown", function(event) { if (event.which == 1) { tools[select.value](event, cx); event.preventDefault(); } }); return elt("span", null, "Tool: ", select); };

tool , "mousedown" , event context. preventDefault, .

– , . , . 13 getBoundingClientRect . , , . clientX clientY , .

function relativePos(event, element) { var rect = element.getBoundingClientRect(); return {x: Math.floor(event.clientX - rect.left), y: Math.floor(event.clientY - rect.top)}; }

"mousemove", . trackDrag .

function trackDrag(onMove, onEnd) { function end(event) { removeEventListener("mousemove", onMove); removeEventListener("mouseup", end); if (onEnd) onEnd(event); } addEventListener("mousemove", onMove); addEventListener("mouseup", end); }

. – , "mousemove", – , . .

.

tools.Line = function(event, cx, onEnd) { cx.lineCap = "round"; var pos = relativePos(event, cx.canvas); trackDrag(function(event) { cx.beginPath(); cx.moveTo(pos.x, pos.y); pos = relativePos(event, cx.canvas); cx.lineTo(pos.x, pos.y); cx.stroke(); }, onEnd); };

lineCap “round”, - , , . , . , , lineCap .

, "mousemove", , , , strokeStyle lineWidth, .

onEnd , trackDrag. , undefined, . , erase, .

tools.Erase = function(event, cx) { cx.globalCompositeOperation = "destination-out"; tools.Line(event, cx, function() { cx.globalCompositeOperation = "source-over"; }); };

globalCompositeOperation , . , "source-over", , , , . , , , .

“erase” globalCompositeOperation "destination-out", , .

. ( strokeStyle lineWidth ), . , , .


, , .

18 . . , . - . - "date", "email", "url" "number". . – “text”, , , . , , , , .

controls.color = function(cx) { var input = elt("input", {type: "color"}); input.addEventListener("change", function() { cx.fillStyle = input.value; cx.strokeStyle = input.value; }); return elt("span", null, "Color: ", input); };

color fillStyle strokeStyle .

.

controls.brushSize = function(cx) { var select = elt("select"); var sizes = [1, 2, 3, 5, 8, 12, 25, 35, 50, 75, 100]; sizes.forEach(function(size) { select.appendChild(elt("option", {value: size}, size + " pixels")); }); select.addEventListener("change", function() { cx.lineWidth = select.value; }); return elt("span", null, "Brush size: ", select); };

, , lineWidth .


, , URL . http: https:, URL , . URL , HTML :

data:text/html,<h1 style="color:red">Hello!</h1>

URL , , , . , , - .

toDataURL, URL , . . URL . , href , .

controls.save = function(cx) { var link = elt("a", {href: "/"}, "Save"); function update() { try { link.href = cx.canvas.toDataURL(); } catch (e) { if (e instanceof SecurityError) link.href = "javascript:alert(" + JSON.stringify("Can't save: " + e.toString()) + ")"; else throw e; } } link.addEventListener("mouseover", update); link.addEventListener("focus", update); return link; };

, , , , .

, URL , . .

. URL , , (. 17), , , .

( ). , .

, , , , «». , URL , «» . , .

try/catch update . «», toDataURL , SecurityError. URL javascript:. , , , .


URL. , URL .

function loadImageURL(cx, url) { var image = document.createElement("img"); image.addEventListener("load", function() { var color = cx.fillStyle, size = cx.lineWidth; cx.canvas.width = image.width; cx.canvas.height = image.height; cx.drawImage(image, 0, 0); cx.fillStyle = color; cx.strokeStyle = color; cx.lineWidth = size; }); image.src = url; }

, . - (fillStyle lineWidth), .

FileReader 18. readAsText readAsDataURL – , . , , URL , loadImageURL .

controls.openFile = function(cx) { var input = elt("input", {type: "file"}); input.addEventListener("change", function() { if (input.files.length == 0) return; var reader = new FileReader(); reader.addEventListener("load", function() { loadImageURL(cx, reader.result); }); reader.readAsDataURL(input.files[0]); }); return elt("div", null, "Open file: ", input); };

URL . , URL, “change”. , – Enter, load.

controls.openURL = function(cx) { var input = elt("input", {type: "text"}); var form = elt("form", null, "Open URL: ", input, elt("button", {type: "submit"}, "load")); form.addEventListener("submit", function(event) { event.preventDefault(); loadImageURL(cx, form.querySelector("input").value); }); return form; };

, , .


, , .

tools.Text = function(event, cx) { var text = prompt("Text:", ""); if (text) { var pos = relativePos(event, cx.canvas); cx.font = Math.max(7, cx.lineWidth) + "px sans-serif"; cx.fillText(text, pos.x, pos.y); } };

, sans-serif , . – 7 , .

- – “”. , , .

tools.Spray = function(event, cx) { var radius = cx.lineWidth / 2; var area = radius * radius * Math.PI; var dotsPerTick = Math.ceil(area / 30); var currentPos = relativePos(event, cx.canvas); var spray = setInterval(function() { for (var i = 0; i < dotsPerTick; i++) { var offset = randomPointInRadius(radius); cx.fillRect(currentPos.x + offset.x, currentPos.y + offset.y, 1, 1); } }, 25); trackDrag(function(event) { currentPos = relativePos(event, cx.canvas); }, function() { clearInterval(spray); }); };

setInterval 25 , . trackDrag , currentPos , .

, , 30. randomPointInRadius.

function randomPointInRadius(radius) { for (;;) { var x = Math.random() * 2 - 1; var y = Math.random() * 2 - 1; if (x * x + y * y <= 1) return {x: x * radius, y: y * radius}; } }

(-1,-1) (1,1). , , 1. , , .

. , Math.sin Math.cos . . , , .

. .

<link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>


. .


Rectangle, (. fillRect 16) . , , , . , .

, , . , , ?

, position: absolute, 13. , . pageX pageY , left, top, width height.

<script> tools.Rectangle = function(event, cx) { // }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>


– , , . .

. toDataURL , URL . getImageData, width, height data. data 0 255, - red, green, blue alpha ().

, , ( – ), , .

function pixelAt(cx, x, y) { var data = cx.getImageData(x, y, 1, 1); console.log(data.data); } var canvas = document.createElement("canvas"); var cx = canvas.getContext("2d"); pixelAt(cx, 10, 10); // → [0, 0, 0, 0] cx.fillStyle = "red"; cx.fillRect(10, 10, 1, 1); pixelAt(cx, 10, 10); // → [255, 0, 0, 255]

getImageData x y, , .

, . color . , fillStyle strokeStyle , .

, , CSS, rgb(R, G, B), 15.

getImageData , toDataURL – , , . try/catch alert.

<script> tools["Pick color"] = function(event, cx) { // Your code here. }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>


, , . , , , - .

, . , , , ( ), , .

, , :



, , , .

getImageData . , , . 7, , . (x,y) (x + y × width) × 4

(), () .

, , , . . - , 9. , , , , .

. , . , , .

fillRect, - , , .

<script> tools["Flood fill"] = function(event, cx) { // }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>

 ,      .    ,     ,      .     ,   ,    .. 
 
      "mousedown"  ,   ,   .  , ,    "mousemove",      ,           . 
 
         .         fillStyle, strokeStyle,  lineWidth     . 
 
       .    file,       .   URL     . 
 
    .  save       .    ,       .   ,   . 
 
  DOM 
       30  DOM.   -  . 
 
      DOM  HTML.     HTML    –   DOM        ,    -   .       querySelector   ,     DOM  . 
 
      DOM      JavaScript,   .       DOM   JavaScript.      13,      DOM  .      ,    . 
 
   –    elt   13.        ,     ,  ,    ,      . 
 
 function elt(name, attributes) { var node = document.createElement(name); if (attributes) { for (var attr in attributes) if (attributes.hasOwnProperty(attr)) node.setAttribute(attr, attributes[attr]); } for (var i = 2; i < arguments.length; i++) { var child = arguments[i]; if (typeof child == "string") child = document.createTextNode(child); node.appendChild(child); } return node; } 
 
       ,       . 
 
  
    –  createPaint,      DOM,     .      ,    controls,           . 
 
 var controls = Object.create(null); function createPaint(parent) { var canvas = elt("canvas", {width: 500, height: 300}); var cx = canvas.getContext("2d"); var toolbar = elt("div", {class: "toolbar"}); for (var name in controls) toolbar.appendChild(controls[name](cx)); var panel = elt("div", {class: "picturepanel"}, canvas); parent.appendChild(elt("div", null, panel, toolbar)); } 
 
           ,    –   .        –    ,   (  fillStyle)    (  lineWidth). 
 
          ,      ,     . 
 
   
   ,    –  ,    .      controls,        ,           ,       .       ,          . 
 
 var tools = Object.create(null); controls.tool = function(cx) { var select = elt("select"); for (var name in tools) select.appendChild(elt("option", null, name)); cx.canvas.addEventListener("mousedown", function(event) { if (event.which == 1) { tools[select.value](event, cx); event.preventDefault(); } }); return elt("span", null, "Tool: ", select); }; 
 
   tool        ,    "mousedown"          ,    event  context.    preventDefault,          . 
 
    – ,     .   ,           .    13   getBoundingClientRect     .  ,   ,     .    clientX  clientY      ,                . 
 
 function relativePos(event, element) { var rect = element.getBoundingClientRect(); return {x: Math.floor(event.clientX - rect.left), y: Math.floor(event.clientY - rect.top)}; } 
 
       "mousemove",    .  trackDrag       . 
 
 function trackDrag(onMove, onEnd) { function end(event) { removeEventListener("mousemove", onMove); removeEventListener("mouseup", end); if (onEnd) onEnd(event); } addEventListener("mousemove", onMove); addEventListener("mouseup", end); } 
 
    .  – ,      "mousemove",   – ,     .      . 
 
           . 
 
 tools.Line = function(event, cx, onEnd) { cx.lineCap = "round"; var pos = relativePos(event, cx.canvas); trackDrag(function(event) { cx.beginPath(); cx.moveTo(pos.x, pos.y); pos = relativePos(event, cx.canvas); cx.lineTo(pos.x, pos.y); cx.stroke(); }, onEnd); }; 
 
      lineCap  “round”, -      ,   ,     .     ,      .     ,      ,     lineCap  . 
 
 ,    "mousemove",  ,   ,         ,      strokeStyle  lineWidth,     . 
 
  onEnd   ,  trackDrag.        ,        undefined,       .        ,  erase,      . 
 
 tools.Erase = function(event, cx) { cx.globalCompositeOperation = "destination-out"; tools.Line(event, cx, function() { cx.globalCompositeOperation = "source-over"; }); }; 
 
  globalCompositeOperation   ,        .  ,   "source-over",  ,  ,  ,   .   ,    ,     ,   . 
 
  “erase”  globalCompositeOperation  "destination-out",    ,     . 
 
         .          (     strokeStyle  lineWidth  ),   . ,   ,  . 
 
     
 ,              ,      . 
 
   18      .        .          ,            .    - .   - "date", "email", "url"  "number".      .      – “text”,     ,     ,       . ,   ,       ,       ,       . 
 
 controls.color = function(cx) { var input = elt("input", {type: "color"}); input.addEventListener("change", function() { cx.fillStyle = input.value; cx.strokeStyle = input.value; }); return elt("span", null, "Color: ", input); }; 
 
     color     fillStyle  strokeStyle    . 
 
      . 
 
 controls.brushSize = function(cx) { var select = elt("select"); var sizes = [1, 2, 3, 5, 8, 12, 25, 35, 50, 75, 100]; sizes.forEach(function(size) { select.appendChild(elt("option", {value: size}, size + " pixels")); }); select.addEventListener("change", function() { cx.lineWidth = select.value; }); return elt("span", null, "Brush size: ", select); }; 
 
       ,    ,    lineWidth    . 
 
  
  ,     ,      URL  .     http:  https:, URL      ,      .  URL  ,   HTML : 
 
 data:text/html,<h1 style="color:red">Hello!</h1> 
 
  URL    , , ,       .           ,  ,      - . 
 
       toDataURL,   URL  ,        .            .        URL   .       ,      href  ,            . 
 
 controls.save = function(cx) { var link = elt("a", {href: "/"}, "Save"); function update() { try { link.href = cx.canvas.toDataURL(); } catch (e) { if (e instanceof SecurityError) link.href = "javascript:alert(" + JSON.stringify("Can't save: " + e.toString()) + ")"; else throw e; } } link.addEventListener("mouseover", update); link.addEventListener("focus", update); return link; }; 
 
  ,          ,       ,      ,     . 
 
     ,      URL  ,    .       . 
 
           .     URL   ,      ,       (.  17),    ,    ,    . 
 
        (   ).        ,      . 
 
     ,  ,  ,    ,     «».  ,  URL  ,     «» .    ,     . 
 
     try/catch   update   .   «»,  toDataURL  ,   SecurityError.           URL   javascript:.     ,   ,     ,   . 
 
   
              URL.    ,      URL     . 
 
 function loadImageURL(cx, url) { var image = document.createElement("img"); image.addEventListener("load", function() { var color = cx.fillStyle, size = cx.lineWidth; cx.canvas.width = image.width; cx.canvas.height = image.height; cx.drawImage(image, 0, 0); cx.fillStyle = color; cx.strokeStyle = color; cx.lineWidth = size; }); image.src = url; } 
 
     ,    . -          (fillStyle  lineWidth),              . 
 
         FileReader   18.     readAsText        readAsDataURL –   ,   .   ,   ,  URL  ,     loadImageURL    . 
 
 controls.openFile = function(cx) { var input = elt("input", {type: "file"}); input.addEventListener("change", function() { if (input.files.length == 0) return; var reader = new FileReader(); reader.addEventListener("load", function() { loadImageURL(cx, reader.result); }); reader.readAsDataURL(input.files[0]); }); return elt("div", null, "Open file: ", input); }; 
 
    URL  .       ,       URL,        “change”.         ,     –    Enter,     load. 
 
 controls.openURL = function(cx) { var input = elt("input", {type: "text"}); var form = elt("form", null, "Open URL: ", input, elt("button", {type: "submit"}, "load")); form.addEventListener("submit", function(event) { event.preventDefault(); loadImageURL(cx, form.querySelector("input").value); }); return form; }; 
 
      ,   ,      . 
 
  
        ,    ,     . 
 
 tools.Text = function(event, cx) { var text = prompt("Text:", ""); if (text) { var pos = relativePos(event, cx.canvas); cx.font = Math.max(7, cx.lineWidth) + "px sans-serif"; cx.fillText(text, pos.x, pos.y); } }; 
 
          ,        sans-serif   ,    .   – 7 ,      . 
 
      - – “”.      ,    ,            . 
 
 tools.Spray = function(event, cx) { var radius = cx.lineWidth / 2; var area = radius * radius * Math.PI; var dotsPerTick = Math.ceil(area / 30); var currentPos = relativePos(event, cx.canvas); var spray = setInterval(function() { for (var i = 0; i < dotsPerTick; i++) { var offset = randomPointInRadius(radius); cx.fillRect(currentPos.x + offset.x, currentPos.y + offset.y, 1, 1); } }, 25); trackDrag(function(event) { currentPos = relativePos(event, cx.canvas); }, function() { clearInterval(spray); }); }; 
 
   setInterval      25 ,    .  trackDrag   ,  currentPos     ,       . 
 
  ,         ,           30.         randomPointInRadius. 
 
 function randomPointInRadius(radius) { for (;;) { var x = Math.random() * 2 - 1; var y = Math.random() * 2 - 1; if (x * x + y * y <= 1) return {x: x * radius, y: y * radius}; } } 
 
        (-1,-1)  (1,1).   ,  ,         1.    ,    ,   . 
 
      .       ,        Math.sin  Math.cos   .            .    ,    ,   . 
 
      .    . 
 
 <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body> 
 
  
        .    . 
 
  
   Rectangle,   (.  fillRect   16)  .      ,     ,    ,    . ,         . 
 
   ,  ,        .           ,       ,    ? 
 
   ,    position: absolute,      13.   ,      .  pageX  pageY          ,      left, top, width  height. 
 
 <script> tools.Rectangle = function(event, cx) { //   }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body> 
 
   
      –  ,        ,    .   . 
 
        .  toDataURL    ,       URL   .       getImageData,          width, height  data.   data     0  255,        - red, green, blue  alpha (). 
 
        ,  ,    (  –  ),   ,      . 
 
 function pixelAt(cx, x, y) { var data = cx.getImageData(x, y, 1, 1); console.log(data.data); } var canvas = document.createElement("canvas"); var cx = canvas.getContext("2d"); pixelAt(cx, 10, 10); // → [0, 0, 0, 0] cx.fillStyle = "red"; cx.fillRect(10, 10, 1, 1); pixelAt(cx, 10, 10); // → [255, 0, 0, 255] 
 
  getImageData     x  y,    ,      . 
 
     ,         .        color   .  ,  fillStyle  strokeStyle    ,   . 
 
 ,      ,   CSS,    rgb(R, G, B),      15. 
 
  getImageData    ,   toDataURL –   ,      ,    .   try/catch        alert. 
 
 <script> tools["Pick color"] = function(event, cx) { // Your code here. }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body> 
 
  
    ,  ,        . ,           ,   ,     -   . 
 
              ,    .       ,      ,      ,         (   ),    ,     . 
 
     , ,       : 
 
  
 
          ,   ,      ,   . 
 
    getImageData    .  ,       ,          .           7,  ,      .       (x,y)    (x + y × width) × 4 
 
      (),          () . 
 
            , ,   ,       .         .      -      ,    9.        ,    ,       ,    ,    . 
 
      .      ,       .  ,  ,    . 
 
       fillRect,   -  ,  ,     . 
 
 <script> tools["Flood fill"] = function(event, cx) { //   }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body> 

, . , , . , , ..

"mousedown" , , . , , "mousemove", , .

. fillStyle, strokeStyle, lineWidth .

. file, . URL .

. save . , . , .

DOM
30 DOM. - .

DOM HTML. HTML – DOM , - . querySelector , DOM .

DOM JavaScript, . DOM JavaScript. 13, DOM . , .

– elt 13. , , , , .

function elt(name, attributes) { var node = document.createElement(name); if (attributes) { for (var attr in attributes) if (attributes.hasOwnProperty(attr)) node.setAttribute(attr, attributes[attr]); } for (var i = 2; i < arguments.length; i++) { var child = arguments[i]; if (typeof child == "string") child = document.createTextNode(child); node.appendChild(child); } return node; }

, .


– createPaint, DOM, . , controls, .

var controls = Object.create(null); function createPaint(parent) { var canvas = elt("canvas", {width: 500, height: 300}); var cx = canvas.getContext("2d"); var toolbar = elt("div", {class: "toolbar"}); for (var name in controls) toolbar.appendChild(controls[name](cx)); var panel = elt("div", {class: "picturepanel"}, canvas); parent.appendChild(elt("div", null, panel, toolbar)); }

, – . – , ( fillStyle) ( lineWidth).

, , .


, – , . controls, , , . , .

var tools = Object.create(null); controls.tool = function(cx) { var select = elt("select"); for (var name in tools) select.appendChild(elt("option", null, name)); cx.canvas.addEventListener("mousedown", function(event) { if (event.which == 1) { tools[select.value](event, cx); event.preventDefault(); } }); return elt("span", null, "Tool: ", select); };

tool , "mousedown" , event context. preventDefault, .

– , . , . 13 getBoundingClientRect . , , . clientX clientY , .

function relativePos(event, element) { var rect = element.getBoundingClientRect(); return {x: Math.floor(event.clientX - rect.left), y: Math.floor(event.clientY - rect.top)}; }

"mousemove", . trackDrag .

function trackDrag(onMove, onEnd) { function end(event) { removeEventListener("mousemove", onMove); removeEventListener("mouseup", end); if (onEnd) onEnd(event); } addEventListener("mousemove", onMove); addEventListener("mouseup", end); }

. – , "mousemove", – , . .

.

tools.Line = function(event, cx, onEnd) { cx.lineCap = "round"; var pos = relativePos(event, cx.canvas); trackDrag(function(event) { cx.beginPath(); cx.moveTo(pos.x, pos.y); pos = relativePos(event, cx.canvas); cx.lineTo(pos.x, pos.y); cx.stroke(); }, onEnd); };

lineCap “round”, - , , . , . , , lineCap .

, "mousemove", , , , strokeStyle lineWidth, .

onEnd , trackDrag. , undefined, . , erase, .

tools.Erase = function(event, cx) { cx.globalCompositeOperation = "destination-out"; tools.Line(event, cx, function() { cx.globalCompositeOperation = "source-over"; }); };

globalCompositeOperation , . , "source-over", , , , . , , , .

“erase” globalCompositeOperation "destination-out", , .

. ( strokeStyle lineWidth ), . , , .


, , .

18 . . , . - . - "date", "email", "url" "number". . – “text”, , , . , , , , .

controls.color = function(cx) { var input = elt("input", {type: "color"}); input.addEventListener("change", function() { cx.fillStyle = input.value; cx.strokeStyle = input.value; }); return elt("span", null, "Color: ", input); };

color fillStyle strokeStyle .

.

controls.brushSize = function(cx) { var select = elt("select"); var sizes = [1, 2, 3, 5, 8, 12, 25, 35, 50, 75, 100]; sizes.forEach(function(size) { select.appendChild(elt("option", {value: size}, size + " pixels")); }); select.addEventListener("change", function() { cx.lineWidth = select.value; }); return elt("span", null, "Brush size: ", select); };

, , lineWidth .


, , URL . http: https:, URL , . URL , HTML :

data:text/html,<h1 style="color:red">Hello!</h1>

URL , , , . , , - .

toDataURL, URL , . . URL . , href , .

controls.save = function(cx) { var link = elt("a", {href: "/"}, "Save"); function update() { try { link.href = cx.canvas.toDataURL(); } catch (e) { if (e instanceof SecurityError) link.href = "javascript:alert(" + JSON.stringify("Can't save: " + e.toString()) + ")"; else throw e; } } link.addEventListener("mouseover", update); link.addEventListener("focus", update); return link; };

, , , , .

, URL , . .

. URL , , (. 17), , , .

( ). , .

, , , , «». , URL , «» . , .

try/catch update . «», toDataURL , SecurityError. URL javascript:. , , , .


URL. , URL .

function loadImageURL(cx, url) { var image = document.createElement("img"); image.addEventListener("load", function() { var color = cx.fillStyle, size = cx.lineWidth; cx.canvas.width = image.width; cx.canvas.height = image.height; cx.drawImage(image, 0, 0); cx.fillStyle = color; cx.strokeStyle = color; cx.lineWidth = size; }); image.src = url; }

, . - (fillStyle lineWidth), .

FileReader 18. readAsText readAsDataURL – , . , , URL , loadImageURL .

controls.openFile = function(cx) { var input = elt("input", {type: "file"}); input.addEventListener("change", function() { if (input.files.length == 0) return; var reader = new FileReader(); reader.addEventListener("load", function() { loadImageURL(cx, reader.result); }); reader.readAsDataURL(input.files[0]); }); return elt("div", null, "Open file: ", input); };

URL . , URL, “change”. , – Enter, load.

controls.openURL = function(cx) { var input = elt("input", {type: "text"}); var form = elt("form", null, "Open URL: ", input, elt("button", {type: "submit"}, "load")); form.addEventListener("submit", function(event) { event.preventDefault(); loadImageURL(cx, form.querySelector("input").value); }); return form; };

, , .


, , .

tools.Text = function(event, cx) { var text = prompt("Text:", ""); if (text) { var pos = relativePos(event, cx.canvas); cx.font = Math.max(7, cx.lineWidth) + "px sans-serif"; cx.fillText(text, pos.x, pos.y); } };

, sans-serif , . – 7 , .

- – “”. , , .

tools.Spray = function(event, cx) { var radius = cx.lineWidth / 2; var area = radius * radius * Math.PI; var dotsPerTick = Math.ceil(area / 30); var currentPos = relativePos(event, cx.canvas); var spray = setInterval(function() { for (var i = 0; i < dotsPerTick; i++) { var offset = randomPointInRadius(radius); cx.fillRect(currentPos.x + offset.x, currentPos.y + offset.y, 1, 1); } }, 25); trackDrag(function(event) { currentPos = relativePos(event, cx.canvas); }, function() { clearInterval(spray); }); };

setInterval 25 , . trackDrag , currentPos , .

, , 30. randomPointInRadius.

function randomPointInRadius(radius) { for (;;) { var x = Math.random() * 2 - 1; var y = Math.random() * 2 - 1; if (x * x + y * y <= 1) return {x: x * radius, y: y * radius}; } }

(-1,-1) (1,1). , , 1. , , .

. , Math.sin Math.cos . . , , .

. .

<link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>


. .


Rectangle, (. fillRect 16) . , , , . , .

, , . , , ?

, position: absolute, 13. , . pageX pageY , left, top, width height.

<script> tools.Rectangle = function(event, cx) { // }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>


– , , . .

. toDataURL , URL . getImageData, width, height data. data 0 255, - red, green, blue alpha ().

, , ( – ), , .

function pixelAt(cx, x, y) { var data = cx.getImageData(x, y, 1, 1); console.log(data.data); } var canvas = document.createElement("canvas"); var cx = canvas.getContext("2d"); pixelAt(cx, 10, 10); // → [0, 0, 0, 0] cx.fillStyle = "red"; cx.fillRect(10, 10, 1, 1); pixelAt(cx, 10, 10); // → [255, 0, 0, 255]

getImageData x y, , .

, . color . , fillStyle strokeStyle , .

, , CSS, rgb(R, G, B), 15.

getImageData , toDataURL – , , . try/catch alert.

<script> tools["Pick color"] = function(event, cx) { // Your code here. }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>


, , . , , , - .

, . , , , ( ), , .

, , :



, , , .

getImageData . , , . 7, , . (x,y) (x + y × width) × 4

(), () .

, , , . . - , 9. , , , , .

. , . , , .

fillRect, - , , .

<script> tools["Flood fill"] = function(event, cx) { // }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>

 ,      .    ,     ,      .     ,   ,    .. 
 
      "mousedown"  ,   ,   .  , ,    "mousemove",      ,           . 
 
         .         fillStyle, strokeStyle,  lineWidth     . 
 
       .    file,       .   URL     . 
 
    .  save       .    ,       .   ,   . 
 
  DOM 
       30  DOM.   -  . 
 
      DOM  HTML.     HTML    –   DOM        ,    -   .       querySelector   ,     DOM  . 
 
      DOM      JavaScript,   .       DOM   JavaScript.      13,      DOM  .      ,    . 
 
   –    elt   13.        ,     ,  ,    ,      . 
 
 function elt(name, attributes) { var node = document.createElement(name); if (attributes) { for (var attr in attributes) if (attributes.hasOwnProperty(attr)) node.setAttribute(attr, attributes[attr]); } for (var i = 2; i < arguments.length; i++) { var child = arguments[i]; if (typeof child == "string") child = document.createTextNode(child); node.appendChild(child); } return node; } 
 
       ,       . 
 
  
    –  createPaint,      DOM,     .      ,    controls,           . 
 
 var controls = Object.create(null); function createPaint(parent) { var canvas = elt("canvas", {width: 500, height: 300}); var cx = canvas.getContext("2d"); var toolbar = elt("div", {class: "toolbar"}); for (var name in controls) toolbar.appendChild(controls[name](cx)); var panel = elt("div", {class: "picturepanel"}, canvas); parent.appendChild(elt("div", null, panel, toolbar)); } 
 
           ,    –   .        –    ,   (  fillStyle)    (  lineWidth). 
 
          ,      ,     . 
 
   
   ,    –  ,    .      controls,        ,           ,       .       ,          . 
 
 var tools = Object.create(null); controls.tool = function(cx) { var select = elt("select"); for (var name in tools) select.appendChild(elt("option", null, name)); cx.canvas.addEventListener("mousedown", function(event) { if (event.which == 1) { tools[select.value](event, cx); event.preventDefault(); } }); return elt("span", null, "Tool: ", select); }; 
 
   tool        ,    "mousedown"          ,    event  context.    preventDefault,          . 
 
    – ,     .   ,           .    13   getBoundingClientRect     .  ,   ,     .    clientX  clientY      ,                . 
 
 function relativePos(event, element) { var rect = element.getBoundingClientRect(); return {x: Math.floor(event.clientX - rect.left), y: Math.floor(event.clientY - rect.top)}; } 
 
       "mousemove",    .  trackDrag       . 
 
 function trackDrag(onMove, onEnd) { function end(event) { removeEventListener("mousemove", onMove); removeEventListener("mouseup", end); if (onEnd) onEnd(event); } addEventListener("mousemove", onMove); addEventListener("mouseup", end); } 
 
    .  – ,      "mousemove",   – ,     .      . 
 
           . 
 
 tools.Line = function(event, cx, onEnd) { cx.lineCap = "round"; var pos = relativePos(event, cx.canvas); trackDrag(function(event) { cx.beginPath(); cx.moveTo(pos.x, pos.y); pos = relativePos(event, cx.canvas); cx.lineTo(pos.x, pos.y); cx.stroke(); }, onEnd); }; 
 
      lineCap  “round”, -      ,   ,     .     ,      .     ,      ,     lineCap  . 
 
 ,    "mousemove",  ,   ,         ,      strokeStyle  lineWidth,     . 
 
  onEnd   ,  trackDrag.        ,        undefined,       .        ,  erase,      . 
 
 tools.Erase = function(event, cx) { cx.globalCompositeOperation = "destination-out"; tools.Line(event, cx, function() { cx.globalCompositeOperation = "source-over"; }); }; 
 
  globalCompositeOperation   ,        .  ,   "source-over",  ,  ,  ,   .   ,    ,     ,   . 
 
  “erase”  globalCompositeOperation  "destination-out",    ,     . 
 
         .          (     strokeStyle  lineWidth  ),   . ,   ,  . 
 
     
 ,              ,      . 
 
   18      .        .          ,            .    - .   - "date", "email", "url"  "number".      .      – “text”,     ,     ,       . ,   ,       ,       ,       . 
 
 controls.color = function(cx) { var input = elt("input", {type: "color"}); input.addEventListener("change", function() { cx.fillStyle = input.value; cx.strokeStyle = input.value; }); return elt("span", null, "Color: ", input); }; 
 
     color     fillStyle  strokeStyle    . 
 
      . 
 
 controls.brushSize = function(cx) { var select = elt("select"); var sizes = [1, 2, 3, 5, 8, 12, 25, 35, 50, 75, 100]; sizes.forEach(function(size) { select.appendChild(elt("option", {value: size}, size + " pixels")); }); select.addEventListener("change", function() { cx.lineWidth = select.value; }); return elt("span", null, "Brush size: ", select); }; 
 
       ,    ,    lineWidth    . 
 
  
  ,     ,      URL  .     http:  https:, URL      ,      .  URL  ,   HTML : 
 
 data:text/html,<h1 style="color:red">Hello!</h1> 
 
  URL    , , ,       .           ,  ,      - . 
 
       toDataURL,   URL  ,        .            .        URL   .       ,      href  ,            . 
 
 controls.save = function(cx) { var link = elt("a", {href: "/"}, "Save"); function update() { try { link.href = cx.canvas.toDataURL(); } catch (e) { if (e instanceof SecurityError) link.href = "javascript:alert(" + JSON.stringify("Can't save: " + e.toString()) + ")"; else throw e; } } link.addEventListener("mouseover", update); link.addEventListener("focus", update); return link; }; 
 
  ,          ,       ,      ,     . 
 
     ,      URL  ,    .       . 
 
           .     URL   ,      ,       (.  17),    ,    ,    . 
 
        (   ).        ,      . 
 
     ,  ,  ,    ,     «».  ,  URL  ,     «» .    ,     . 
 
     try/catch   update   .   «»,  toDataURL  ,   SecurityError.           URL   javascript:.     ,   ,     ,   . 
 
   
              URL.    ,      URL     . 
 
 function loadImageURL(cx, url) { var image = document.createElement("img"); image.addEventListener("load", function() { var color = cx.fillStyle, size = cx.lineWidth; cx.canvas.width = image.width; cx.canvas.height = image.height; cx.drawImage(image, 0, 0); cx.fillStyle = color; cx.strokeStyle = color; cx.lineWidth = size; }); image.src = url; } 
 
     ,    . -          (fillStyle  lineWidth),              . 
 
         FileReader   18.     readAsText        readAsDataURL –   ,   .   ,   ,  URL  ,     loadImageURL    . 
 
 controls.openFile = function(cx) { var input = elt("input", {type: "file"}); input.addEventListener("change", function() { if (input.files.length == 0) return; var reader = new FileReader(); reader.addEventListener("load", function() { loadImageURL(cx, reader.result); }); reader.readAsDataURL(input.files[0]); }); return elt("div", null, "Open file: ", input); }; 
 
    URL  .       ,       URL,        “change”.         ,     –    Enter,     load. 
 
 controls.openURL = function(cx) { var input = elt("input", {type: "text"}); var form = elt("form", null, "Open URL: ", input, elt("button", {type: "submit"}, "load")); form.addEventListener("submit", function(event) { event.preventDefault(); loadImageURL(cx, form.querySelector("input").value); }); return form; }; 
 
      ,   ,      . 
 
  
        ,    ,     . 
 
 tools.Text = function(event, cx) { var text = prompt("Text:", ""); if (text) { var pos = relativePos(event, cx.canvas); cx.font = Math.max(7, cx.lineWidth) + "px sans-serif"; cx.fillText(text, pos.x, pos.y); } }; 
 
          ,        sans-serif   ,    .   – 7 ,      . 
 
      - – “”.      ,    ,            . 
 
 tools.Spray = function(event, cx) { var radius = cx.lineWidth / 2; var area = radius * radius * Math.PI; var dotsPerTick = Math.ceil(area / 30); var currentPos = relativePos(event, cx.canvas); var spray = setInterval(function() { for (var i = 0; i < dotsPerTick; i++) { var offset = randomPointInRadius(radius); cx.fillRect(currentPos.x + offset.x, currentPos.y + offset.y, 1, 1); } }, 25); trackDrag(function(event) { currentPos = relativePos(event, cx.canvas); }, function() { clearInterval(spray); }); }; 
 
   setInterval      25 ,    .  trackDrag   ,  currentPos     ,       . 
 
  ,         ,           30.         randomPointInRadius. 
 
 function randomPointInRadius(radius) { for (;;) { var x = Math.random() * 2 - 1; var y = Math.random() * 2 - 1; if (x * x + y * y <= 1) return {x: x * radius, y: y * radius}; } } 
 
        (-1,-1)  (1,1).   ,  ,         1.    ,    ,   . 
 
      .       ,        Math.sin  Math.cos   .            .    ,    ,   . 
 
      .    . 
 
 <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body> 
 
  
        .    . 
 
  
   Rectangle,   (.  fillRect   16)  .      ,     ,    ,    . ,         . 
 
   ,  ,        .           ,       ,    ? 
 
   ,    position: absolute,      13.   ,      .  pageX  pageY          ,      left, top, width  height. 
 
 <script> tools.Rectangle = function(event, cx) { //   }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body> 
 
   
      –  ,        ,    .   . 
 
        .  toDataURL    ,       URL   .       getImageData,          width, height  data.   data     0  255,        - red, green, blue  alpha (). 
 
        ,  ,    (  –  ),   ,      . 
 
 function pixelAt(cx, x, y) { var data = cx.getImageData(x, y, 1, 1); console.log(data.data); } var canvas = document.createElement("canvas"); var cx = canvas.getContext("2d"); pixelAt(cx, 10, 10); // → [0, 0, 0, 0] cx.fillStyle = "red"; cx.fillRect(10, 10, 1, 1); pixelAt(cx, 10, 10); // → [255, 0, 0, 255] 
 
  getImageData     x  y,    ,      . 
 
     ,         .        color   .  ,  fillStyle  strokeStyle    ,   . 
 
 ,      ,   CSS,    rgb(R, G, B),      15. 
 
  getImageData    ,   toDataURL –   ,      ,    .   try/catch        alert. 
 
 <script> tools["Pick color"] = function(event, cx) { // Your code here. }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body> 
 
  
    ,  ,        . ,           ,   ,     -   . 
 
              ,    .       ,      ,      ,         (   ),    ,     . 
 
     , ,       : 
 
  
 
          ,   ,      ,   . 
 
    getImageData    .  ,       ,          .           7,  ,      .       (x,y)    (x + y × width) × 4 
 
      (),          () . 
 
            , ,   ,       .         .      -      ,    9.        ,    ,       ,    ,    . 
 
      .      ,       .  ,  ,    . 
 
       fillRect,   -  ,  ,     . 
 
 <script> tools["Flood fill"] = function(event, cx) { //   }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body> 
 ,      .    ,     ,      .     ,   ,    .. 
 
      "mousedown"  ,   ,   .  , ,    "mousemove",      ,           . 
 
         .         fillStyle, strokeStyle,  lineWidth     . 
 
       .    file,       .   URL     . 
 
    .  save       .    ,       .   ,   . 
 
  DOM 
       30  DOM.   -  . 
 
      DOM  HTML.     HTML    –   DOM        ,    -   .       querySelector   ,     DOM  . 
 
      DOM      JavaScript,   .       DOM   JavaScript.      13,      DOM  .      ,    . 
 
   –    elt   13.        ,     ,  ,    ,      . 
 
 function elt(name, attributes) { var node = document.createElement(name); if (attributes) { for (var attr in attributes) if (attributes.hasOwnProperty(attr)) node.setAttribute(attr, attributes[attr]); } for (var i = 2; i < arguments.length; i++) { var child = arguments[i]; if (typeof child == "string") child = document.createTextNode(child); node.appendChild(child); } return node; } 
 
       ,       . 
 
  
    –  createPaint,      DOM,     .      ,    controls,           . 
 
 var controls = Object.create(null); function createPaint(parent) { var canvas = elt("canvas", {width: 500, height: 300}); var cx = canvas.getContext("2d"); var toolbar = elt("div", {class: "toolbar"}); for (var name in controls) toolbar.appendChild(controls[name](cx)); var panel = elt("div", {class: "picturepanel"}, canvas); parent.appendChild(elt("div", null, panel, toolbar)); } 
 
           ,    –   .        –    ,   (  fillStyle)    (  lineWidth). 
 
          ,      ,     . 
 
   
   ,    –  ,    .      controls,        ,           ,       .       ,          . 
 
 var tools = Object.create(null); controls.tool = function(cx) { var select = elt("select"); for (var name in tools) select.appendChild(elt("option", null, name)); cx.canvas.addEventListener("mousedown", function(event) { if (event.which == 1) { tools[select.value](event, cx); event.preventDefault(); } }); return elt("span", null, "Tool: ", select); }; 
 
   tool        ,    "mousedown"          ,    event  context.    preventDefault,          . 
 
    – ,     .   ,           .    13   getBoundingClientRect     .  ,   ,     .    clientX  clientY      ,                . 
 
 function relativePos(event, element) { var rect = element.getBoundingClientRect(); return {x: Math.floor(event.clientX - rect.left), y: Math.floor(event.clientY - rect.top)}; } 
 
       "mousemove",    .  trackDrag       . 
 
 function trackDrag(onMove, onEnd) { function end(event) { removeEventListener("mousemove", onMove); removeEventListener("mouseup", end); if (onEnd) onEnd(event); } addEventListener("mousemove", onMove); addEventListener("mouseup", end); } 
 
    .  – ,      "mousemove",   – ,     .      . 
 
           . 
 
 tools.Line = function(event, cx, onEnd) { cx.lineCap = "round"; var pos = relativePos(event, cx.canvas); trackDrag(function(event) { cx.beginPath(); cx.moveTo(pos.x, pos.y); pos = relativePos(event, cx.canvas); cx.lineTo(pos.x, pos.y); cx.stroke(); }, onEnd); }; 
 
      lineCap  “round”, -      ,   ,     .     ,      .     ,      ,     lineCap  . 
 
 ,    "mousemove",  ,   ,         ,      strokeStyle  lineWidth,     . 
 
  onEnd   ,  trackDrag.        ,        undefined,       .        ,  erase,      . 
 
 tools.Erase = function(event, cx) { cx.globalCompositeOperation = "destination-out"; tools.Line(event, cx, function() { cx.globalCompositeOperation = "source-over"; }); }; 
 
  globalCompositeOperation   ,        .  ,   "source-over",  ,  ,  ,   .   ,    ,     ,   . 
 
  “erase”  globalCompositeOperation  "destination-out",    ,     . 
 
         .          (     strokeStyle  lineWidth  ),   . ,   ,  . 
 
     
 ,              ,      . 
 
   18      .        .          ,            .    - .   - "date", "email", "url"  "number".      .      – “text”,     ,     ,       . ,   ,       ,       ,       . 
 
 controls.color = function(cx) { var input = elt("input", {type: "color"}); input.addEventListener("change", function() { cx.fillStyle = input.value; cx.strokeStyle = input.value; }); return elt("span", null, "Color: ", input); }; 
 
     color     fillStyle  strokeStyle    . 
 
      . 
 
 controls.brushSize = function(cx) { var select = elt("select"); var sizes = [1, 2, 3, 5, 8, 12, 25, 35, 50, 75, 100]; sizes.forEach(function(size) { select.appendChild(elt("option", {value: size}, size + " pixels")); }); select.addEventListener("change", function() { cx.lineWidth = select.value; }); return elt("span", null, "Brush size: ", select); }; 
 
       ,    ,    lineWidth    . 
 
  
  ,     ,      URL  .     http:  https:, URL      ,      .  URL  ,   HTML : 
 
 data:text/html,<h1 style="color:red">Hello!</h1> 
 
  URL    , , ,       .           ,  ,      - . 
 
       toDataURL,   URL  ,        .            .        URL   .       ,      href  ,            . 
 
 controls.save = function(cx) { var link = elt("a", {href: "/"}, "Save"); function update() { try { link.href = cx.canvas.toDataURL(); } catch (e) { if (e instanceof SecurityError) link.href = "javascript:alert(" + JSON.stringify("Can't save: " + e.toString()) + ")"; else throw e; } } link.addEventListener("mouseover", update); link.addEventListener("focus", update); return link; }; 
 
  ,          ,       ,      ,     . 
 
     ,      URL  ,    .       . 
 
           .     URL   ,      ,       (.  17),    ,    ,    . 
 
        (   ).        ,      . 
 
     ,  ,  ,    ,     «».  ,  URL  ,     «» .    ,     . 
 
     try/catch   update   .   «»,  toDataURL  ,   SecurityError.           URL   javascript:.     ,   ,     ,   . 
 
   
              URL.    ,      URL     . 
 
 function loadImageURL(cx, url) { var image = document.createElement("img"); image.addEventListener("load", function() { var color = cx.fillStyle, size = cx.lineWidth; cx.canvas.width = image.width; cx.canvas.height = image.height; cx.drawImage(image, 0, 0); cx.fillStyle = color; cx.strokeStyle = color; cx.lineWidth = size; }); image.src = url; } 
 
     ,    . -          (fillStyle  lineWidth),              . 
 
         FileReader   18.     readAsText        readAsDataURL –   ,   .   ,   ,  URL  ,     loadImageURL    . 
 
 controls.openFile = function(cx) { var input = elt("input", {type: "file"}); input.addEventListener("change", function() { if (input.files.length == 0) return; var reader = new FileReader(); reader.addEventListener("load", function() { loadImageURL(cx, reader.result); }); reader.readAsDataURL(input.files[0]); }); return elt("div", null, "Open file: ", input); }; 
 
    URL  .       ,       URL,        “change”.         ,     –    Enter,     load. 
 
 controls.openURL = function(cx) { var input = elt("input", {type: "text"}); var form = elt("form", null, "Open URL: ", input, elt("button", {type: "submit"}, "load")); form.addEventListener("submit", function(event) { event.preventDefault(); loadImageURL(cx, form.querySelector("input").value); }); return form; }; 
 
      ,   ,      . 
 
  
        ,    ,     . 
 
 tools.Text = function(event, cx) { var text = prompt("Text:", ""); if (text) { var pos = relativePos(event, cx.canvas); cx.font = Math.max(7, cx.lineWidth) + "px sans-serif"; cx.fillText(text, pos.x, pos.y); } }; 
 
          ,        sans-serif   ,    .   – 7 ,      . 
 
      - – “”.      ,    ,            . 
 
 tools.Spray = function(event, cx) { var radius = cx.lineWidth / 2; var area = radius * radius * Math.PI; var dotsPerTick = Math.ceil(area / 30); var currentPos = relativePos(event, cx.canvas); var spray = setInterval(function() { for (var i = 0; i < dotsPerTick; i++) { var offset = randomPointInRadius(radius); cx.fillRect(currentPos.x + offset.x, currentPos.y + offset.y, 1, 1); } }, 25); trackDrag(function(event) { currentPos = relativePos(event, cx.canvas); }, function() { clearInterval(spray); }); }; 
 
   setInterval      25 ,    .  trackDrag   ,  currentPos     ,       . 
 
  ,         ,           30.         randomPointInRadius. 
 
 function randomPointInRadius(radius) { for (;;) { var x = Math.random() * 2 - 1; var y = Math.random() * 2 - 1; if (x * x + y * y <= 1) return {x: x * radius, y: y * radius}; } } 
 
        (-1,-1)  (1,1).   ,  ,         1.    ,    ,   . 
 
      .       ,        Math.sin  Math.cos   .            .    ,    ,   . 
 
      .    . 
 
 <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body> 
 
  
        .    . 
 
  
   Rectangle,   (.  fillRect   16)  .      ,     ,    ,    . ,         . 
 
   ,  ,        .           ,       ,    ? 
 
   ,    position: absolute,      13.   ,      .  pageX  pageY          ,      left, top, width  height. 
 
 <script> tools.Rectangle = function(event, cx) { //   }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body> 
 
   
      –  ,        ,    .   . 
 
        .  toDataURL    ,       URL   .       getImageData,          width, height  data.   data     0  255,        - red, green, blue  alpha (). 
 
        ,  ,    (  –  ),   ,      . 
 
 function pixelAt(cx, x, y) { var data = cx.getImageData(x, y, 1, 1); console.log(data.data); } var canvas = document.createElement("canvas"); var cx = canvas.getContext("2d"); pixelAt(cx, 10, 10); // → [0, 0, 0, 0] cx.fillStyle = "red"; cx.fillRect(10, 10, 1, 1); pixelAt(cx, 10, 10); // → [255, 0, 0, 255] 
 
  getImageData     x  y,    ,      . 
 
     ,         .        color   .  ,  fillStyle  strokeStyle    ,   . 
 
 ,      ,   CSS,    rgb(R, G, B),      15. 
 
  getImageData    ,   toDataURL –   ,      ,    .   try/catch        alert. 
 
 <script> tools["Pick color"] = function(event, cx) { // Your code here. }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body> 
 
  
    ,  ,        . ,           ,   ,     -   . 
 
              ,    .       ,      ,      ,         (   ),    ,     . 
 
     , ,       : 
 
  
 
          ,   ,      ,   . 
 
    getImageData    .  ,       ,          .           7,  ,      .       (x,y)    (x + y × width) × 4 
 
      (),          () . 
 
            , ,   ,       .         .      -      ,    9.        ,    ,       ,    ,    . 
 
      .      ,       .  ,  ,    . 
 
       fillRect,   -  ,  ,     . 
 
 <script> tools["Flood fill"] = function(event, cx) { //   }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body> 
 ,      .    ,     ,      .     ,   ,    .. 
 
      "mousedown"  ,   ,   .  , ,    "mousemove",      ,           . 
 
         .         fillStyle, strokeStyle,  lineWidth     . 
 
       .    file,       .   URL     . 
 
    .  save       .    ,       .   ,   . 
 
  DOM 
       30  DOM.   -  . 
 
      DOM  HTML.     HTML    –   DOM        ,    -   .       querySelector   ,     DOM  . 
 
      DOM      JavaScript,   .       DOM   JavaScript.      13,      DOM  .      ,    . 
 
   –    elt   13.        ,     ,  ,    ,      . 
 
 function elt(name, attributes) { var node = document.createElement(name); if (attributes) { for (var attr in attributes) if (attributes.hasOwnProperty(attr)) node.setAttribute(attr, attributes[attr]); } for (var i = 2; i < arguments.length; i++) { var child = arguments[i]; if (typeof child == "string") child = document.createTextNode(child); node.appendChild(child); } return node; } 
 
       ,       . 
 
  
    –  createPaint,      DOM,     .      ,    controls,           . 
 
 var controls = Object.create(null); function createPaint(parent) { var canvas = elt("canvas", {width: 500, height: 300}); var cx = canvas.getContext("2d"); var toolbar = elt("div", {class: "toolbar"}); for (var name in controls) toolbar.appendChild(controls[name](cx)); var panel = elt("div", {class: "picturepanel"}, canvas); parent.appendChild(elt("div", null, panel, toolbar)); } 
 
           ,    –   .        –    ,   (  fillStyle)    (  lineWidth). 
 
          ,      ,     . 
 
   
   ,    –  ,    .      controls,        ,           ,       .       ,          . 
 
 var tools = Object.create(null); controls.tool = function(cx) { var select = elt("select"); for (var name in tools) select.appendChild(elt("option", null, name)); cx.canvas.addEventListener("mousedown", function(event) { if (event.which == 1) { tools[select.value](event, cx); event.preventDefault(); } }); return elt("span", null, "Tool: ", select); }; 
 
   tool        ,    "mousedown"          ,    event  context.    preventDefault,          . 
 
    – ,     .   ,           .    13   getBoundingClientRect     .  ,   ,     .    clientX  clientY      ,                . 
 
 function relativePos(event, element) { var rect = element.getBoundingClientRect(); return {x: Math.floor(event.clientX - rect.left), y: Math.floor(event.clientY - rect.top)}; } 
 
       "mousemove",    .  trackDrag       . 
 
 function trackDrag(onMove, onEnd) { function end(event) { removeEventListener("mousemove", onMove); removeEventListener("mouseup", end); if (onEnd) onEnd(event); } addEventListener("mousemove", onMove); addEventListener("mouseup", end); } 
 
    .  – ,      "mousemove",   – ,     .      . 
 
           . 
 
 tools.Line = function(event, cx, onEnd) { cx.lineCap = "round"; var pos = relativePos(event, cx.canvas); trackDrag(function(event) { cx.beginPath(); cx.moveTo(pos.x, pos.y); pos = relativePos(event, cx.canvas); cx.lineTo(pos.x, pos.y); cx.stroke(); }, onEnd); }; 
 
      lineCap  “round”, -      ,   ,     .     ,      .     ,      ,     lineCap  . 
 
 ,    "mousemove",  ,   ,         ,      strokeStyle  lineWidth,     . 
 
  onEnd   ,  trackDrag.        ,        undefined,       .        ,  erase,      . 
 
 tools.Erase = function(event, cx) { cx.globalCompositeOperation = "destination-out"; tools.Line(event, cx, function() { cx.globalCompositeOperation = "source-over"; }); }; 
 
  globalCompositeOperation   ,        .  ,   "source-over",  ,  ,  ,   .   ,    ,     ,   . 
 
  “erase”  globalCompositeOperation  "destination-out",    ,     . 
 
         .          (     strokeStyle  lineWidth  ),   . ,   ,  . 
 
     
 ,              ,      . 
 
   18      .        .          ,            .    - .   - "date", "email", "url"  "number".      .      – “text”,     ,     ,       . ,   ,       ,       ,       . 
 
 controls.color = function(cx) { var input = elt("input", {type: "color"}); input.addEventListener("change", function() { cx.fillStyle = input.value; cx.strokeStyle = input.value; }); return elt("span", null, "Color: ", input); }; 
 
     color     fillStyle  strokeStyle    . 
 
      . 
 
 controls.brushSize = function(cx) { var select = elt("select"); var sizes = [1, 2, 3, 5, 8, 12, 25, 35, 50, 75, 100]; sizes.forEach(function(size) { select.appendChild(elt("option", {value: size}, size + " pixels")); }); select.addEventListener("change", function() { cx.lineWidth = select.value; }); return elt("span", null, "Brush size: ", select); }; 
 
       ,    ,    lineWidth    . 
 
  
  ,     ,      URL  .     http:  https:, URL      ,      .  URL  ,   HTML : 
 
 data:text/html,<h1 style="color:red">Hello!</h1> 
 
  URL    , , ,       .           ,  ,      - . 
 
       toDataURL,   URL  ,        .            .        URL   .       ,      href  ,            . 
 
 controls.save = function(cx) { var link = elt("a", {href: "/"}, "Save"); function update() { try { link.href = cx.canvas.toDataURL(); } catch (e) { if (e instanceof SecurityError) link.href = "javascript:alert(" + JSON.stringify("Can't save: " + e.toString()) + ")"; else throw e; } } link.addEventListener("mouseover", update); link.addEventListener("focus", update); return link; }; 
 
  ,          ,       ,      ,     . 
 
     ,      URL  ,    .       . 
 
           .     URL   ,      ,       (.  17),    ,    ,    . 
 
        (   ).        ,      . 
 
     ,  ,  ,    ,     «».  ,  URL  ,     «» .    ,     . 
 
     try/catch   update   .   «»,  toDataURL  ,   SecurityError.           URL   javascript:.     ,   ,     ,   . 
 
   
              URL.    ,      URL     . 
 
 function loadImageURL(cx, url) { var image = document.createElement("img"); image.addEventListener("load", function() { var color = cx.fillStyle, size = cx.lineWidth; cx.canvas.width = image.width; cx.canvas.height = image.height; cx.drawImage(image, 0, 0); cx.fillStyle = color; cx.strokeStyle = color; cx.lineWidth = size; }); image.src = url; } 
 
     ,    . -          (fillStyle  lineWidth),              . 
 
         FileReader   18.     readAsText        readAsDataURL –   ,   .   ,   ,  URL  ,     loadImageURL    . 
 
 controls.openFile = function(cx) { var input = elt("input", {type: "file"}); input.addEventListener("change", function() { if (input.files.length == 0) return; var reader = new FileReader(); reader.addEventListener("load", function() { loadImageURL(cx, reader.result); }); reader.readAsDataURL(input.files[0]); }); return elt("div", null, "Open file: ", input); }; 
 
    URL  .       ,       URL,        “change”.         ,     –    Enter,     load. 
 
 controls.openURL = function(cx) { var input = elt("input", {type: "text"}); var form = elt("form", null, "Open URL: ", input, elt("button", {type: "submit"}, "load")); form.addEventListener("submit", function(event) { event.preventDefault(); loadImageURL(cx, form.querySelector("input").value); }); return form; }; 
 
      ,   ,      . 
 
  
        ,    ,     . 
 
 tools.Text = function(event, cx) { var text = prompt("Text:", ""); if (text) { var pos = relativePos(event, cx.canvas); cx.font = Math.max(7, cx.lineWidth) + "px sans-serif"; cx.fillText(text, pos.x, pos.y); } }; 
 
          ,        sans-serif   ,    .   – 7 ,      . 
 
      - – “”.      ,    ,            . 
 
 tools.Spray = function(event, cx) { var radius = cx.lineWidth / 2; var area = radius * radius * Math.PI; var dotsPerTick = Math.ceil(area / 30); var currentPos = relativePos(event, cx.canvas); var spray = setInterval(function() { for (var i = 0; i < dotsPerTick; i++) { var offset = randomPointInRadius(radius); cx.fillRect(currentPos.x + offset.x, currentPos.y + offset.y, 1, 1); } }, 25); trackDrag(function(event) { currentPos = relativePos(event, cx.canvas); }, function() { clearInterval(spray); }); }; 
 
   setInterval      25 ,    .  trackDrag   ,  currentPos     ,       . 
 
  ,         ,           30.         randomPointInRadius. 
 
 function randomPointInRadius(radius) { for (;;) { var x = Math.random() * 2 - 1; var y = Math.random() * 2 - 1; if (x * x + y * y <= 1) return {x: x * radius, y: y * radius}; } } 
 
        (-1,-1)  (1,1).   ,  ,         1.    ,    ,   . 
 
      .       ,        Math.sin  Math.cos   .            .    ,    ,   . 
 
      .    . 
 
 <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body> 
 
  
        .    . 
 
  
   Rectangle,   (.  fillRect   16)  .      ,     ,    ,    . ,         . 
 
   ,  ,        .           ,       ,    ? 
 
   ,    position: absolute,      13.   ,      .  pageX  pageY          ,      left, top, width  height. 
 
 <script> tools.Rectangle = function(event, cx) { //   }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body> 
 
   
      –  ,        ,    .   . 
 
        .  toDataURL    ,       URL   .       getImageData,          width, height  data.   data     0  255,        - red, green, blue  alpha (). 
 
        ,  ,    (  –  ),   ,      . 
 
 function pixelAt(cx, x, y) { var data = cx.getImageData(x, y, 1, 1); console.log(data.data); } var canvas = document.createElement("canvas"); var cx = canvas.getContext("2d"); pixelAt(cx, 10, 10); // → [0, 0, 0, 0] cx.fillStyle = "red"; cx.fillRect(10, 10, 1, 1); pixelAt(cx, 10, 10); // → [255, 0, 0, 255] 
 
  getImageData     x  y,    ,      . 
 
     ,         .        color   .  ,  fillStyle  strokeStyle    ,   . 
 
 ,      ,   CSS,    rgb(R, G, B),      15. 
 
  getImageData    ,   toDataURL –   ,      ,    .   try/catch        alert. 
 
 <script> tools["Pick color"] = function(event, cx) { // Your code here. }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body> 
 
  
    ,  ,        . ,           ,   ,     -   . 
 
              ,    .       ,      ,      ,         (   ),    ,     . 
 
     , ,       : 
 
  
 
          ,   ,      ,   . 
 
    getImageData    .  ,       ,          .           7,  ,      .       (x,y)    (x + y × width) × 4 
 
      (),          () . 
 
            , ,   ,       .         .      -      ,    9.        ,    ,       ,    ,    . 
 
      .      ,       .  ,  ,    . 
 
       fillRect,   -  ,  ,     . 
 
 <script> tools["Flood fill"] = function(event, cx) { //   }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body> 

, . , , . , , ..

"mousedown" , , . , , "mousemove", , .

. fillStyle, strokeStyle, lineWidth .

. file, . URL .

. save . , . , .

DOM
30 DOM. - .

DOM HTML. HTML – DOM , - . querySelector , DOM .

DOM JavaScript, . DOM JavaScript. 13, DOM . , .

– elt 13. , , , , .

function elt(name, attributes) { var node = document.createElement(name); if (attributes) { for (var attr in attributes) if (attributes.hasOwnProperty(attr)) node.setAttribute(attr, attributes[attr]); } for (var i = 2; i < arguments.length; i++) { var child = arguments[i]; if (typeof child == "string") child = document.createTextNode(child); node.appendChild(child); } return node; }

, .


– createPaint, DOM, . , controls, .

var controls = Object.create(null); function createPaint(parent) { var canvas = elt("canvas", {width: 500, height: 300}); var cx = canvas.getContext("2d"); var toolbar = elt("div", {class: "toolbar"}); for (var name in controls) toolbar.appendChild(controls[name](cx)); var panel = elt("div", {class: "picturepanel"}, canvas); parent.appendChild(elt("div", null, panel, toolbar)); }

, – . – , ( fillStyle) ( lineWidth).

, , .


, – , . controls, , , . , .

var tools = Object.create(null); controls.tool = function(cx) { var select = elt("select"); for (var name in tools) select.appendChild(elt("option", null, name)); cx.canvas.addEventListener("mousedown", function(event) { if (event.which == 1) { tools[select.value](event, cx); event.preventDefault(); } }); return elt("span", null, "Tool: ", select); };

tool , "mousedown" , event context. preventDefault, .

– , . , . 13 getBoundingClientRect . , , . clientX clientY , .

function relativePos(event, element) { var rect = element.getBoundingClientRect(); return {x: Math.floor(event.clientX - rect.left), y: Math.floor(event.clientY - rect.top)}; }

"mousemove", . trackDrag .

function trackDrag(onMove, onEnd) { function end(event) { removeEventListener("mousemove", onMove); removeEventListener("mouseup", end); if (onEnd) onEnd(event); } addEventListener("mousemove", onMove); addEventListener("mouseup", end); }

. – , "mousemove", – , . .

.

tools.Line = function(event, cx, onEnd) { cx.lineCap = "round"; var pos = relativePos(event, cx.canvas); trackDrag(function(event) { cx.beginPath(); cx.moveTo(pos.x, pos.y); pos = relativePos(event, cx.canvas); cx.lineTo(pos.x, pos.y); cx.stroke(); }, onEnd); };

lineCap “round”, - , , . , . , , lineCap .

, "mousemove", , , , strokeStyle lineWidth, .

onEnd , trackDrag. , undefined, . , erase, .

tools.Erase = function(event, cx) { cx.globalCompositeOperation = "destination-out"; tools.Line(event, cx, function() { cx.globalCompositeOperation = "source-over"; }); };

globalCompositeOperation , . , "source-over", , , , . , , , .

“erase” globalCompositeOperation "destination-out", , .

. ( strokeStyle lineWidth ), . , , .


, , .

18 . . , . - . - "date", "email", "url" "number". . – “text”, , , . , , , , .

controls.color = function(cx) { var input = elt("input", {type: "color"}); input.addEventListener("change", function() { cx.fillStyle = input.value; cx.strokeStyle = input.value; }); return elt("span", null, "Color: ", input); };

color fillStyle strokeStyle .

.

controls.brushSize = function(cx) { var select = elt("select"); var sizes = [1, 2, 3, 5, 8, 12, 25, 35, 50, 75, 100]; sizes.forEach(function(size) { select.appendChild(elt("option", {value: size}, size + " pixels")); }); select.addEventListener("change", function() { cx.lineWidth = select.value; }); return elt("span", null, "Brush size: ", select); };

, , lineWidth .


, , URL . http: https:, URL , . URL , HTML :

data:text/html,<h1 style="color:red">Hello!</h1>

URL , , , . , , - .

toDataURL, URL , . . URL . , href , .

controls.save = function(cx) { var link = elt("a", {href: "/"}, "Save"); function update() { try { link.href = cx.canvas.toDataURL(); } catch (e) { if (e instanceof SecurityError) link.href = "javascript:alert(" + JSON.stringify("Can't save: " + e.toString()) + ")"; else throw e; } } link.addEventListener("mouseover", update); link.addEventListener("focus", update); return link; };

, , , , .

, URL , . .

. URL , , (. 17), , , .

( ). , .

, , , , «». , URL , «» . , .

try/catch update . «», toDataURL , SecurityError. URL javascript:. , , , .


URL. , URL .

function loadImageURL(cx, url) { var image = document.createElement("img"); image.addEventListener("load", function() { var color = cx.fillStyle, size = cx.lineWidth; cx.canvas.width = image.width; cx.canvas.height = image.height; cx.drawImage(image, 0, 0); cx.fillStyle = color; cx.strokeStyle = color; cx.lineWidth = size; }); image.src = url; }

, . - (fillStyle lineWidth), .

FileReader 18. readAsText readAsDataURL – , . , , URL , loadImageURL .

controls.openFile = function(cx) { var input = elt("input", {type: "file"}); input.addEventListener("change", function() { if (input.files.length == 0) return; var reader = new FileReader(); reader.addEventListener("load", function() { loadImageURL(cx, reader.result); }); reader.readAsDataURL(input.files[0]); }); return elt("div", null, "Open file: ", input); };

URL . , URL, “change”. , – Enter, load.

controls.openURL = function(cx) { var input = elt("input", {type: "text"}); var form = elt("form", null, "Open URL: ", input, elt("button", {type: "submit"}, "load")); form.addEventListener("submit", function(event) { event.preventDefault(); loadImageURL(cx, form.querySelector("input").value); }); return form; };

, , .


, , .

tools.Text = function(event, cx) { var text = prompt("Text:", ""); if (text) { var pos = relativePos(event, cx.canvas); cx.font = Math.max(7, cx.lineWidth) + "px sans-serif"; cx.fillText(text, pos.x, pos.y); } };

, sans-serif , . – 7 , .

- – “”. , , .

tools.Spray = function(event, cx) { var radius = cx.lineWidth / 2; var area = radius * radius * Math.PI; var dotsPerTick = Math.ceil(area / 30); var currentPos = relativePos(event, cx.canvas); var spray = setInterval(function() { for (var i = 0; i < dotsPerTick; i++) { var offset = randomPointInRadius(radius); cx.fillRect(currentPos.x + offset.x, currentPos.y + offset.y, 1, 1); } }, 25); trackDrag(function(event) { currentPos = relativePos(event, cx.canvas); }, function() { clearInterval(spray); }); };

setInterval 25 , . trackDrag , currentPos , .

, , 30. randomPointInRadius.

function randomPointInRadius(radius) { for (;;) { var x = Math.random() * 2 - 1; var y = Math.random() * 2 - 1; if (x * x + y * y <= 1) return {x: x * radius, y: y * radius}; } }

(-1,-1) (1,1). , , 1. , , .

. , Math.sin Math.cos . . , , .

. .

<link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>


. .


Rectangle, (. fillRect 16) . , , , . , .

, , . , , ?

, position: absolute, 13. , . pageX pageY , left, top, width height.

<script> tools.Rectangle = function(event, cx) { // }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>


– , , . .

. toDataURL , URL . getImageData, width, height data. data 0 255, - red, green, blue alpha ().

, , ( – ), , .

function pixelAt(cx, x, y) { var data = cx.getImageData(x, y, 1, 1); console.log(data.data); } var canvas = document.createElement("canvas"); var cx = canvas.getContext("2d"); pixelAt(cx, 10, 10); // → [0, 0, 0, 0] cx.fillStyle = "red"; cx.fillRect(10, 10, 1, 1); pixelAt(cx, 10, 10); // → [255, 0, 0, 255]

getImageData x y, , .

, . color . , fillStyle strokeStyle , .

, , CSS, rgb(R, G, B), 15.

getImageData , toDataURL – , , . try/catch alert.

<script> tools["Pick color"] = function(event, cx) { // Your code here. }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>


, , . , , , - .

, . , , , ( ), , .

, , :



, , , .

getImageData . , , . 7, , . (x,y) (x + y × width) × 4

(), () .

, , , . . - , 9. , , , , .

. , . , , .

fillRect, - , , .

<script> tools["Flood fill"] = function(event, cx) { // }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>

 ,      .    ,     ,      .     ,   ,    .. 
 
      "mousedown"  ,   ,   .  , ,    "mousemove",      ,           . 
 
         .         fillStyle, strokeStyle,  lineWidth     . 
 
       .    file,       .   URL     . 
 
    .  save       .    ,       .   ,   . 
 
  DOM 
       30  DOM.   -  . 
 
      DOM  HTML.     HTML    –   DOM        ,    -   .       querySelector   ,     DOM  . 
 
      DOM      JavaScript,   .       DOM   JavaScript.      13,      DOM  .      ,    . 
 
   –    elt   13.        ,     ,  ,    ,      . 
 
 function elt(name, attributes) { var node = document.createElement(name); if (attributes) { for (var attr in attributes) if (attributes.hasOwnProperty(attr)) node.setAttribute(attr, attributes[attr]); } for (var i = 2; i < arguments.length; i++) { var child = arguments[i]; if (typeof child == "string") child = document.createTextNode(child); node.appendChild(child); } return node; } 
 
       ,       . 
 
  
    –  createPaint,      DOM,     .      ,    controls,           . 
 
 var controls = Object.create(null); function createPaint(parent) { var canvas = elt("canvas", {width: 500, height: 300}); var cx = canvas.getContext("2d"); var toolbar = elt("div", {class: "toolbar"}); for (var name in controls) toolbar.appendChild(controls[name](cx)); var panel = elt("div", {class: "picturepanel"}, canvas); parent.appendChild(elt("div", null, panel, toolbar)); } 
 
           ,    –   .        –    ,   (  fillStyle)    (  lineWidth). 
 
          ,      ,     . 
 
   
   ,    –  ,    .      controls,        ,           ,       .       ,          . 
 
 var tools = Object.create(null); controls.tool = function(cx) { var select = elt("select"); for (var name in tools) select.appendChild(elt("option", null, name)); cx.canvas.addEventListener("mousedown", function(event) { if (event.which == 1) { tools[select.value](event, cx); event.preventDefault(); } }); return elt("span", null, "Tool: ", select); }; 
 
   tool        ,    "mousedown"          ,    event  context.    preventDefault,          . 
 
    – ,     .   ,           .    13   getBoundingClientRect     .  ,   ,     .    clientX  clientY      ,                . 
 
 function relativePos(event, element) { var rect = element.getBoundingClientRect(); return {x: Math.floor(event.clientX - rect.left), y: Math.floor(event.clientY - rect.top)}; } 
 
       "mousemove",    .  trackDrag       . 
 
 function trackDrag(onMove, onEnd) { function end(event) { removeEventListener("mousemove", onMove); removeEventListener("mouseup", end); if (onEnd) onEnd(event); } addEventListener("mousemove", onMove); addEventListener("mouseup", end); } 
 
    .  – ,      "mousemove",   – ,     .      . 
 
           . 
 
 tools.Line = function(event, cx, onEnd) { cx.lineCap = "round"; var pos = relativePos(event, cx.canvas); trackDrag(function(event) { cx.beginPath(); cx.moveTo(pos.x, pos.y); pos = relativePos(event, cx.canvas); cx.lineTo(pos.x, pos.y); cx.stroke(); }, onEnd); }; 
 
      lineCap  “round”, -      ,   ,     .     ,      .     ,      ,     lineCap  . 
 
 ,    "mousemove",  ,   ,         ,      strokeStyle  lineWidth,     . 
 
  onEnd   ,  trackDrag.        ,        undefined,       .        ,  erase,      . 
 
 tools.Erase = function(event, cx) { cx.globalCompositeOperation = "destination-out"; tools.Line(event, cx, function() { cx.globalCompositeOperation = "source-over"; }); }; 
 
  globalCompositeOperation   ,        .  ,   "source-over",  ,  ,  ,   .   ,    ,     ,   . 
 
  “erase”  globalCompositeOperation  "destination-out",    ,     . 
 
         .          (     strokeStyle  lineWidth  ),   . ,   ,  . 
 
     
 ,              ,      . 
 
   18      .        .          ,            .    - .   - "date", "email", "url"  "number".      .      – “text”,     ,     ,       . ,   ,       ,       ,       . 
 
 controls.color = function(cx) { var input = elt("input", {type: "color"}); input.addEventListener("change", function() { cx.fillStyle = input.value; cx.strokeStyle = input.value; }); return elt("span", null, "Color: ", input); }; 
 
     color     fillStyle  strokeStyle    . 
 
      . 
 
 controls.brushSize = function(cx) { var select = elt("select"); var sizes = [1, 2, 3, 5, 8, 12, 25, 35, 50, 75, 100]; sizes.forEach(function(size) { select.appendChild(elt("option", {value: size}, size + " pixels")); }); select.addEventListener("change", function() { cx.lineWidth = select.value; }); return elt("span", null, "Brush size: ", select); }; 
 
       ,    ,    lineWidth    . 
 
  
  ,     ,      URL  .     http:  https:, URL      ,      .  URL  ,   HTML : 
 
 data:text/html,<h1 style="color:red">Hello!</h1> 
 
  URL    , , ,       .           ,  ,      - . 
 
       toDataURL,   URL  ,        .            .        URL   .       ,      href  ,            . 
 
 controls.save = function(cx) { var link = elt("a", {href: "/"}, "Save"); function update() { try { link.href = cx.canvas.toDataURL(); } catch (e) { if (e instanceof SecurityError) link.href = "javascript:alert(" + JSON.stringify("Can't save: " + e.toString()) + ")"; else throw e; } } link.addEventListener("mouseover", update); link.addEventListener("focus", update); return link; }; 
 
  ,          ,       ,      ,     . 
 
     ,      URL  ,    .       . 
 
           .     URL   ,      ,       (.  17),    ,    ,    . 
 
        (   ).        ,      . 
 
     ,  ,  ,    ,     «».  ,  URL  ,     «» .    ,     . 
 
     try/catch   update   .   «»,  toDataURL  ,   SecurityError.           URL   javascript:.     ,   ,     ,   . 
 
   
              URL.    ,      URL     . 
 
 function loadImageURL(cx, url) { var image = document.createElement("img"); image.addEventListener("load", function() { var color = cx.fillStyle, size = cx.lineWidth; cx.canvas.width = image.width; cx.canvas.height = image.height; cx.drawImage(image, 0, 0); cx.fillStyle = color; cx.strokeStyle = color; cx.lineWidth = size; }); image.src = url; } 
 
     ,    . -          (fillStyle  lineWidth),              . 
 
         FileReader   18.     readAsText        readAsDataURL –   ,   .   ,   ,  URL  ,     loadImageURL    . 
 
 controls.openFile = function(cx) { var input = elt("input", {type: "file"}); input.addEventListener("change", function() { if (input.files.length == 0) return; var reader = new FileReader(); reader.addEventListener("load", function() { loadImageURL(cx, reader.result); }); reader.readAsDataURL(input.files[0]); }); return elt("div", null, "Open file: ", input); }; 
 
    URL  .       ,       URL,        “change”.         ,     –    Enter,     load. 
 
 controls.openURL = function(cx) { var input = elt("input", {type: "text"}); var form = elt("form", null, "Open URL: ", input, elt("button", {type: "submit"}, "load")); form.addEventListener("submit", function(event) { event.preventDefault(); loadImageURL(cx, form.querySelector("input").value); }); return form; }; 
 
      ,   ,      . 
 
  
        ,    ,     . 
 
 tools.Text = function(event, cx) { var text = prompt("Text:", ""); if (text) { var pos = relativePos(event, cx.canvas); cx.font = Math.max(7, cx.lineWidth) + "px sans-serif"; cx.fillText(text, pos.x, pos.y); } }; 
 
          ,        sans-serif   ,    .   – 7 ,      . 
 
      - – “”.      ,    ,            . 
 
 tools.Spray = function(event, cx) { var radius = cx.lineWidth / 2; var area = radius * radius * Math.PI; var dotsPerTick = Math.ceil(area / 30); var currentPos = relativePos(event, cx.canvas); var spray = setInterval(function() { for (var i = 0; i < dotsPerTick; i++) { var offset = randomPointInRadius(radius); cx.fillRect(currentPos.x + offset.x, currentPos.y + offset.y, 1, 1); } }, 25); trackDrag(function(event) { currentPos = relativePos(event, cx.canvas); }, function() { clearInterval(spray); }); }; 
 
   setInterval      25 ,    .  trackDrag   ,  currentPos     ,       . 
 
  ,         ,           30.         randomPointInRadius. 
 
 function randomPointInRadius(radius) { for (;;) { var x = Math.random() * 2 - 1; var y = Math.random() * 2 - 1; if (x * x + y * y <= 1) return {x: x * radius, y: y * radius}; } } 
 
        (-1,-1)  (1,1).   ,  ,         1.    ,    ,   . 
 
      .       ,        Math.sin  Math.cos   .            .    ,    ,   . 
 
      .    . 
 
 <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body> 
 
  
        .    . 
 
  
   Rectangle,   (.  fillRect   16)  .      ,     ,    ,    . ,         . 
 
   ,  ,        .           ,       ,    ? 
 
   ,    position: absolute,      13.   ,      .  pageX  pageY          ,      left, top, width  height. 
 
 <script> tools.Rectangle = function(event, cx) { //   }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body> 
 
   
      –  ,        ,    .   . 
 
        .  toDataURL    ,       URL   .       getImageData,          width, height  data.   data     0  255,        - red, green, blue  alpha (). 
 
        ,  ,    (  –  ),   ,      . 
 
 function pixelAt(cx, x, y) { var data = cx.getImageData(x, y, 1, 1); console.log(data.data); } var canvas = document.createElement("canvas"); var cx = canvas.getContext("2d"); pixelAt(cx, 10, 10); // → [0, 0, 0, 0] cx.fillStyle = "red"; cx.fillRect(10, 10, 1, 1); pixelAt(cx, 10, 10); // → [255, 0, 0, 255] 
 
  getImageData     x  y,    ,      . 
 
     ,         .        color   .  ,  fillStyle  strokeStyle    ,   . 
 
 ,      ,   CSS,    rgb(R, G, B),      15. 
 
  getImageData    ,   toDataURL –   ,      ,    .   try/catch        alert. 
 
 <script> tools["Pick color"] = function(event, cx) { // Your code here. }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body> 
 
  
    ,  ,        . ,           ,   ,     -   . 
 
              ,    .       ,      ,      ,         (   ),    ,     . 
 
     , ,       : 
 
  
 
          ,   ,      ,   . 
 
    getImageData    .  ,       ,          .           7,  ,      .       (x,y)    (x + y × width) × 4 
 
      (),          () . 
 
            , ,   ,       .         .      -      ,    9.        ,    ,       ,    ,    . 
 
      .      ,       .  ,  ,    . 
 
       fillRect,   -  ,  ,     . 
 
 <script> tools["Flood fill"] = function(event, cx) { //   }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body> 

, . , , . , , ..

"mousedown" , , . , , "mousemove", , .

. fillStyle, strokeStyle, lineWidth .

. file, . URL .

. save . , . , .

DOM
30 DOM. - .

DOM HTML. HTML – DOM , - . querySelector , DOM .

DOM JavaScript, . DOM JavaScript. 13, DOM . , .

– elt 13. , , , , .

function elt(name, attributes) { var node = document.createElement(name); if (attributes) { for (var attr in attributes) if (attributes.hasOwnProperty(attr)) node.setAttribute(attr, attributes[attr]); } for (var i = 2; i < arguments.length; i++) { var child = arguments[i]; if (typeof child == "string") child = document.createTextNode(child); node.appendChild(child); } return node; }

, .


– createPaint, DOM, . , controls, .

var controls = Object.create(null); function createPaint(parent) { var canvas = elt("canvas", {width: 500, height: 300}); var cx = canvas.getContext("2d"); var toolbar = elt("div", {class: "toolbar"}); for (var name in controls) toolbar.appendChild(controls[name](cx)); var panel = elt("div", {class: "picturepanel"}, canvas); parent.appendChild(elt("div", null, panel, toolbar)); }

, – . – , ( fillStyle) ( lineWidth).

, , .


, – , . controls, , , . , .

var tools = Object.create(null); controls.tool = function(cx) { var select = elt("select"); for (var name in tools) select.appendChild(elt("option", null, name)); cx.canvas.addEventListener("mousedown", function(event) { if (event.which == 1) { tools[select.value](event, cx); event.preventDefault(); } }); return elt("span", null, "Tool: ", select); };

tool , "mousedown" , event context. preventDefault, .

– , . , . 13 getBoundingClientRect . , , . clientX clientY , .

function relativePos(event, element) { var rect = element.getBoundingClientRect(); return {x: Math.floor(event.clientX - rect.left), y: Math.floor(event.clientY - rect.top)}; }

"mousemove", . trackDrag .

function trackDrag(onMove, onEnd) { function end(event) { removeEventListener("mousemove", onMove); removeEventListener("mouseup", end); if (onEnd) onEnd(event); } addEventListener("mousemove", onMove); addEventListener("mouseup", end); }

. – , "mousemove", – , . .

.

tools.Line = function(event, cx, onEnd) { cx.lineCap = "round"; var pos = relativePos(event, cx.canvas); trackDrag(function(event) { cx.beginPath(); cx.moveTo(pos.x, pos.y); pos = relativePos(event, cx.canvas); cx.lineTo(pos.x, pos.y); cx.stroke(); }, onEnd); };

lineCap “round”, - , , . , . , , lineCap .

, "mousemove", , , , strokeStyle lineWidth, .

onEnd , trackDrag. , undefined, . , erase, .

tools.Erase = function(event, cx) { cx.globalCompositeOperation = "destination-out"; tools.Line(event, cx, function() { cx.globalCompositeOperation = "source-over"; }); };

globalCompositeOperation , . , "source-over", , , , . , , , .

“erase” globalCompositeOperation "destination-out", , .

. ( strokeStyle lineWidth ), . , , .


, , .

18 . . , . - . - "date", "email", "url" "number". . – “text”, , , . , , , , .

controls.color = function(cx) { var input = elt("input", {type: "color"}); input.addEventListener("change", function() { cx.fillStyle = input.value; cx.strokeStyle = input.value; }); return elt("span", null, "Color: ", input); };

color fillStyle strokeStyle .

.

controls.brushSize = function(cx) { var select = elt("select"); var sizes = [1, 2, 3, 5, 8, 12, 25, 35, 50, 75, 100]; sizes.forEach(function(size) { select.appendChild(elt("option", {value: size}, size + " pixels")); }); select.addEventListener("change", function() { cx.lineWidth = select.value; }); return elt("span", null, "Brush size: ", select); };

, , lineWidth .


, , URL . http: https:, URL , . URL , HTML :

data:text/html,<h1 style="color:red">Hello!</h1>

URL , , , . , , - .

toDataURL, URL , . . URL . , href , .

controls.save = function(cx) { var link = elt("a", {href: "/"}, "Save"); function update() { try { link.href = cx.canvas.toDataURL(); } catch (e) { if (e instanceof SecurityError) link.href = "javascript:alert(" + JSON.stringify("Can't save: " + e.toString()) + ")"; else throw e; } } link.addEventListener("mouseover", update); link.addEventListener("focus", update); return link; };

, , , , .

, URL , . .

. URL , , (. 17), , , .

( ). , .

, , , , «». , URL , «» . , .

try/catch update . «», toDataURL , SecurityError. URL javascript:. , , , .


URL. , URL .

function loadImageURL(cx, url) { var image = document.createElement("img"); image.addEventListener("load", function() { var color = cx.fillStyle, size = cx.lineWidth; cx.canvas.width = image.width; cx.canvas.height = image.height; cx.drawImage(image, 0, 0); cx.fillStyle = color; cx.strokeStyle = color; cx.lineWidth = size; }); image.src = url; }

, . - (fillStyle lineWidth), .

FileReader 18. readAsText readAsDataURL – , . , , URL , loadImageURL .

controls.openFile = function(cx) { var input = elt("input", {type: "file"}); input.addEventListener("change", function() { if (input.files.length == 0) return; var reader = new FileReader(); reader.addEventListener("load", function() { loadImageURL(cx, reader.result); }); reader.readAsDataURL(input.files[0]); }); return elt("div", null, "Open file: ", input); };

URL . , URL, “change”. , – Enter, load.

controls.openURL = function(cx) { var input = elt("input", {type: "text"}); var form = elt("form", null, "Open URL: ", input, elt("button", {type: "submit"}, "load")); form.addEventListener("submit", function(event) { event.preventDefault(); loadImageURL(cx, form.querySelector("input").value); }); return form; };

, , .


, , .

tools.Text = function(event, cx) { var text = prompt("Text:", ""); if (text) { var pos = relativePos(event, cx.canvas); cx.font = Math.max(7, cx.lineWidth) + "px sans-serif"; cx.fillText(text, pos.x, pos.y); } };

, sans-serif , . – 7 , .

- – “”. , , .

tools.Spray = function(event, cx) { var radius = cx.lineWidth / 2; var area = radius * radius * Math.PI; var dotsPerTick = Math.ceil(area / 30); var currentPos = relativePos(event, cx.canvas); var spray = setInterval(function() { for (var i = 0; i < dotsPerTick; i++) { var offset = randomPointInRadius(radius); cx.fillRect(currentPos.x + offset.x, currentPos.y + offset.y, 1, 1); } }, 25); trackDrag(function(event) { currentPos = relativePos(event, cx.canvas); }, function() { clearInterval(spray); }); };

setInterval 25 , . trackDrag , currentPos , .

, , 30. randomPointInRadius.

function randomPointInRadius(radius) { for (;;) { var x = Math.random() * 2 - 1; var y = Math.random() * 2 - 1; if (x * x + y * y <= 1) return {x: x * radius, y: y * radius}; } }

(-1,-1) (1,1). , , 1. , , .

. , Math.sin Math.cos . . , , .

. .

<link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>


. .


Rectangle, (. fillRect 16) . , , , . , .

, , . , , ?

, position: absolute, 13. , . pageX pageY , left, top, width height.

<script> tools.Rectangle = function(event, cx) { // }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>


– , , . .

. toDataURL , URL . getImageData, width, height data. data 0 255, - red, green, blue alpha ().

, , ( – ), , .

function pixelAt(cx, x, y) { var data = cx.getImageData(x, y, 1, 1); console.log(data.data); } var canvas = document.createElement("canvas"); var cx = canvas.getContext("2d"); pixelAt(cx, 10, 10); // → [0, 0, 0, 0] cx.fillStyle = "red"; cx.fillRect(10, 10, 1, 1); pixelAt(cx, 10, 10); // → [255, 0, 0, 255]

getImageData x y, , .

, . color . , fillStyle strokeStyle , .

, , CSS, rgb(R, G, B), 15.

getImageData , toDataURL – , , . try/catch alert.

<script> tools["Pick color"] = function(event, cx) { // Your code here. }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>


, , . , , , - .

, . , , , ( ), , .

, , :



, , , .

getImageData . , , . 7, , . (x,y) (x + y × width) × 4

(), () .

, , , . . - , 9. , , , , .

. , . , , .

fillRect, - , , .

<script> tools["Flood fill"] = function(event, cx) { // }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>

 ,      .    ,     ,      .     ,   ,    .. 
 
      "mousedown"  ,   ,   .  , ,    "mousemove",      ,           . 
 
         .         fillStyle, strokeStyle,  lineWidth     . 
 
       .    file,       .   URL     . 
 
    .  save       .    ,       .   ,   . 
 
  DOM 
       30  DOM.   -  . 
 
      DOM  HTML.     HTML    –   DOM        ,    -   .       querySelector   ,     DOM  . 
 
      DOM      JavaScript,   .       DOM   JavaScript.      13,      DOM  .      ,    . 
 
   –    elt   13.        ,     ,  ,    ,      . 
 
 function elt(name, attributes) { var node = document.createElement(name); if (attributes) { for (var attr in attributes) if (attributes.hasOwnProperty(attr)) node.setAttribute(attr, attributes[attr]); } for (var i = 2; i < arguments.length; i++) { var child = arguments[i]; if (typeof child == "string") child = document.createTextNode(child); node.appendChild(child); } return node; } 
 
       ,       . 
 
  
    –  createPaint,      DOM,     .      ,    controls,           . 
 
 var controls = Object.create(null); function createPaint(parent) { var canvas = elt("canvas", {width: 500, height: 300}); var cx = canvas.getContext("2d"); var toolbar = elt("div", {class: "toolbar"}); for (var name in controls) toolbar.appendChild(controls[name](cx)); var panel = elt("div", {class: "picturepanel"}, canvas); parent.appendChild(elt("div", null, panel, toolbar)); } 
 
           ,    –   .        –    ,   (  fillStyle)    (  lineWidth). 
 
          ,      ,     . 
 
   
   ,    –  ,    .      controls,        ,           ,       .       ,          . 
 
 var tools = Object.create(null); controls.tool = function(cx) { var select = elt("select"); for (var name in tools) select.appendChild(elt("option", null, name)); cx.canvas.addEventListener("mousedown", function(event) { if (event.which == 1) { tools[select.value](event, cx); event.preventDefault(); } }); return elt("span", null, "Tool: ", select); }; 
 
   tool        ,    "mousedown"          ,    event  context.    preventDefault,          . 
 
    – ,     .   ,           .    13   getBoundingClientRect     .  ,   ,     .    clientX  clientY      ,                . 
 
 function relativePos(event, element) { var rect = element.getBoundingClientRect(); return {x: Math.floor(event.clientX - rect.left), y: Math.floor(event.clientY - rect.top)}; } 
 
       "mousemove",    .  trackDrag       . 
 
 function trackDrag(onMove, onEnd) { function end(event) { removeEventListener("mousemove", onMove); removeEventListener("mouseup", end); if (onEnd) onEnd(event); } addEventListener("mousemove", onMove); addEventListener("mouseup", end); } 
 
    .  – ,      "mousemove",   – ,     .      . 
 
           . 
 
 tools.Line = function(event, cx, onEnd) { cx.lineCap = "round"; var pos = relativePos(event, cx.canvas); trackDrag(function(event) { cx.beginPath(); cx.moveTo(pos.x, pos.y); pos = relativePos(event, cx.canvas); cx.lineTo(pos.x, pos.y); cx.stroke(); }, onEnd); }; 
 
      lineCap  “round”, -      ,   ,     .     ,      .     ,      ,     lineCap  . 
 
 ,    "mousemove",  ,   ,         ,      strokeStyle  lineWidth,     . 
 
  onEnd   ,  trackDrag.        ,        undefined,       .        ,  erase,      . 
 
 tools.Erase = function(event, cx) { cx.globalCompositeOperation = "destination-out"; tools.Line(event, cx, function() { cx.globalCompositeOperation = "source-over"; }); }; 
 
  globalCompositeOperation   ,        .  ,   "source-over",  ,  ,  ,   .   ,    ,     ,   . 
 
  “erase”  globalCompositeOperation  "destination-out",    ,     . 
 
         .          (     strokeStyle  lineWidth  ),   . ,   ,  . 
 
     
 ,              ,      . 
 
   18      .        .          ,            .    - .   - "date", "email", "url"  "number".      .      – “text”,     ,     ,       . ,   ,       ,       ,       . 
 
 controls.color = function(cx) { var input = elt("input", {type: "color"}); input.addEventListener("change", function() { cx.fillStyle = input.value; cx.strokeStyle = input.value; }); return elt("span", null, "Color: ", input); }; 
 
     color     fillStyle  strokeStyle    . 
 
      . 
 
 controls.brushSize = function(cx) { var select = elt("select"); var sizes = [1, 2, 3, 5, 8, 12, 25, 35, 50, 75, 100]; sizes.forEach(function(size) { select.appendChild(elt("option", {value: size}, size + " pixels")); }); select.addEventListener("change", function() { cx.lineWidth = select.value; }); return elt("span", null, "Brush size: ", select); }; 
 
       ,    ,    lineWidth    . 
 
  
  ,     ,      URL  .     http:  https:, URL      ,      .  URL  ,   HTML : 
 
 data:text/html,<h1 style="color:red">Hello!</h1> 
 
  URL    , , ,       .           ,  ,      - . 
 
       toDataURL,   URL  ,        .            .        URL   .       ,      href  ,            . 
 
 controls.save = function(cx) { var link = elt("a", {href: "/"}, "Save"); function update() { try { link.href = cx.canvas.toDataURL(); } catch (e) { if (e instanceof SecurityError) link.href = "javascript:alert(" + JSON.stringify("Can't save: " + e.toString()) + ")"; else throw e; } } link.addEventListener("mouseover", update); link.addEventListener("focus", update); return link; }; 
 
  ,          ,       ,      ,     . 
 
     ,      URL  ,    .       . 
 
           .     URL   ,      ,       (.  17),    ,    ,    . 
 
        (   ).        ,      . 
 
     ,  ,  ,    ,     «».  ,  URL  ,     «» .    ,     . 
 
     try/catch   update   .   «»,  toDataURL  ,   SecurityError.           URL   javascript:.     ,   ,     ,   . 
 
   
              URL.    ,      URL     . 
 
 function loadImageURL(cx, url) { var image = document.createElement("img"); image.addEventListener("load", function() { var color = cx.fillStyle, size = cx.lineWidth; cx.canvas.width = image.width; cx.canvas.height = image.height; cx.drawImage(image, 0, 0); cx.fillStyle = color; cx.strokeStyle = color; cx.lineWidth = size; }); image.src = url; } 
 
     ,    . -          (fillStyle  lineWidth),              . 
 
         FileReader   18.     readAsText        readAsDataURL –   ,   .   ,   ,  URL  ,     loadImageURL    . 
 
 controls.openFile = function(cx) { var input = elt("input", {type: "file"}); input.addEventListener("change", function() { if (input.files.length == 0) return; var reader = new FileReader(); reader.addEventListener("load", function() { loadImageURL(cx, reader.result); }); reader.readAsDataURL(input.files[0]); }); return elt("div", null, "Open file: ", input); }; 
 
    URL  .       ,       URL,        “change”.         ,     –    Enter,     load. 
 
 controls.openURL = function(cx) { var input = elt("input", {type: "text"}); var form = elt("form", null, "Open URL: ", input, elt("button", {type: "submit"}, "load")); form.addEventListener("submit", function(event) { event.preventDefault(); loadImageURL(cx, form.querySelector("input").value); }); return form; }; 
 
      ,   ,      . 
 
  
        ,    ,     . 
 
 tools.Text = function(event, cx) { var text = prompt("Text:", ""); if (text) { var pos = relativePos(event, cx.canvas); cx.font = Math.max(7, cx.lineWidth) + "px sans-serif"; cx.fillText(text, pos.x, pos.y); } }; 
 
          ,        sans-serif   ,    .   – 7 ,      . 
 
      - – “”.      ,    ,            . 
 
 tools.Spray = function(event, cx) { var radius = cx.lineWidth / 2; var area = radius * radius * Math.PI; var dotsPerTick = Math.ceil(area / 30); var currentPos = relativePos(event, cx.canvas); var spray = setInterval(function() { for (var i = 0; i < dotsPerTick; i++) { var offset = randomPointInRadius(radius); cx.fillRect(currentPos.x + offset.x, currentPos.y + offset.y, 1, 1); } }, 25); trackDrag(function(event) { currentPos = relativePos(event, cx.canvas); }, function() { clearInterval(spray); }); }; 
 
   setInterval      25 ,    .  trackDrag   ,  currentPos     ,       . 
 
  ,         ,           30.         randomPointInRadius. 
 
 function randomPointInRadius(radius) { for (;;) { var x = Math.random() * 2 - 1; var y = Math.random() * 2 - 1; if (x * x + y * y <= 1) return {x: x * radius, y: y * radius}; } } 
 
        (-1,-1)  (1,1).   ,  ,         1.    ,    ,   . 
 
      .       ,        Math.sin  Math.cos   .            .    ,    ,   . 
 
      .    . 
 
 <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body> 
 
  
        .    . 
 
  
   Rectangle,   (.  fillRect   16)  .      ,     ,    ,    . ,         . 
 
   ,  ,        .           ,       ,    ? 
 
   ,    position: absolute,      13.   ,      .  pageX  pageY          ,      left, top, width  height. 
 
 <script> tools.Rectangle = function(event, cx) { //   }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body> 
 
   
      –  ,        ,    .   . 
 
        .  toDataURL    ,       URL   .       getImageData,          width, height  data.   data     0  255,        - red, green, blue  alpha (). 
 
        ,  ,    (  –  ),   ,      . 
 
 function pixelAt(cx, x, y) { var data = cx.getImageData(x, y, 1, 1); console.log(data.data); } var canvas = document.createElement("canvas"); var cx = canvas.getContext("2d"); pixelAt(cx, 10, 10); // → [0, 0, 0, 0] cx.fillStyle = "red"; cx.fillRect(10, 10, 1, 1); pixelAt(cx, 10, 10); // → [255, 0, 0, 255] 
 
  getImageData     x  y,    ,      . 
 
     ,         .        color   .  ,  fillStyle  strokeStyle    ,   . 
 
 ,      ,   CSS,    rgb(R, G, B),      15. 
 
  getImageData    ,   toDataURL –   ,      ,    .   try/catch        alert. 
 
 <script> tools["Pick color"] = function(event, cx) { // Your code here. }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body> 
 
  
    ,  ,        . ,           ,   ,     -   . 
 
              ,    .       ,      ,      ,         (   ),    ,     . 
 
     , ,       : 
 
  
 
          ,   ,      ,   . 
 
    getImageData    .  ,       ,          .           7,  ,      .       (x,y)    (x + y × width) × 4 
 
      (),          () . 
 
            , ,   ,       .         .      -      ,    9.        ,    ,       ,    ,    . 
 
      .      ,       .  ,  ,    . 
 
       fillRect,   -  ,  ,     . 
 
 <script> tools["Flood fill"] = function(event, cx) { //   }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body> 

, . , , . , , ..

"mousedown" , , . , , "mousemove", , .

. fillStyle, strokeStyle, lineWidth .

. file, . URL .

. save . , . , .

DOM
30 DOM. - .

DOM HTML. HTML – DOM , - . querySelector , DOM .

DOM JavaScript, . DOM JavaScript. 13, DOM . , .

– elt 13. , , , , .

function elt(name, attributes) { var node = document.createElement(name); if (attributes) { for (var attr in attributes) if (attributes.hasOwnProperty(attr)) node.setAttribute(attr, attributes[attr]); } for (var i = 2; i < arguments.length; i++) { var child = arguments[i]; if (typeof child == "string") child = document.createTextNode(child); node.appendChild(child); } return node; }

, .


– createPaint, DOM, . , controls, .

var controls = Object.create(null); function createPaint(parent) { var canvas = elt("canvas", {width: 500, height: 300}); var cx = canvas.getContext("2d"); var toolbar = elt("div", {class: "toolbar"}); for (var name in controls) toolbar.appendChild(controls[name](cx)); var panel = elt("div", {class: "picturepanel"}, canvas); parent.appendChild(elt("div", null, panel, toolbar)); }

, – . – , ( fillStyle) ( lineWidth).

, , .


, – , . controls, , , . , .

var tools = Object.create(null); controls.tool = function(cx) { var select = elt("select"); for (var name in tools) select.appendChild(elt("option", null, name)); cx.canvas.addEventListener("mousedown", function(event) { if (event.which == 1) { tools[select.value](event, cx); event.preventDefault(); } }); return elt("span", null, "Tool: ", select); };

tool , "mousedown" , event context. preventDefault, .

– , . , . 13 getBoundingClientRect . , , . clientX clientY , .

function relativePos(event, element) { var rect = element.getBoundingClientRect(); return {x: Math.floor(event.clientX - rect.left), y: Math.floor(event.clientY - rect.top)}; }

"mousemove", . trackDrag .

function trackDrag(onMove, onEnd) { function end(event) { removeEventListener("mousemove", onMove); removeEventListener("mouseup", end); if (onEnd) onEnd(event); } addEventListener("mousemove", onMove); addEventListener("mouseup", end); }

. – , "mousemove", – , . .

.

tools.Line = function(event, cx, onEnd) { cx.lineCap = "round"; var pos = relativePos(event, cx.canvas); trackDrag(function(event) { cx.beginPath(); cx.moveTo(pos.x, pos.y); pos = relativePos(event, cx.canvas); cx.lineTo(pos.x, pos.y); cx.stroke(); }, onEnd); };

lineCap “round”, - , , . , . , , lineCap .

, "mousemove", , , , strokeStyle lineWidth, .

onEnd , trackDrag. , undefined, . , erase, .

tools.Erase = function(event, cx) { cx.globalCompositeOperation = "destination-out"; tools.Line(event, cx, function() { cx.globalCompositeOperation = "source-over"; }); };

globalCompositeOperation , . , "source-over", , , , . , , , .

“erase” globalCompositeOperation "destination-out", , .

. ( strokeStyle lineWidth ), . , , .


, , .

18 . . , . - . - "date", "email", "url" "number". . – “text”, , , . , , , , .

controls.color = function(cx) { var input = elt("input", {type: "color"}); input.addEventListener("change", function() { cx.fillStyle = input.value; cx.strokeStyle = input.value; }); return elt("span", null, "Color: ", input); };

color fillStyle strokeStyle .

.

controls.brushSize = function(cx) { var select = elt("select"); var sizes = [1, 2, 3, 5, 8, 12, 25, 35, 50, 75, 100]; sizes.forEach(function(size) { select.appendChild(elt("option", {value: size}, size + " pixels")); }); select.addEventListener("change", function() { cx.lineWidth = select.value; }); return elt("span", null, "Brush size: ", select); };

, , lineWidth .


, , URL . http: https:, URL , . URL , HTML :

data:text/html,<h1 style="color:red">Hello!</h1>

URL , , , . , , - .

toDataURL, URL , . . URL . , href , .

controls.save = function(cx) { var link = elt("a", {href: "/"}, "Save"); function update() { try { link.href = cx.canvas.toDataURL(); } catch (e) { if (e instanceof SecurityError) link.href = "javascript:alert(" + JSON.stringify("Can't save: " + e.toString()) + ")"; else throw e; } } link.addEventListener("mouseover", update); link.addEventListener("focus", update); return link; };

, , , , .

, URL , . .

. URL , , (. 17), , , .

( ). , .

, , , , «». , URL , «» . , .

try/catch update . «», toDataURL , SecurityError. URL javascript:. , , , .


URL. , URL .

function loadImageURL(cx, url) { var image = document.createElement("img"); image.addEventListener("load", function() { var color = cx.fillStyle, size = cx.lineWidth; cx.canvas.width = image.width; cx.canvas.height = image.height; cx.drawImage(image, 0, 0); cx.fillStyle = color; cx.strokeStyle = color; cx.lineWidth = size; }); image.src = url; }

, . - (fillStyle lineWidth), .

FileReader 18. readAsText readAsDataURL – , . , , URL , loadImageURL .

controls.openFile = function(cx) { var input = elt("input", {type: "file"}); input.addEventListener("change", function() { if (input.files.length == 0) return; var reader = new FileReader(); reader.addEventListener("load", function() { loadImageURL(cx, reader.result); }); reader.readAsDataURL(input.files[0]); }); return elt("div", null, "Open file: ", input); };

URL . , URL, “change”. , – Enter, load.

controls.openURL = function(cx) { var input = elt("input", {type: "text"}); var form = elt("form", null, "Open URL: ", input, elt("button", {type: "submit"}, "load")); form.addEventListener("submit", function(event) { event.preventDefault(); loadImageURL(cx, form.querySelector("input").value); }); return form; };

, , .


, , .

tools.Text = function(event, cx) { var text = prompt("Text:", ""); if (text) { var pos = relativePos(event, cx.canvas); cx.font = Math.max(7, cx.lineWidth) + "px sans-serif"; cx.fillText(text, pos.x, pos.y); } };

, sans-serif , . – 7 , .

- – “”. , , .

tools.Spray = function(event, cx) { var radius = cx.lineWidth / 2; var area = radius * radius * Math.PI; var dotsPerTick = Math.ceil(area / 30); var currentPos = relativePos(event, cx.canvas); var spray = setInterval(function() { for (var i = 0; i < dotsPerTick; i++) { var offset = randomPointInRadius(radius); cx.fillRect(currentPos.x + offset.x, currentPos.y + offset.y, 1, 1); } }, 25); trackDrag(function(event) { currentPos = relativePos(event, cx.canvas); }, function() { clearInterval(spray); }); };

setInterval 25 , . trackDrag , currentPos , .

, , 30. randomPointInRadius.

function randomPointInRadius(radius) { for (;;) { var x = Math.random() * 2 - 1; var y = Math.random() * 2 - 1; if (x * x + y * y <= 1) return {x: x * radius, y: y * radius}; } }

(-1,-1) (1,1). , , 1. , , .

. , Math.sin Math.cos . . , , .

. .

<link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>


. .


Rectangle, (. fillRect 16) . , , , . , .

, , . , , ?

, position: absolute, 13. , . pageX pageY , left, top, width height.

<script> tools.Rectangle = function(event, cx) { // }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>


– , , . .

. toDataURL , URL . getImageData, width, height data. data 0 255, - red, green, blue alpha ().

, , ( – ), , .

function pixelAt(cx, x, y) { var data = cx.getImageData(x, y, 1, 1); console.log(data.data); } var canvas = document.createElement("canvas"); var cx = canvas.getContext("2d"); pixelAt(cx, 10, 10); // → [0, 0, 0, 0] cx.fillStyle = "red"; cx.fillRect(10, 10, 1, 1); pixelAt(cx, 10, 10); // → [255, 0, 0, 255]

getImageData x y, , .

, . color . , fillStyle strokeStyle , .

, , CSS, rgb(R, G, B), 15.

getImageData , toDataURL – , , . try/catch alert.

<script> tools["Pick color"] = function(event, cx) { // Your code here. }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>


, , . , , , - .

, . , , , ( ), , .

, , :



, , , .

getImageData . , , . 7, , . (x,y) (x + y × width) × 4

(), () .

, , , . . - , 9. , , , , .

. , . , , .

fillRect, - , , .

<script> tools["Flood fill"] = function(event, cx) { // }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>

 ,      .    ,     ,      .     ,   ,    .. 
 
      "mousedown"  ,   ,   .  , ,    "mousemove",      ,           . 
 
         .         fillStyle, strokeStyle,  lineWidth     . 
 
       .    file,       .   URL     . 
 
    .  save       .    ,       .   ,   . 
 
  DOM 
       30  DOM.   -  . 
 
      DOM  HTML.     HTML    –   DOM        ,    -   .       querySelector   ,     DOM  . 
 
      DOM      JavaScript,   .       DOM   JavaScript.      13,      DOM  .      ,    . 
 
   –    elt   13.        ,     ,  ,    ,      . 
 
 function elt(name, attributes) { var node = document.createElement(name); if (attributes) { for (var attr in attributes) if (attributes.hasOwnProperty(attr)) node.setAttribute(attr, attributes[attr]); } for (var i = 2; i < arguments.length; i++) { var child = arguments[i]; if (typeof child == "string") child = document.createTextNode(child); node.appendChild(child); } return node; } 
 
       ,       . 
 
  
    –  createPaint,      DOM,     .      ,    controls,           . 
 
 var controls = Object.create(null); function createPaint(parent) { var canvas = elt("canvas", {width: 500, height: 300}); var cx = canvas.getContext("2d"); var toolbar = elt("div", {class: "toolbar"}); for (var name in controls) toolbar.appendChild(controls[name](cx)); var panel = elt("div", {class: "picturepanel"}, canvas); parent.appendChild(elt("div", null, panel, toolbar)); } 
 
           ,    –   .        –    ,   (  fillStyle)    (  lineWidth). 
 
          ,      ,     . 
 
   
   ,    –  ,    .      controls,        ,           ,       .       ,          . 
 
 var tools = Object.create(null); controls.tool = function(cx) { var select = elt("select"); for (var name in tools) select.appendChild(elt("option", null, name)); cx.canvas.addEventListener("mousedown", function(event) { if (event.which == 1) { tools[select.value](event, cx); event.preventDefault(); } }); return elt("span", null, "Tool: ", select); }; 
 
   tool        ,    "mousedown"          ,    event  context.    preventDefault,          . 
 
    – ,     .   ,           .    13   getBoundingClientRect     .  ,   ,     .    clientX  clientY      ,                . 
 
 function relativePos(event, element) { var rect = element.getBoundingClientRect(); return {x: Math.floor(event.clientX - rect.left), y: Math.floor(event.clientY - rect.top)}; } 
 
       "mousemove",    .  trackDrag       . 
 
 function trackDrag(onMove, onEnd) { function end(event) { removeEventListener("mousemove", onMove); removeEventListener("mouseup", end); if (onEnd) onEnd(event); } addEventListener("mousemove", onMove); addEventListener("mouseup", end); } 
 
    .  – ,      "mousemove",   – ,     .      . 
 
           . 
 
 tools.Line = function(event, cx, onEnd) { cx.lineCap = "round"; var pos = relativePos(event, cx.canvas); trackDrag(function(event) { cx.beginPath(); cx.moveTo(pos.x, pos.y); pos = relativePos(event, cx.canvas); cx.lineTo(pos.x, pos.y); cx.stroke(); }, onEnd); }; 
 
      lineCap  “round”, -      ,   ,     .     ,      .     ,      ,     lineCap  . 
 
 ,    "mousemove",  ,   ,         ,      strokeStyle  lineWidth,     . 
 
  onEnd   ,  trackDrag.        ,        undefined,       .        ,  erase,      . 
 
 tools.Erase = function(event, cx) { cx.globalCompositeOperation = "destination-out"; tools.Line(event, cx, function() { cx.globalCompositeOperation = "source-over"; }); }; 
 
  globalCompositeOperation   ,        .  ,   "source-over",  ,  ,  ,   .   ,    ,     ,   . 
 
  “erase”  globalCompositeOperation  "destination-out",    ,     . 
 
         .          (     strokeStyle  lineWidth  ),   . ,   ,  . 
 
     
 ,              ,      . 
 
   18      .        .          ,            .    - .   - "date", "email", "url"  "number".      .      – “text”,     ,     ,       . ,   ,       ,       ,       . 
 
 controls.color = function(cx) { var input = elt("input", {type: "color"}); input.addEventListener("change", function() { cx.fillStyle = input.value; cx.strokeStyle = input.value; }); return elt("span", null, "Color: ", input); }; 
 
     color     fillStyle  strokeStyle    . 
 
      . 
 
 controls.brushSize = function(cx) { var select = elt("select"); var sizes = [1, 2, 3, 5, 8, 12, 25, 35, 50, 75, 100]; sizes.forEach(function(size) { select.appendChild(elt("option", {value: size}, size + " pixels")); }); select.addEventListener("change", function() { cx.lineWidth = select.value; }); return elt("span", null, "Brush size: ", select); }; 
 
       ,    ,    lineWidth    . 
 
  
  ,     ,      URL  .     http:  https:, URL      ,      .  URL  ,   HTML : 
 
 data:text/html,<h1 style="color:red">Hello!</h1> 
 
  URL    , , ,       .           ,  ,      - . 
 
       toDataURL,   URL  ,        .            .        URL   .       ,      href  ,            . 
 
 controls.save = function(cx) { var link = elt("a", {href: "/"}, "Save"); function update() { try { link.href = cx.canvas.toDataURL(); } catch (e) { if (e instanceof SecurityError) link.href = "javascript:alert(" + JSON.stringify("Can't save: " + e.toString()) + ")"; else throw e; } } link.addEventListener("mouseover", update); link.addEventListener("focus", update); return link; }; 
 
  ,          ,       ,      ,     . 
 
     ,      URL  ,    .       . 
 
           .     URL   ,      ,       (.  17),    ,    ,    . 
 
        (   ).        ,      . 
 
     ,  ,  ,    ,     «».  ,  URL  ,     «» .    ,     . 
 
     try/catch   update   .   «»,  toDataURL  ,   SecurityError.           URL   javascript:.     ,   ,     ,   . 
 
   
              URL.    ,      URL     . 
 
 function loadImageURL(cx, url) { var image = document.createElement("img"); image.addEventListener("load", function() { var color = cx.fillStyle, size = cx.lineWidth; cx.canvas.width = image.width; cx.canvas.height = image.height; cx.drawImage(image, 0, 0); cx.fillStyle = color; cx.strokeStyle = color; cx.lineWidth = size; }); image.src = url; } 
 
     ,    . -          (fillStyle  lineWidth),              . 
 
         FileReader   18.     readAsText        readAsDataURL –   ,   .   ,   ,  URL  ,     loadImageURL    . 
 
 controls.openFile = function(cx) { var input = elt("input", {type: "file"}); input.addEventListener("change", function() { if (input.files.length == 0) return; var reader = new FileReader(); reader.addEventListener("load", function() { loadImageURL(cx, reader.result); }); reader.readAsDataURL(input.files[0]); }); return elt("div", null, "Open file: ", input); }; 
 
    URL  .       ,       URL,        “change”.         ,     –    Enter,     load. 
 
 controls.openURL = function(cx) { var input = elt("input", {type: "text"}); var form = elt("form", null, "Open URL: ", input, elt("button", {type: "submit"}, "load")); form.addEventListener("submit", function(event) { event.preventDefault(); loadImageURL(cx, form.querySelector("input").value); }); return form; }; 
 
      ,   ,      . 
 
  
        ,    ,     . 
 
 tools.Text = function(event, cx) { var text = prompt("Text:", ""); if (text) { var pos = relativePos(event, cx.canvas); cx.font = Math.max(7, cx.lineWidth) + "px sans-serif"; cx.fillText(text, pos.x, pos.y); } }; 
 
          ,        sans-serif   ,    .   – 7 ,      . 
 
      - – “”.      ,    ,            . 
 
 tools.Spray = function(event, cx) { var radius = cx.lineWidth / 2; var area = radius * radius * Math.PI; var dotsPerTick = Math.ceil(area / 30); var currentPos = relativePos(event, cx.canvas); var spray = setInterval(function() { for (var i = 0; i < dotsPerTick; i++) { var offset = randomPointInRadius(radius); cx.fillRect(currentPos.x + offset.x, currentPos.y + offset.y, 1, 1); } }, 25); trackDrag(function(event) { currentPos = relativePos(event, cx.canvas); }, function() { clearInterval(spray); }); }; 
 
   setInterval      25 ,    .  trackDrag   ,  currentPos     ,       . 
 
  ,         ,           30.         randomPointInRadius. 
 
 function randomPointInRadius(radius) { for (;;) { var x = Math.random() * 2 - 1; var y = Math.random() * 2 - 1; if (x * x + y * y <= 1) return {x: x * radius, y: y * radius}; } } 
 
        (-1,-1)  (1,1).   ,  ,         1.    ,    ,   . 
 
      .       ,        Math.sin  Math.cos   .            .    ,    ,   . 
 
      .    . 
 
 <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body> 
 
  
        .    . 
 
  
   Rectangle,   (.  fillRect   16)  .      ,     ,    ,    . ,         . 
 
   ,  ,        .           ,       ,    ? 
 
   ,    position: absolute,      13.   ,      .  pageX  pageY          ,      left, top, width  height. 
 
 <script> tools.Rectangle = function(event, cx) { //   }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body> 
 
   
      –  ,        ,    .   . 
 
        .  toDataURL    ,       URL   .       getImageData,          width, height  data.   data     0  255,        - red, green, blue  alpha (). 
 
        ,  ,    (  –  ),   ,      . 
 
 function pixelAt(cx, x, y) { var data = cx.getImageData(x, y, 1, 1); console.log(data.data); } var canvas = document.createElement("canvas"); var cx = canvas.getContext("2d"); pixelAt(cx, 10, 10); // → [0, 0, 0, 0] cx.fillStyle = "red"; cx.fillRect(10, 10, 1, 1); pixelAt(cx, 10, 10); // → [255, 0, 0, 255] 
 
  getImageData     x  y,    ,      . 
 
     ,         .        color   .  ,  fillStyle  strokeStyle    ,   . 
 
 ,      ,   CSS,    rgb(R, G, B),      15. 
 
  getImageData    ,   toDataURL –   ,      ,    .   try/catch        alert. 
 
 <script> tools["Pick color"] = function(event, cx) { // Your code here. }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body> 
 
  
    ,  ,        . ,           ,   ,     -   . 
 
              ,    .       ,      ,      ,         (   ),    ,     . 
 
     , ,       : 
 
  
 
          ,   ,      ,   . 
 
    getImageData    .  ,       ,          .           7,  ,      .       (x,y)    (x + y × width) × 4 
 
      (),          () . 
 
            , ,   ,       .         .      -      ,    9.        ,    ,       ,    ,    . 
 
      .      ,       .  ,  ,    . 
 
       fillRect,   -  ,  ,     . 
 
 <script> tools["Flood fill"] = function(event, cx) { //   }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body> 

, . , , . , , ..

"mousedown" , , . , , "mousemove", , .

. fillStyle, strokeStyle, lineWidth .

. file, . URL .

. save . , . , .

DOM
30 DOM. - .

DOM HTML. HTML – DOM , - . querySelector , DOM .

DOM JavaScript, . DOM JavaScript. 13, DOM . , .

– elt 13. , , , , .

function elt(name, attributes) { var node = document.createElement(name); if (attributes) { for (var attr in attributes) if (attributes.hasOwnProperty(attr)) node.setAttribute(attr, attributes[attr]); } for (var i = 2; i < arguments.length; i++) { var child = arguments[i]; if (typeof child == "string") child = document.createTextNode(child); node.appendChild(child); } return node; }

, .


– createPaint, DOM, . , controls, .

var controls = Object.create(null); function createPaint(parent) { var canvas = elt("canvas", {width: 500, height: 300}); var cx = canvas.getContext("2d"); var toolbar = elt("div", {class: "toolbar"}); for (var name in controls) toolbar.appendChild(controls[name](cx)); var panel = elt("div", {class: "picturepanel"}, canvas); parent.appendChild(elt("div", null, panel, toolbar)); }

, – . – , ( fillStyle) ( lineWidth).

, , .


, – , . controls, , , . , .

var tools = Object.create(null); controls.tool = function(cx) { var select = elt("select"); for (var name in tools) select.appendChild(elt("option", null, name)); cx.canvas.addEventListener("mousedown", function(event) { if (event.which == 1) { tools[select.value](event, cx); event.preventDefault(); } }); return elt("span", null, "Tool: ", select); };

tool , "mousedown" , event context. preventDefault, .

– , . , . 13 getBoundingClientRect . , , . clientX clientY , .

function relativePos(event, element) { var rect = element.getBoundingClientRect(); return {x: Math.floor(event.clientX - rect.left), y: Math.floor(event.clientY - rect.top)}; }

"mousemove", . trackDrag .

function trackDrag(onMove, onEnd) { function end(event) { removeEventListener("mousemove", onMove); removeEventListener("mouseup", end); if (onEnd) onEnd(event); } addEventListener("mousemove", onMove); addEventListener("mouseup", end); }

. – , "mousemove", – , . .

.

tools.Line = function(event, cx, onEnd) { cx.lineCap = "round"; var pos = relativePos(event, cx.canvas); trackDrag(function(event) { cx.beginPath(); cx.moveTo(pos.x, pos.y); pos = relativePos(event, cx.canvas); cx.lineTo(pos.x, pos.y); cx.stroke(); }, onEnd); };

lineCap “round”, - , , . , . , , lineCap .

, "mousemove", , , , strokeStyle lineWidth, .

onEnd , trackDrag. , undefined, . , erase, .

tools.Erase = function(event, cx) { cx.globalCompositeOperation = "destination-out"; tools.Line(event, cx, function() { cx.globalCompositeOperation = "source-over"; }); };

globalCompositeOperation , . , "source-over", , , , . , , , .

“erase” globalCompositeOperation "destination-out", , .

. ( strokeStyle lineWidth ), . , , .


, , .

18 . . , . - . - "date", "email", "url" "number". . – “text”, , , . , , , , .

controls.color = function(cx) { var input = elt("input", {type: "color"}); input.addEventListener("change", function() { cx.fillStyle = input.value; cx.strokeStyle = input.value; }); return elt("span", null, "Color: ", input); };

color fillStyle strokeStyle .

.

controls.brushSize = function(cx) { var select = elt("select"); var sizes = [1, 2, 3, 5, 8, 12, 25, 35, 50, 75, 100]; sizes.forEach(function(size) { select.appendChild(elt("option", {value: size}, size + " pixels")); }); select.addEventListener("change", function() { cx.lineWidth = select.value; }); return elt("span", null, "Brush size: ", select); };

, , lineWidth .


, , URL . http: https:, URL , . URL , HTML :

data:text/html,<h1 style="color:red">Hello!</h1>

URL , , , . , , - .

toDataURL, URL , . . URL . , href , .

controls.save = function(cx) { var link = elt("a", {href: "/"}, "Save"); function update() { try { link.href = cx.canvas.toDataURL(); } catch (e) { if (e instanceof SecurityError) link.href = "javascript:alert(" + JSON.stringify("Can't save: " + e.toString()) + ")"; else throw e; } } link.addEventListener("mouseover", update); link.addEventListener("focus", update); return link; };

, , , , .

, URL , . .

. URL , , (. 17), , , .

( ). , .

, , , , «». , URL , «» . , .

try/catch update . «», toDataURL , SecurityError. URL javascript:. , , , .


URL. , URL .

function loadImageURL(cx, url) { var image = document.createElement("img"); image.addEventListener("load", function() { var color = cx.fillStyle, size = cx.lineWidth; cx.canvas.width = image.width; cx.canvas.height = image.height; cx.drawImage(image, 0, 0); cx.fillStyle = color; cx.strokeStyle = color; cx.lineWidth = size; }); image.src = url; }

, . - (fillStyle lineWidth), .

FileReader 18. readAsText readAsDataURL – , . , , URL , loadImageURL .

controls.openFile = function(cx) { var input = elt("input", {type: "file"}); input.addEventListener("change", function() { if (input.files.length == 0) return; var reader = new FileReader(); reader.addEventListener("load", function() { loadImageURL(cx, reader.result); }); reader.readAsDataURL(input.files[0]); }); return elt("div", null, "Open file: ", input); };

URL . , URL, “change”. , – Enter, load.

controls.openURL = function(cx) { var input = elt("input", {type: "text"}); var form = elt("form", null, "Open URL: ", input, elt("button", {type: "submit"}, "load")); form.addEventListener("submit", function(event) { event.preventDefault(); loadImageURL(cx, form.querySelector("input").value); }); return form; };

, , .


, , .

tools.Text = function(event, cx) { var text = prompt("Text:", ""); if (text) { var pos = relativePos(event, cx.canvas); cx.font = Math.max(7, cx.lineWidth) + "px sans-serif"; cx.fillText(text, pos.x, pos.y); } };

, sans-serif , . – 7 , .

- – “”. , , .

tools.Spray = function(event, cx) { var radius = cx.lineWidth / 2; var area = radius * radius * Math.PI; var dotsPerTick = Math.ceil(area / 30); var currentPos = relativePos(event, cx.canvas); var spray = setInterval(function() { for (var i = 0; i < dotsPerTick; i++) { var offset = randomPointInRadius(radius); cx.fillRect(currentPos.x + offset.x, currentPos.y + offset.y, 1, 1); } }, 25); trackDrag(function(event) { currentPos = relativePos(event, cx.canvas); }, function() { clearInterval(spray); }); };

setInterval 25 , . trackDrag , currentPos , .

, , 30. randomPointInRadius.

function randomPointInRadius(radius) { for (;;) { var x = Math.random() * 2 - 1; var y = Math.random() * 2 - 1; if (x * x + y * y <= 1) return {x: x * radius, y: y * radius}; } }

(-1,-1) (1,1). , , 1. , , .

. , Math.sin Math.cos . . , , .

. .

<link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>


. .


Rectangle, (. fillRect 16) . , , , . , .

, , . , , ?

, position: absolute, 13. , . pageX pageY , left, top, width height.

<script> tools.Rectangle = function(event, cx) { // }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>


– , , . .

. toDataURL , URL . getImageData, width, height data. data 0 255, - red, green, blue alpha ().

, , ( – ), , .

function pixelAt(cx, x, y) { var data = cx.getImageData(x, y, 1, 1); console.log(data.data); } var canvas = document.createElement("canvas"); var cx = canvas.getContext("2d"); pixelAt(cx, 10, 10); // → [0, 0, 0, 0] cx.fillStyle = "red"; cx.fillRect(10, 10, 1, 1); pixelAt(cx, 10, 10); // → [255, 0, 0, 255]

getImageData x y, , .

, . color . , fillStyle strokeStyle , .

, , CSS, rgb(R, G, B), 15.

getImageData , toDataURL – , , . try/catch alert.

<script> tools["Pick color"] = function(event, cx) { // Your code here. }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>


, , . , , , - .

, . , , , ( ), , .

, , :



, , , .

getImageData . , , . 7, , . (x,y) (x + y × width) × 4

(), () .

, , , . . - , 9. , , , , .

. , . , , .

fillRect, - , , .

<script> tools["Flood fill"] = function(event, cx) { // }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>

 ,      .    ,     ,      .     ,   ,    .. 
 
      "mousedown"  ,   ,   .  , ,    "mousemove",      ,           . 
 
         .         fillStyle, strokeStyle,  lineWidth     . 
 
       .    file,       .   URL     . 
 
    .  save       .    ,       .   ,   . 
 
  DOM 
       30  DOM.   -  . 
 
      DOM  HTML.     HTML    –   DOM        ,    -   .       querySelector   ,     DOM  . 
 
      DOM      JavaScript,   .       DOM   JavaScript.      13,      DOM  .      ,    . 
 
   –    elt   13.        ,     ,  ,    ,      . 
 
 function elt(name, attributes) { var node = document.createElement(name); if (attributes) { for (var attr in attributes) if (attributes.hasOwnProperty(attr)) node.setAttribute(attr, attributes[attr]); } for (var i = 2; i < arguments.length; i++) { var child = arguments[i]; if (typeof child == "string") child = document.createTextNode(child); node.appendChild(child); } return node; } 
 
       ,       . 
 
  
    –  createPaint,      DOM,     .      ,    controls,           . 
 
 var controls = Object.create(null); function createPaint(parent) { var canvas = elt("canvas", {width: 500, height: 300}); var cx = canvas.getContext("2d"); var toolbar = elt("div", {class: "toolbar"}); for (var name in controls) toolbar.appendChild(controls[name](cx)); var panel = elt("div", {class: "picturepanel"}, canvas); parent.appendChild(elt("div", null, panel, toolbar)); } 
 
           ,    –   .        –    ,   (  fillStyle)    (  lineWidth). 
 
          ,      ,     . 
 
   
   ,    –  ,    .      controls,        ,           ,       .       ,          . 
 
 var tools = Object.create(null); controls.tool = function(cx) { var select = elt("select"); for (var name in tools) select.appendChild(elt("option", null, name)); cx.canvas.addEventListener("mousedown", function(event) { if (event.which == 1) { tools[select.value](event, cx); event.preventDefault(); } }); return elt("span", null, "Tool: ", select); }; 
 
   tool        ,    "mousedown"          ,    event  context.    preventDefault,          . 
 
    – ,     .   ,           .    13   getBoundingClientRect     .  ,   ,     .    clientX  clientY      ,                . 
 
 function relativePos(event, element) { var rect = element.getBoundingClientRect(); return {x: Math.floor(event.clientX - rect.left), y: Math.floor(event.clientY - rect.top)}; } 
 
       "mousemove",    .  trackDrag       . 
 
 function trackDrag(onMove, onEnd) { function end(event) { removeEventListener("mousemove", onMove); removeEventListener("mouseup", end); if (onEnd) onEnd(event); } addEventListener("mousemove", onMove); addEventListener("mouseup", end); } 
 
    .  – ,      "mousemove",   – ,     .      . 
 
           . 
 
 tools.Line = function(event, cx, onEnd) { cx.lineCap = "round"; var pos = relativePos(event, cx.canvas); trackDrag(function(event) { cx.beginPath(); cx.moveTo(pos.x, pos.y); pos = relativePos(event, cx.canvas); cx.lineTo(pos.x, pos.y); cx.stroke(); }, onEnd); }; 
 
      lineCap  “round”, -      ,   ,     .     ,      .     ,      ,     lineCap  . 
 
 ,    "mousemove",  ,   ,         ,      strokeStyle  lineWidth,     . 
 
  onEnd   ,  trackDrag.        ,        undefined,       .        ,  erase,      . 
 
 tools.Erase = function(event, cx) { cx.globalCompositeOperation = "destination-out"; tools.Line(event, cx, function() { cx.globalCompositeOperation = "source-over"; }); }; 
 
  globalCompositeOperation   ,        .  ,   "source-over",  ,  ,  ,   .   ,    ,     ,   . 
 
  “erase”  globalCompositeOperation  "destination-out",    ,     . 
 
         .          (     strokeStyle  lineWidth  ),   . ,   ,  . 
 
     
 ,              ,      . 
 
   18      .        .          ,            .    - .   - "date", "email", "url"  "number".      .      – “text”,     ,     ,       . ,   ,       ,       ,       . 
 
 controls.color = function(cx) { var input = elt("input", {type: "color"}); input.addEventListener("change", function() { cx.fillStyle = input.value; cx.strokeStyle = input.value; }); return elt("span", null, "Color: ", input); }; 
 
     color     fillStyle  strokeStyle    . 
 
      . 
 
 controls.brushSize = function(cx) { var select = elt("select"); var sizes = [1, 2, 3, 5, 8, 12, 25, 35, 50, 75, 100]; sizes.forEach(function(size) { select.appendChild(elt("option", {value: size}, size + " pixels")); }); select.addEventListener("change", function() { cx.lineWidth = select.value; }); return elt("span", null, "Brush size: ", select); }; 
 
       ,    ,    lineWidth    . 
 
  
  ,     ,      URL  .     http:  https:, URL      ,      .  URL  ,   HTML : 
 
 data:text/html,<h1 style="color:red">Hello!</h1> 
 
  URL    , , ,       .           ,  ,      - . 
 
       toDataURL,   URL  ,        .            .        URL   .       ,      href  ,            . 
 
 controls.save = function(cx) { var link = elt("a", {href: "/"}, "Save"); function update() { try { link.href = cx.canvas.toDataURL(); } catch (e) { if (e instanceof SecurityError) link.href = "javascript:alert(" + JSON.stringify("Can't save: " + e.toString()) + ")"; else throw e; } } link.addEventListener("mouseover", update); link.addEventListener("focus", update); return link; }; 
 
  ,          ,       ,      ,     . 
 
     ,      URL  ,    .       . 
 
           .     URL   ,      ,       (.  17),    ,    ,    . 
 
        (   ).        ,      . 
 
     ,  ,  ,    ,     «».  ,  URL  ,     «» .    ,     . 
 
     try/catch   update   .   «»,  toDataURL  ,   SecurityError.           URL   javascript:.     ,   ,     ,   . 
 
   
              URL.    ,      URL     . 
 
 function loadImageURL(cx, url) { var image = document.createElement("img"); image.addEventListener("load", function() { var color = cx.fillStyle, size = cx.lineWidth; cx.canvas.width = image.width; cx.canvas.height = image.height; cx.drawImage(image, 0, 0); cx.fillStyle = color; cx.strokeStyle = color; cx.lineWidth = size; }); image.src = url; } 
 
     ,    . -          (fillStyle  lineWidth),              . 
 
         FileReader   18.     readAsText        readAsDataURL –   ,   .   ,   ,  URL  ,     loadImageURL    . 
 
 controls.openFile = function(cx) { var input = elt("input", {type: "file"}); input.addEventListener("change", function() { if (input.files.length == 0) return; var reader = new FileReader(); reader.addEventListener("load", function() { loadImageURL(cx, reader.result); }); reader.readAsDataURL(input.files[0]); }); return elt("div", null, "Open file: ", input); }; 
 
    URL  .       ,       URL,        “change”.         ,     –    Enter,     load. 
 
 controls.openURL = function(cx) { var input = elt("input", {type: "text"}); var form = elt("form", null, "Open URL: ", input, elt("button", {type: "submit"}, "load")); form.addEventListener("submit", function(event) { event.preventDefault(); loadImageURL(cx, form.querySelector("input").value); }); return form; }; 
 
      ,   ,      . 
 
  
        ,    ,     . 
 
 tools.Text = function(event, cx) { var text = prompt("Text:", ""); if (text) { var pos = relativePos(event, cx.canvas); cx.font = Math.max(7, cx.lineWidth) + "px sans-serif"; cx.fillText(text, pos.x, pos.y); } }; 
 
          ,        sans-serif   ,    .   – 7 ,      . 
 
      - – “”.      ,    ,            . 
 
 tools.Spray = function(event, cx) { var radius = cx.lineWidth / 2; var area = radius * radius * Math.PI; var dotsPerTick = Math.ceil(area / 30); var currentPos = relativePos(event, cx.canvas); var spray = setInterval(function() { for (var i = 0; i < dotsPerTick; i++) { var offset = randomPointInRadius(radius); cx.fillRect(currentPos.x + offset.x, currentPos.y + offset.y, 1, 1); } }, 25); trackDrag(function(event) { currentPos = relativePos(event, cx.canvas); }, function() { clearInterval(spray); }); }; 
 
   setInterval      25 ,    .  trackDrag   ,  currentPos     ,       . 
 
  ,         ,           30.         randomPointInRadius. 
 
 function randomPointInRadius(radius) { for (;;) { var x = Math.random() * 2 - 1; var y = Math.random() * 2 - 1; if (x * x + y * y <= 1) return {x: x * radius, y: y * radius}; } } 
 
        (-1,-1)  (1,1).   ,  ,         1.    ,    ,   . 
 
      .       ,        Math.sin  Math.cos   .            .    ,    ,   . 
 
      .    . 
 
 <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body> 
 
  
        .    . 
 
  
   Rectangle,   (.  fillRect   16)  .      ,     ,    ,    . ,         . 
 
   ,  ,        .           ,       ,    ? 
 
   ,    position: absolute,      13.   ,      .  pageX  pageY          ,      left, top, width  height. 
 
 <script> tools.Rectangle = function(event, cx) { //   }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body> 
 
   
      –  ,        ,    .   . 
 
        .  toDataURL    ,       URL   .       getImageData,          width, height  data.   data     0  255,        - red, green, blue  alpha (). 
 
        ,  ,    (  –  ),   ,      . 
 
 function pixelAt(cx, x, y) { var data = cx.getImageData(x, y, 1, 1); console.log(data.data); } var canvas = document.createElement("canvas"); var cx = canvas.getContext("2d"); pixelAt(cx, 10, 10); // → [0, 0, 0, 0] cx.fillStyle = "red"; cx.fillRect(10, 10, 1, 1); pixelAt(cx, 10, 10); // → [255, 0, 0, 255] 
 
  getImageData     x  y,    ,      . 
 
     ,         .        color   .  ,  fillStyle  strokeStyle    ,   . 
 
 ,      ,   CSS,    rgb(R, G, B),      15. 
 
  getImageData    ,   toDataURL –   ,      ,    .   try/catch        alert. 
 
 <script> tools["Pick color"] = function(event, cx) { // Your code here. }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body> 
 
  
    ,  ,        . ,           ,   ,     -   . 
 
              ,    .       ,      ,      ,         (   ),    ,     . 
 
     , ,       : 
 
  
 
          ,   ,      ,   . 
 
    getImageData    .  ,       ,          .           7,  ,      .       (x,y)    (x + y × width) × 4 
 
      (),          () . 
 
            , ,   ,       .         .      -      ,    9.        ,    ,       ,    ,    . 
 
      .      ,       .  ,  ,    . 
 
       fillRect,   -  ,  ,     . 
 
 <script> tools["Flood fill"] = function(event, cx) { //   }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body> 

, . , , . , , ..

"mousedown" , , . , , "mousemove", , .

. fillStyle, strokeStyle, lineWidth .

. file, . URL .

. save . , . , .

DOM
30 DOM. - .

DOM HTML. HTML – DOM , - . querySelector , DOM .

DOM JavaScript, . DOM JavaScript. 13, DOM . , .

– elt 13. , , , , .

function elt(name, attributes) { var node = document.createElement(name); if (attributes) { for (var attr in attributes) if (attributes.hasOwnProperty(attr)) node.setAttribute(attr, attributes[attr]); } for (var i = 2; i < arguments.length; i++) { var child = arguments[i]; if (typeof child == "string") child = document.createTextNode(child); node.appendChild(child); } return node; }

, .


– createPaint, DOM, . , controls, .

var controls = Object.create(null); function createPaint(parent) { var canvas = elt("canvas", {width: 500, height: 300}); var cx = canvas.getContext("2d"); var toolbar = elt("div", {class: "toolbar"}); for (var name in controls) toolbar.appendChild(controls[name](cx)); var panel = elt("div", {class: "picturepanel"}, canvas); parent.appendChild(elt("div", null, panel, toolbar)); }

, – . – , ( fillStyle) ( lineWidth).

, , .


, – , . controls, , , . , .

var tools = Object.create(null); controls.tool = function(cx) { var select = elt("select"); for (var name in tools) select.appendChild(elt("option", null, name)); cx.canvas.addEventListener("mousedown", function(event) { if (event.which == 1) { tools[select.value](event, cx); event.preventDefault(); } }); return elt("span", null, "Tool: ", select); };

tool , "mousedown" , event context. preventDefault, .

– , . , . 13 getBoundingClientRect . , , . clientX clientY , .

function relativePos(event, element) { var rect = element.getBoundingClientRect(); return {x: Math.floor(event.clientX - rect.left), y: Math.floor(event.clientY - rect.top)}; }

"mousemove", . trackDrag .

function trackDrag(onMove, onEnd) { function end(event) { removeEventListener("mousemove", onMove); removeEventListener("mouseup", end); if (onEnd) onEnd(event); } addEventListener("mousemove", onMove); addEventListener("mouseup", end); }

. – , "mousemove", – , . .

.

tools.Line = function(event, cx, onEnd) { cx.lineCap = "round"; var pos = relativePos(event, cx.canvas); trackDrag(function(event) { cx.beginPath(); cx.moveTo(pos.x, pos.y); pos = relativePos(event, cx.canvas); cx.lineTo(pos.x, pos.y); cx.stroke(); }, onEnd); };

lineCap “round”, - , , . , . , , lineCap .

, "mousemove", , , , strokeStyle lineWidth, .

onEnd , trackDrag. , undefined, . , erase, .

tools.Erase = function(event, cx) { cx.globalCompositeOperation = "destination-out"; tools.Line(event, cx, function() { cx.globalCompositeOperation = "source-over"; }); };

globalCompositeOperation , . , "source-over", , , , . , , , .

“erase” globalCompositeOperation "destination-out", , .

. ( strokeStyle lineWidth ), . , , .


, , .

18 . . , . - . - "date", "email", "url" "number". . – “text”, , , . , , , , .

controls.color = function(cx) { var input = elt("input", {type: "color"}); input.addEventListener("change", function() { cx.fillStyle = input.value; cx.strokeStyle = input.value; }); return elt("span", null, "Color: ", input); };

color fillStyle strokeStyle .

.

controls.brushSize = function(cx) { var select = elt("select"); var sizes = [1, 2, 3, 5, 8, 12, 25, 35, 50, 75, 100]; sizes.forEach(function(size) { select.appendChild(elt("option", {value: size}, size + " pixels")); }); select.addEventListener("change", function() { cx.lineWidth = select.value; }); return elt("span", null, "Brush size: ", select); };

, , lineWidth .


, , URL . http: https:, URL , . URL , HTML :

data:text/html,<h1 style="color:red">Hello!</h1>

URL , , , . , , - .

toDataURL, URL , . . URL . , href , .

controls.save = function(cx) { var link = elt("a", {href: "/"}, "Save"); function update() { try { link.href = cx.canvas.toDataURL(); } catch (e) { if (e instanceof SecurityError) link.href = "javascript:alert(" + JSON.stringify("Can't save: " + e.toString()) + ")"; else throw e; } } link.addEventListener("mouseover", update); link.addEventListener("focus", update); return link; };

, , , , .

, URL , . .

. URL , , (. 17), , , .

( ). , .

, , , , «». , URL , «» . , .

try/catch update . «», toDataURL , SecurityError. URL javascript:. , , , .


URL. , URL .

function loadImageURL(cx, url) { var image = document.createElement("img"); image.addEventListener("load", function() { var color = cx.fillStyle, size = cx.lineWidth; cx.canvas.width = image.width; cx.canvas.height = image.height; cx.drawImage(image, 0, 0); cx.fillStyle = color; cx.strokeStyle = color; cx.lineWidth = size; }); image.src = url; }

, . - (fillStyle lineWidth), .

FileReader 18. readAsText readAsDataURL – , . , , URL , loadImageURL .

controls.openFile = function(cx) { var input = elt("input", {type: "file"}); input.addEventListener("change", function() { if (input.files.length == 0) return; var reader = new FileReader(); reader.addEventListener("load", function() { loadImageURL(cx, reader.result); }); reader.readAsDataURL(input.files[0]); }); return elt("div", null, "Open file: ", input); };

URL . , URL, “change”. , – Enter, load.

controls.openURL = function(cx) { var input = elt("input", {type: "text"}); var form = elt("form", null, "Open URL: ", input, elt("button", {type: "submit"}, "load")); form.addEventListener("submit", function(event) { event.preventDefault(); loadImageURL(cx, form.querySelector("input").value); }); return form; };

, , .


, , .

tools.Text = function(event, cx) { var text = prompt("Text:", ""); if (text) { var pos = relativePos(event, cx.canvas); cx.font = Math.max(7, cx.lineWidth) + "px sans-serif"; cx.fillText(text, pos.x, pos.y); } };

, sans-serif , . – 7 , .

- – “”. , , .

tools.Spray = function(event, cx) { var radius = cx.lineWidth / 2; var area = radius * radius * Math.PI; var dotsPerTick = Math.ceil(area / 30); var currentPos = relativePos(event, cx.canvas); var spray = setInterval(function() { for (var i = 0; i < dotsPerTick; i++) { var offset = randomPointInRadius(radius); cx.fillRect(currentPos.x + offset.x, currentPos.y + offset.y, 1, 1); } }, 25); trackDrag(function(event) { currentPos = relativePos(event, cx.canvas); }, function() { clearInterval(spray); }); };

setInterval 25 , . trackDrag , currentPos , .

, , 30. randomPointInRadius.

function randomPointInRadius(radius) { for (;;) { var x = Math.random() * 2 - 1; var y = Math.random() * 2 - 1; if (x * x + y * y <= 1) return {x: x * radius, y: y * radius}; } }

(-1,-1) (1,1). , , 1. , , .

. , Math.sin Math.cos . . , , .

. .

<link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>


. .


Rectangle, (. fillRect 16) . , , , . , .

, , . , , ?

, position: absolute, 13. , . pageX pageY , left, top, width height.

<script> tools.Rectangle = function(event, cx) { // }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>


– , , . .

. toDataURL , URL . getImageData, width, height data. data 0 255, - red, green, blue alpha ().

, , ( – ), , .

function pixelAt(cx, x, y) { var data = cx.getImageData(x, y, 1, 1); console.log(data.data); } var canvas = document.createElement("canvas"); var cx = canvas.getContext("2d"); pixelAt(cx, 10, 10); // → [0, 0, 0, 0] cx.fillStyle = "red"; cx.fillRect(10, 10, 1, 1); pixelAt(cx, 10, 10); // → [255, 0, 0, 255]

getImageData x y, , .

, . color . , fillStyle strokeStyle , .

, , CSS, rgb(R, G, B), 15.

getImageData , toDataURL – , , . try/catch alert.

<script> tools["Pick color"] = function(event, cx) { // Your code here. }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>


, , . , , , - .

, . , , , ( ), , .

, , :



, , , .

getImageData . , , . 7, , . (x,y) (x + y × width) × 4

(), () .

, , , . . - , 9. , , , , .

. , . , , .

fillRect, - , , .

<script> tools["Flood fill"] = function(event, cx) { // }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>

, . , , . , , ..

"mousedown" , , . , , "mousemove", , .

. fillStyle, strokeStyle, lineWidth .

. file, . URL .

. save . , . , .

DOM
30 DOM. - .

DOM HTML. HTML – DOM , - . querySelector , DOM .

DOM JavaScript, . DOM JavaScript. 13, DOM . , .

– elt 13. , , , , .

function elt(name, attributes) { var node = document.createElement(name); if (attributes) { for (var attr in attributes) if (attributes.hasOwnProperty(attr)) node.setAttribute(attr, attributes[attr]); } for (var i = 2; i < arguments.length; i++) { var child = arguments[i]; if (typeof child == "string") child = document.createTextNode(child); node.appendChild(child); } return node; }

, .


– createPaint, DOM, . , controls, .

var controls = Object.create(null); function createPaint(parent) { var canvas = elt("canvas", {width: 500, height: 300}); var cx = canvas.getContext("2d"); var toolbar = elt("div", {class: "toolbar"}); for (var name in controls) toolbar.appendChild(controls[name](cx)); var panel = elt("div", {class: "picturepanel"}, canvas); parent.appendChild(elt("div", null, panel, toolbar)); }

, – . – , ( fillStyle) ( lineWidth).

, , .


, – , . controls, , , . , .

var tools = Object.create(null); controls.tool = function(cx) { var select = elt("select"); for (var name in tools) select.appendChild(elt("option", null, name)); cx.canvas.addEventListener("mousedown", function(event) { if (event.which == 1) { tools[select.value](event, cx); event.preventDefault(); } }); return elt("span", null, "Tool: ", select); };

tool , "mousedown" , event context. preventDefault, .

– , . , . 13 getBoundingClientRect . , , . clientX clientY , .

function relativePos(event, element) { var rect = element.getBoundingClientRect(); return {x: Math.floor(event.clientX - rect.left), y: Math.floor(event.clientY - rect.top)}; }

"mousemove", . trackDrag .

function trackDrag(onMove, onEnd) { function end(event) { removeEventListener("mousemove", onMove); removeEventListener("mouseup", end); if (onEnd) onEnd(event); } addEventListener("mousemove", onMove); addEventListener("mouseup", end); }

. – , "mousemove", – , . .

.

tools.Line = function(event, cx, onEnd) { cx.lineCap = "round"; var pos = relativePos(event, cx.canvas); trackDrag(function(event) { cx.beginPath(); cx.moveTo(pos.x, pos.y); pos = relativePos(event, cx.canvas); cx.lineTo(pos.x, pos.y); cx.stroke(); }, onEnd); };

lineCap “round”, - , , . , . , , lineCap .

, "mousemove", , , , strokeStyle lineWidth, .

onEnd , trackDrag. , undefined, . , erase, .

tools.Erase = function(event, cx) { cx.globalCompositeOperation = "destination-out"; tools.Line(event, cx, function() { cx.globalCompositeOperation = "source-over"; }); };

globalCompositeOperation , . , "source-over", , , , . , , , .

“erase” globalCompositeOperation "destination-out", , .

. ( strokeStyle lineWidth ), . , , .


, , .

18 . . , . - . - "date", "email", "url" "number". . – “text”, , , . , , , , .

controls.color = function(cx) { var input = elt("input", {type: "color"}); input.addEventListener("change", function() { cx.fillStyle = input.value; cx.strokeStyle = input.value; }); return elt("span", null, "Color: ", input); };

color fillStyle strokeStyle .

.

controls.brushSize = function(cx) { var select = elt("select"); var sizes = [1, 2, 3, 5, 8, 12, 25, 35, 50, 75, 100]; sizes.forEach(function(size) { select.appendChild(elt("option", {value: size}, size + " pixels")); }); select.addEventListener("change", function() { cx.lineWidth = select.value; }); return elt("span", null, "Brush size: ", select); };

, , lineWidth .


, , URL . http: https:, URL , . URL , HTML :

data:text/html,<h1 style="color:red">Hello!</h1>

URL , , , . , , - .

toDataURL, URL , . . URL . , href , .

controls.save = function(cx) { var link = elt("a", {href: "/"}, "Save"); function update() { try { link.href = cx.canvas.toDataURL(); } catch (e) { if (e instanceof SecurityError) link.href = "javascript:alert(" + JSON.stringify("Can't save: " + e.toString()) + ")"; else throw e; } } link.addEventListener("mouseover", update); link.addEventListener("focus", update); return link; };

, , , , .

, URL , . .

. URL , , (. 17), , , .

( ). , .

, , , , «». , URL , «» . , .

try/catch update . «», toDataURL , SecurityError. URL javascript:. , , , .


URL. , URL .

function loadImageURL(cx, url) { var image = document.createElement("img"); image.addEventListener("load", function() { var color = cx.fillStyle, size = cx.lineWidth; cx.canvas.width = image.width; cx.canvas.height = image.height; cx.drawImage(image, 0, 0); cx.fillStyle = color; cx.strokeStyle = color; cx.lineWidth = size; }); image.src = url; }

, . - (fillStyle lineWidth), .

FileReader 18. readAsText readAsDataURL – , . , , URL , loadImageURL .

controls.openFile = function(cx) { var input = elt("input", {type: "file"}); input.addEventListener("change", function() { if (input.files.length == 0) return; var reader = new FileReader(); reader.addEventListener("load", function() { loadImageURL(cx, reader.result); }); reader.readAsDataURL(input.files[0]); }); return elt("div", null, "Open file: ", input); };

URL . , URL, “change”. , – Enter, load.

controls.openURL = function(cx) { var input = elt("input", {type: "text"}); var form = elt("form", null, "Open URL: ", input, elt("button", {type: "submit"}, "load")); form.addEventListener("submit", function(event) { event.preventDefault(); loadImageURL(cx, form.querySelector("input").value); }); return form; };

, , .


, , .

tools.Text = function(event, cx) { var text = prompt("Text:", ""); if (text) { var pos = relativePos(event, cx.canvas); cx.font = Math.max(7, cx.lineWidth) + "px sans-serif"; cx.fillText(text, pos.x, pos.y); } };

, sans-serif , . – 7 , .

- – “”. , , .

tools.Spray = function(event, cx) { var radius = cx.lineWidth / 2; var area = radius * radius * Math.PI; var dotsPerTick = Math.ceil(area / 30); var currentPos = relativePos(event, cx.canvas); var spray = setInterval(function() { for (var i = 0; i < dotsPerTick; i++) { var offset = randomPointInRadius(radius); cx.fillRect(currentPos.x + offset.x, currentPos.y + offset.y, 1, 1); } }, 25); trackDrag(function(event) { currentPos = relativePos(event, cx.canvas); }, function() { clearInterval(spray); }); };

setInterval 25 , . trackDrag , currentPos , .

, , 30. randomPointInRadius.

function randomPointInRadius(radius) { for (;;) { var x = Math.random() * 2 - 1; var y = Math.random() * 2 - 1; if (x * x + y * y <= 1) return {x: x * radius, y: y * radius}; } }

(-1,-1) (1,1). , , 1. , , .

. , Math.sin Math.cos . . , , .

. .

<link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>


. .


Rectangle, (. fillRect 16) . , , , . , .

, , . , , ?

, position: absolute, 13. , . pageX pageY , left, top, width height.

<script> tools.Rectangle = function(event, cx) { // }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>


– , , . .

. toDataURL , URL . getImageData, width, height data. data 0 255, - red, green, blue alpha ().

, , ( – ), , .

function pixelAt(cx, x, y) { var data = cx.getImageData(x, y, 1, 1); console.log(data.data); } var canvas = document.createElement("canvas"); var cx = canvas.getContext("2d"); pixelAt(cx, 10, 10); // → [0, 0, 0, 0] cx.fillStyle = "red"; cx.fillRect(10, 10, 1, 1); pixelAt(cx, 10, 10); // → [255, 0, 0, 255]

getImageData x y, , .

, . color . , fillStyle strokeStyle , .

, , CSS, rgb(R, G, B), 15.

getImageData , toDataURL – , , . try/catch alert.

<script> tools["Pick color"] = function(event, cx) { // Your code here. }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>


, , . , , , - .

, . , , , ( ), , .

, , :



, , , .

getImageData . , , . 7, , . (x,y) (x + y × width) × 4

(), () .

, , , . . - , 9. , , , , .

. , . , , .

fillRect, - , , .

<script> tools["Flood fill"] = function(event, cx) { // }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>

, . , , . , , ..

"mousedown" , , . , , "mousemove", , .

. fillStyle, strokeStyle, lineWidth .

. file, . URL .

. save . , . , .

DOM
30 DOM. - .

DOM HTML. HTML – DOM , - . querySelector , DOM .

DOM JavaScript, . DOM JavaScript. 13, DOM . , .

– elt 13. , , , , .

function elt(name, attributes) { var node = document.createElement(name); if (attributes) { for (var attr in attributes) if (attributes.hasOwnProperty(attr)) node.setAttribute(attr, attributes[attr]); } for (var i = 2; i < arguments.length; i++) { var child = arguments[i]; if (typeof child == "string") child = document.createTextNode(child); node.appendChild(child); } return node; }

, .


– createPaint, DOM, . , controls, .

var controls = Object.create(null); function createPaint(parent) { var canvas = elt("canvas", {width: 500, height: 300}); var cx = canvas.getContext("2d"); var toolbar = elt("div", {class: "toolbar"}); for (var name in controls) toolbar.appendChild(controls[name](cx)); var panel = elt("div", {class: "picturepanel"}, canvas); parent.appendChild(elt("div", null, panel, toolbar)); }

, – . – , ( fillStyle) ( lineWidth).

, , .


, – , . controls, , , . , .

var tools = Object.create(null); controls.tool = function(cx) { var select = elt("select"); for (var name in tools) select.appendChild(elt("option", null, name)); cx.canvas.addEventListener("mousedown", function(event) { if (event.which == 1) { tools[select.value](event, cx); event.preventDefault(); } }); return elt("span", null, "Tool: ", select); };

tool , "mousedown" , event context. preventDefault, .

– , . , . 13 getBoundingClientRect . , , . clientX clientY , .

function relativePos(event, element) { var rect = element.getBoundingClientRect(); return {x: Math.floor(event.clientX - rect.left), y: Math.floor(event.clientY - rect.top)}; }

"mousemove", . trackDrag .

function trackDrag(onMove, onEnd) { function end(event) { removeEventListener("mousemove", onMove); removeEventListener("mouseup", end); if (onEnd) onEnd(event); } addEventListener("mousemove", onMove); addEventListener("mouseup", end); }

. – , "mousemove", – , . .

.

tools.Line = function(event, cx, onEnd) { cx.lineCap = "round"; var pos = relativePos(event, cx.canvas); trackDrag(function(event) { cx.beginPath(); cx.moveTo(pos.x, pos.y); pos = relativePos(event, cx.canvas); cx.lineTo(pos.x, pos.y); cx.stroke(); }, onEnd); };

lineCap “round”, - , , . , . , , lineCap .

, "mousemove", , , , strokeStyle lineWidth, .

onEnd , trackDrag. , undefined, . , erase, .

tools.Erase = function(event, cx) { cx.globalCompositeOperation = "destination-out"; tools.Line(event, cx, function() { cx.globalCompositeOperation = "source-over"; }); };

globalCompositeOperation , . , "source-over", , , , . , , , .

“erase” globalCompositeOperation "destination-out", , .

. ( strokeStyle lineWidth ), . , , .


, , .

18 . . , . - . - "date", "email", "url" "number". . – “text”, , , . , , , , .

controls.color = function(cx) { var input = elt("input", {type: "color"}); input.addEventListener("change", function() { cx.fillStyle = input.value; cx.strokeStyle = input.value; }); return elt("span", null, "Color: ", input); };

color fillStyle strokeStyle .

.

controls.brushSize = function(cx) { var select = elt("select"); var sizes = [1, 2, 3, 5, 8, 12, 25, 35, 50, 75, 100]; sizes.forEach(function(size) { select.appendChild(elt("option", {value: size}, size + " pixels")); }); select.addEventListener("change", function() { cx.lineWidth = select.value; }); return elt("span", null, "Brush size: ", select); };

, , lineWidth .


, , URL . http: https:, URL , . URL , HTML :

data:text/html,<h1 style="color:red">Hello!</h1>

URL , , , . , , - .

toDataURL, URL , . . URL . , href , .

controls.save = function(cx) { var link = elt("a", {href: "/"}, "Save"); function update() { try { link.href = cx.canvas.toDataURL(); } catch (e) { if (e instanceof SecurityError) link.href = "javascript:alert(" + JSON.stringify("Can't save: " + e.toString()) + ")"; else throw e; } } link.addEventListener("mouseover", update); link.addEventListener("focus", update); return link; };

, , , , .

, URL , . .

. URL , , (. 17), , , .

( ). , .

, , , , «». , URL , «» . , .

try/catch update . «», toDataURL , SecurityError. URL javascript:. , , , .


URL. , URL .

function loadImageURL(cx, url) { var image = document.createElement("img"); image.addEventListener("load", function() { var color = cx.fillStyle, size = cx.lineWidth; cx.canvas.width = image.width; cx.canvas.height = image.height; cx.drawImage(image, 0, 0); cx.fillStyle = color; cx.strokeStyle = color; cx.lineWidth = size; }); image.src = url; }

, . - (fillStyle lineWidth), .

FileReader 18. readAsText readAsDataURL – , . , , URL , loadImageURL .

controls.openFile = function(cx) { var input = elt("input", {type: "file"}); input.addEventListener("change", function() { if (input.files.length == 0) return; var reader = new FileReader(); reader.addEventListener("load", function() { loadImageURL(cx, reader.result); }); reader.readAsDataURL(input.files[0]); }); return elt("div", null, "Open file: ", input); };

URL . , URL, “change”. , – Enter, load.

controls.openURL = function(cx) { var input = elt("input", {type: "text"}); var form = elt("form", null, "Open URL: ", input, elt("button", {type: "submit"}, "load")); form.addEventListener("submit", function(event) { event.preventDefault(); loadImageURL(cx, form.querySelector("input").value); }); return form; };

, , .


, , .

tools.Text = function(event, cx) { var text = prompt("Text:", ""); if (text) { var pos = relativePos(event, cx.canvas); cx.font = Math.max(7, cx.lineWidth) + "px sans-serif"; cx.fillText(text, pos.x, pos.y); } };

, sans-serif , . – 7 , .

- – “”. , , .

tools.Spray = function(event, cx) { var radius = cx.lineWidth / 2; var area = radius * radius * Math.PI; var dotsPerTick = Math.ceil(area / 30); var currentPos = relativePos(event, cx.canvas); var spray = setInterval(function() { for (var i = 0; i < dotsPerTick; i++) { var offset = randomPointInRadius(radius); cx.fillRect(currentPos.x + offset.x, currentPos.y + offset.y, 1, 1); } }, 25); trackDrag(function(event) { currentPos = relativePos(event, cx.canvas); }, function() { clearInterval(spray); }); };

setInterval 25 , . trackDrag , currentPos , .

, , 30. randomPointInRadius.

function randomPointInRadius(radius) { for (;;) { var x = Math.random() * 2 - 1; var y = Math.random() * 2 - 1; if (x * x + y * y <= 1) return {x: x * radius, y: y * radius}; } }

(-1,-1) (1,1). , , 1. , , .

. , Math.sin Math.cos . . , , .

. .

<link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>


. .


Rectangle, (. fillRect 16) . , , , . , .

, , . , , ?

, position: absolute, 13. , . pageX pageY , left, top, width height.

<script> tools.Rectangle = function(event, cx) { // }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>


– , , . .

. toDataURL , URL . getImageData, width, height data. data 0 255, - red, green, blue alpha ().

, , ( – ), , .

function pixelAt(cx, x, y) { var data = cx.getImageData(x, y, 1, 1); console.log(data.data); } var canvas = document.createElement("canvas"); var cx = canvas.getContext("2d"); pixelAt(cx, 10, 10); // → [0, 0, 0, 0] cx.fillStyle = "red"; cx.fillRect(10, 10, 1, 1); pixelAt(cx, 10, 10); // → [255, 0, 0, 255]

getImageData x y, , .

, . color . , fillStyle strokeStyle , .

, , CSS, rgb(R, G, B), 15.

getImageData , toDataURL – , , . try/catch alert.

<script> tools["Pick color"] = function(event, cx) { // Your code here. }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>


, , . , , , - .

, . , , , ( ), , .

, , :



, , , .

getImageData . , , . 7, , . (x,y) (x + y × width) × 4

(), () .

, , , . . - , 9. , , , , .

. , . , , .

fillRect, - , , .

<script> tools["Flood fill"] = function(event, cx) { // }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>

 ,      .    ,     ,      .     ,   ,    .. 
 
      "mousedown"  ,   ,   .  , ,    "mousemove",      ,           . 
 
         .         fillStyle, strokeStyle,  lineWidth     . 
 
       .    file,       .   URL     . 
 
    .  save       .    ,       .   ,   . 
 
  DOM 
       30  DOM.   -  . 
 
      DOM  HTML.     HTML    –   DOM        ,    -   .       querySelector   ,     DOM  . 
 
      DOM      JavaScript,   .       DOM   JavaScript.      13,      DOM  .      ,    . 
 
   –    elt   13.        ,     ,  ,    ,      . 
 
 function elt(name, attributes) { var node = document.createElement(name); if (attributes) { for (var attr in attributes) if (attributes.hasOwnProperty(attr)) node.setAttribute(attr, attributes[attr]); } for (var i = 2; i < arguments.length; i++) { var child = arguments[i]; if (typeof child == "string") child = document.createTextNode(child); node.appendChild(child); } return node; } 
 
       ,       . 
 
  
    –  createPaint,      DOM,     .      ,    controls,           . 
 
 var controls = Object.create(null); function createPaint(parent) { var canvas = elt("canvas", {width: 500, height: 300}); var cx = canvas.getContext("2d"); var toolbar = elt("div", {class: "toolbar"}); for (var name in controls) toolbar.appendChild(controls[name](cx)); var panel = elt("div", {class: "picturepanel"}, canvas); parent.appendChild(elt("div", null, panel, toolbar)); } 
 
           ,    –   .        –    ,   (  fillStyle)    (  lineWidth). 
 
          ,      ,     . 
 
   
   ,    –  ,    .      controls,        ,           ,       .       ,          . 
 
 var tools = Object.create(null); controls.tool = function(cx) { var select = elt("select"); for (var name in tools) select.appendChild(elt("option", null, name)); cx.canvas.addEventListener("mousedown", function(event) { if (event.which == 1) { tools[select.value](event, cx); event.preventDefault(); } }); return elt("span", null, "Tool: ", select); }; 
 
   tool        ,    "mousedown"          ,    event  context.    preventDefault,          . 
 
    – ,     .   ,           .    13   getBoundingClientRect     .  ,   ,     .    clientX  clientY      ,                . 
 
 function relativePos(event, element) { var rect = element.getBoundingClientRect(); return {x: Math.floor(event.clientX - rect.left), y: Math.floor(event.clientY - rect.top)}; } 
 
       "mousemove",    .  trackDrag       . 
 
 function trackDrag(onMove, onEnd) { function end(event) { removeEventListener("mousemove", onMove); removeEventListener("mouseup", end); if (onEnd) onEnd(event); } addEventListener("mousemove", onMove); addEventListener("mouseup", end); } 
 
    .  – ,      "mousemove",   – ,     .      . 
 
           . 
 
 tools.Line = function(event, cx, onEnd) { cx.lineCap = "round"; var pos = relativePos(event, cx.canvas); trackDrag(function(event) { cx.beginPath(); cx.moveTo(pos.x, pos.y); pos = relativePos(event, cx.canvas); cx.lineTo(pos.x, pos.y); cx.stroke(); }, onEnd); }; 
 
      lineCap  “round”, -      ,   ,     .     ,      .     ,      ,     lineCap  . 
 
 ,    "mousemove",  ,   ,         ,      strokeStyle  lineWidth,     . 
 
  onEnd   ,  trackDrag.        ,        undefined,       .        ,  erase,      . 
 
 tools.Erase = function(event, cx) { cx.globalCompositeOperation = "destination-out"; tools.Line(event, cx, function() { cx.globalCompositeOperation = "source-over"; }); }; 
 
  globalCompositeOperation   ,        .  ,   "source-over",  ,  ,  ,   .   ,    ,     ,   . 
 
  “erase”  globalCompositeOperation  "destination-out",    ,     . 
 
         .          (     strokeStyle  lineWidth  ),   . ,   ,  . 
 
     
 ,              ,      . 
 
   18      .        .          ,            .    - .   - "date", "email", "url"  "number".      .      – “text”,     ,     ,       . ,   ,       ,       ,       . 
 
 controls.color = function(cx) { var input = elt("input", {type: "color"}); input.addEventListener("change", function() { cx.fillStyle = input.value; cx.strokeStyle = input.value; }); return elt("span", null, "Color: ", input); }; 
 
     color     fillStyle  strokeStyle    . 
 
      . 
 
 controls.brushSize = function(cx) { var select = elt("select"); var sizes = [1, 2, 3, 5, 8, 12, 25, 35, 50, 75, 100]; sizes.forEach(function(size) { select.appendChild(elt("option", {value: size}, size + " pixels")); }); select.addEventListener("change", function() { cx.lineWidth = select.value; }); return elt("span", null, "Brush size: ", select); }; 
 
       ,    ,    lineWidth    . 
 
  
  ,     ,      URL  .     http:  https:, URL      ,      .  URL  ,   HTML : 
 
 data:text/html,<h1 style="color:red">Hello!</h1> 
 
  URL    , , ,       .           ,  ,      - . 
 
       toDataURL,   URL  ,        .            .        URL   .       ,      href  ,            . 
 
 controls.save = function(cx) { var link = elt("a", {href: "/"}, "Save"); function update() { try { link.href = cx.canvas.toDataURL(); } catch (e) { if (e instanceof SecurityError) link.href = "javascript:alert(" + JSON.stringify("Can't save: " + e.toString()) + ")"; else throw e; } } link.addEventListener("mouseover", update); link.addEventListener("focus", update); return link; }; 
 
  ,          ,       ,      ,     . 
 
     ,      URL  ,    .       . 
 
           .     URL   ,      ,       (.  17),    ,    ,    . 
 
        (   ).        ,      . 
 
     ,  ,  ,    ,     «».  ,  URL  ,     «» .    ,     . 
 
     try/catch   update   .   «»,  toDataURL  ,   SecurityError.           URL   javascript:.     ,   ,     ,   . 
 
   
              URL.    ,      URL     . 
 
 function loadImageURL(cx, url) { var image = document.createElement("img"); image.addEventListener("load", function() { var color = cx.fillStyle, size = cx.lineWidth; cx.canvas.width = image.width; cx.canvas.height = image.height; cx.drawImage(image, 0, 0); cx.fillStyle = color; cx.strokeStyle = color; cx.lineWidth = size; }); image.src = url; } 
 
     ,    . -          (fillStyle  lineWidth),              . 
 
         FileReader   18.     readAsText        readAsDataURL –   ,   .   ,   ,  URL  ,     loadImageURL    . 
 
 controls.openFile = function(cx) { var input = elt("input", {type: "file"}); input.addEventListener("change", function() { if (input.files.length == 0) return; var reader = new FileReader(); reader.addEventListener("load", function() { loadImageURL(cx, reader.result); }); reader.readAsDataURL(input.files[0]); }); return elt("div", null, "Open file: ", input); }; 
 
    URL  .       ,       URL,        “change”.         ,     –    Enter,     load. 
 
 controls.openURL = function(cx) { var input = elt("input", {type: "text"}); var form = elt("form", null, "Open URL: ", input, elt("button", {type: "submit"}, "load")); form.addEventListener("submit", function(event) { event.preventDefault(); loadImageURL(cx, form.querySelector("input").value); }); return form; }; 
 
      ,   ,      . 
 
  
        ,    ,     . 
 
 tools.Text = function(event, cx) { var text = prompt("Text:", ""); if (text) { var pos = relativePos(event, cx.canvas); cx.font = Math.max(7, cx.lineWidth) + "px sans-serif"; cx.fillText(text, pos.x, pos.y); } }; 
 
          ,        sans-serif   ,    .   – 7 ,      . 
 
      - – “”.      ,    ,            . 
 
 tools.Spray = function(event, cx) { var radius = cx.lineWidth / 2; var area = radius * radius * Math.PI; var dotsPerTick = Math.ceil(area / 30); var currentPos = relativePos(event, cx.canvas); var spray = setInterval(function() { for (var i = 0; i < dotsPerTick; i++) { var offset = randomPointInRadius(radius); cx.fillRect(currentPos.x + offset.x, currentPos.y + offset.y, 1, 1); } }, 25); trackDrag(function(event) { currentPos = relativePos(event, cx.canvas); }, function() { clearInterval(spray); }); }; 
 
   setInterval      25 ,    .  trackDrag   ,  currentPos     ,       . 
 
  ,         ,           30.         randomPointInRadius. 
 
 function randomPointInRadius(radius) { for (;;) { var x = Math.random() * 2 - 1; var y = Math.random() * 2 - 1; if (x * x + y * y <= 1) return {x: x * radius, y: y * radius}; } } 
 
        (-1,-1)  (1,1).   ,  ,         1.    ,    ,   . 
 
      .       ,        Math.sin  Math.cos   .            .    ,    ,   . 
 
      .    . 
 
 <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body> 
 
  
        .    . 
 
  
   Rectangle,   (.  fillRect   16)  .      ,     ,    ,    . ,         . 
 
   ,  ,        .           ,       ,    ? 
 
   ,    position: absolute,      13.   ,      .  pageX  pageY          ,      left, top, width  height. 
 
 <script> tools.Rectangle = function(event, cx) { //   }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body> 
 
   
      –  ,        ,    .   . 
 
        .  toDataURL    ,       URL   .       getImageData,          width, height  data.   data     0  255,        - red, green, blue  alpha (). 
 
        ,  ,    (  –  ),   ,      . 
 
 function pixelAt(cx, x, y) { var data = cx.getImageData(x, y, 1, 1); console.log(data.data); } var canvas = document.createElement("canvas"); var cx = canvas.getContext("2d"); pixelAt(cx, 10, 10); // → [0, 0, 0, 0] cx.fillStyle = "red"; cx.fillRect(10, 10, 1, 1); pixelAt(cx, 10, 10); // → [255, 0, 0, 255] 
 
  getImageData     x  y,    ,      . 
 
     ,         .        color   .  ,  fillStyle  strokeStyle    ,   . 
 
 ,      ,   CSS,    rgb(R, G, B),      15. 
 
  getImageData    ,   toDataURL –   ,      ,    .   try/catch        alert. 
 
 <script> tools["Pick color"] = function(event, cx) { // Your code here. }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body> 
 
  
    ,  ,        . ,           ,   ,     -   . 
 
              ,    .       ,      ,      ,         (   ),    ,     . 
 
     , ,       : 
 
  
 
          ,   ,      ,   . 
 
    getImageData    .  ,       ,          .           7,  ,      .       (x,y)    (x + y × width) × 4 
 
      (),          () . 
 
            , ,   ,       .         .      -      ,    9.        ,    ,       ,    ,    . 
 
      .      ,       .  ,  ,    . 
 
       fillRect,   -  ,  ,     . 
 
 <script> tools["Flood fill"] = function(event, cx) { //   }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body> 

, . , , . , , ..

"mousedown" , , . , , "mousemove", , .

. fillStyle, strokeStyle, lineWidth .

. file, . URL .

. save . , . , .

DOM
30 DOM. - .

DOM HTML. HTML – DOM , - . querySelector , DOM .

DOM JavaScript, . DOM JavaScript. 13, DOM . , .

– elt 13. , , , , .

function elt(name, attributes) { var node = document.createElement(name); if (attributes) { for (var attr in attributes) if (attributes.hasOwnProperty(attr)) node.setAttribute(attr, attributes[attr]); } for (var i = 2; i < arguments.length; i++) { var child = arguments[i]; if (typeof child == "string") child = document.createTextNode(child); node.appendChild(child); } return node; }

, .


– createPaint, DOM, . , controls, .

var controls = Object.create(null); function createPaint(parent) { var canvas = elt("canvas", {width: 500, height: 300}); var cx = canvas.getContext("2d"); var toolbar = elt("div", {class: "toolbar"}); for (var name in controls) toolbar.appendChild(controls[name](cx)); var panel = elt("div", {class: "picturepanel"}, canvas); parent.appendChild(elt("div", null, panel, toolbar)); }

, – . – , ( fillStyle) ( lineWidth).

, , .


, – , . controls, , , . , .

var tools = Object.create(null); controls.tool = function(cx) { var select = elt("select"); for (var name in tools) select.appendChild(elt("option", null, name)); cx.canvas.addEventListener("mousedown", function(event) { if (event.which == 1) { tools[select.value](event, cx); event.preventDefault(); } }); return elt("span", null, "Tool: ", select); };

tool , "mousedown" , event context. preventDefault, .

– , . , . 13 getBoundingClientRect . , , . clientX clientY , .

function relativePos(event, element) { var rect = element.getBoundingClientRect(); return {x: Math.floor(event.clientX - rect.left), y: Math.floor(event.clientY - rect.top)}; }

"mousemove", . trackDrag .

function trackDrag(onMove, onEnd) { function end(event) { removeEventListener("mousemove", onMove); removeEventListener("mouseup", end); if (onEnd) onEnd(event); } addEventListener("mousemove", onMove); addEventListener("mouseup", end); }

. – , "mousemove", – , . .

.

tools.Line = function(event, cx, onEnd) { cx.lineCap = "round"; var pos = relativePos(event, cx.canvas); trackDrag(function(event) { cx.beginPath(); cx.moveTo(pos.x, pos.y); pos = relativePos(event, cx.canvas); cx.lineTo(pos.x, pos.y); cx.stroke(); }, onEnd); };

lineCap “round”, - , , . , . , , lineCap .

, "mousemove", , , , strokeStyle lineWidth, .

onEnd , trackDrag. , undefined, . , erase, .

tools.Erase = function(event, cx) { cx.globalCompositeOperation = "destination-out"; tools.Line(event, cx, function() { cx.globalCompositeOperation = "source-over"; }); };

globalCompositeOperation , . , "source-over", , , , . , , , .

“erase” globalCompositeOperation "destination-out", , .

. ( strokeStyle lineWidth ), . , , .


, , .

18 . . , . - . - "date", "email", "url" "number". . – “text”, , , . , , , , .

controls.color = function(cx) { var input = elt("input", {type: "color"}); input.addEventListener("change", function() { cx.fillStyle = input.value; cx.strokeStyle = input.value; }); return elt("span", null, "Color: ", input); };

color fillStyle strokeStyle .

.

controls.brushSize = function(cx) { var select = elt("select"); var sizes = [1, 2, 3, 5, 8, 12, 25, 35, 50, 75, 100]; sizes.forEach(function(size) { select.appendChild(elt("option", {value: size}, size + " pixels")); }); select.addEventListener("change", function() { cx.lineWidth = select.value; }); return elt("span", null, "Brush size: ", select); };

, , lineWidth .


, , URL . http: https:, URL , . URL , HTML :

data:text/html,<h1 style="color:red">Hello!</h1>

URL , , , . , , - .

toDataURL, URL , . . URL . , href , .

controls.save = function(cx) { var link = elt("a", {href: "/"}, "Save"); function update() { try { link.href = cx.canvas.toDataURL(); } catch (e) { if (e instanceof SecurityError) link.href = "javascript:alert(" + JSON.stringify("Can't save: " + e.toString()) + ")"; else throw e; } } link.addEventListener("mouseover", update); link.addEventListener("focus", update); return link; };

, , , , .

, URL , . .

. URL , , (. 17), , , .

( ). , .

, , , , «». , URL , «» . , .

try/catch update . «», toDataURL , SecurityError. URL javascript:. , , , .


URL. , URL .

function loadImageURL(cx, url) { var image = document.createElement("img"); image.addEventListener("load", function() { var color = cx.fillStyle, size = cx.lineWidth; cx.canvas.width = image.width; cx.canvas.height = image.height; cx.drawImage(image, 0, 0); cx.fillStyle = color; cx.strokeStyle = color; cx.lineWidth = size; }); image.src = url; }

, . - (fillStyle lineWidth), .

FileReader 18. readAsText readAsDataURL – , . , , URL , loadImageURL .

controls.openFile = function(cx) { var input = elt("input", {type: "file"}); input.addEventListener("change", function() { if (input.files.length == 0) return; var reader = new FileReader(); reader.addEventListener("load", function() { loadImageURL(cx, reader.result); }); reader.readAsDataURL(input.files[0]); }); return elt("div", null, "Open file: ", input); };

URL . , URL, “change”. , – Enter, load.

controls.openURL = function(cx) { var input = elt("input", {type: "text"}); var form = elt("form", null, "Open URL: ", input, elt("button", {type: "submit"}, "load")); form.addEventListener("submit", function(event) { event.preventDefault(); loadImageURL(cx, form.querySelector("input").value); }); return form; };

, , .


, , .

tools.Text = function(event, cx) { var text = prompt("Text:", ""); if (text) { var pos = relativePos(event, cx.canvas); cx.font = Math.max(7, cx.lineWidth) + "px sans-serif"; cx.fillText(text, pos.x, pos.y); } };

, sans-serif , . – 7 , .

- – “”. , , .

tools.Spray = function(event, cx) { var radius = cx.lineWidth / 2; var area = radius * radius * Math.PI; var dotsPerTick = Math.ceil(area / 30); var currentPos = relativePos(event, cx.canvas); var spray = setInterval(function() { for (var i = 0; i < dotsPerTick; i++) { var offset = randomPointInRadius(radius); cx.fillRect(currentPos.x + offset.x, currentPos.y + offset.y, 1, 1); } }, 25); trackDrag(function(event) { currentPos = relativePos(event, cx.canvas); }, function() { clearInterval(spray); }); };

setInterval 25 , . trackDrag , currentPos , .

, , 30. randomPointInRadius.

function randomPointInRadius(radius) { for (;;) { var x = Math.random() * 2 - 1; var y = Math.random() * 2 - 1; if (x * x + y * y <= 1) return {x: x * radius, y: y * radius}; } }

(-1,-1) (1,1). , , 1. , , .

. , Math.sin Math.cos . . , , .

. .

<link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>


. .


Rectangle, (. fillRect 16) . , , , . , .

, , . , , ?

, position: absolute, 13. , . pageX pageY , left, top, width height.

<script> tools.Rectangle = function(event, cx) { // }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>


– , , . .

. toDataURL , URL . getImageData, width, height data. data 0 255, - red, green, blue alpha ().

, , ( – ), , .

function pixelAt(cx, x, y) { var data = cx.getImageData(x, y, 1, 1); console.log(data.data); } var canvas = document.createElement("canvas"); var cx = canvas.getContext("2d"); pixelAt(cx, 10, 10); // → [0, 0, 0, 0] cx.fillStyle = "red"; cx.fillRect(10, 10, 1, 1); pixelAt(cx, 10, 10); // → [255, 0, 0, 255]

getImageData x y, , .

, . color . , fillStyle strokeStyle , .

, , CSS, rgb(R, G, B), 15.

getImageData , toDataURL – , , . try/catch alert.

<script> tools["Pick color"] = function(event, cx) { // Your code here. }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>


, , . , , , - .

, . , , , ( ), , .

, , :



, , , .

getImageData . , , . 7, , . (x,y) (x + y × width) × 4

(), () .

, , , . . - , 9. , , , , .

. , . , , .

fillRect, - , , .

<script> tools["Flood fill"] = function(event, cx) { // }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>

 ,      .    ,     ,      .     ,   ,    .. 
 
      "mousedown"  ,   ,   .  , ,    "mousemove",      ,           . 
 
         .         fillStyle, strokeStyle,  lineWidth     . 
 
       .    file,       .   URL     . 
 
    .  save       .    ,       .   ,   . 
 
  DOM 
       30  DOM.   -  . 
 
      DOM  HTML.     HTML    –   DOM        ,    -   .       querySelector   ,     DOM  . 
 
      DOM      JavaScript,   .       DOM   JavaScript.      13,      DOM  .      ,    . 
 
   –    elt   13.        ,     ,  ,    ,      . 
 
 function elt(name, attributes) { var node = document.createElement(name); if (attributes) { for (var attr in attributes) if (attributes.hasOwnProperty(attr)) node.setAttribute(attr, attributes[attr]); } for (var i = 2; i < arguments.length; i++) { var child = arguments[i]; if (typeof child == "string") child = document.createTextNode(child); node.appendChild(child); } return node; } 
 
       ,       . 
 
  
    –  createPaint,      DOM,     .      ,    controls,           . 
 
 var controls = Object.create(null); function createPaint(parent) { var canvas = elt("canvas", {width: 500, height: 300}); var cx = canvas.getContext("2d"); var toolbar = elt("div", {class: "toolbar"}); for (var name in controls) toolbar.appendChild(controls[name](cx)); var panel = elt("div", {class: "picturepanel"}, canvas); parent.appendChild(elt("div", null, panel, toolbar)); } 
 
           ,    –   .        –    ,   (  fillStyle)    (  lineWidth). 
 
          ,      ,     . 
 
   
   ,    –  ,    .      controls,        ,           ,       .       ,          . 
 
 var tools = Object.create(null); controls.tool = function(cx) { var select = elt("select"); for (var name in tools) select.appendChild(elt("option", null, name)); cx.canvas.addEventListener("mousedown", function(event) { if (event.which == 1) { tools[select.value](event, cx); event.preventDefault(); } }); return elt("span", null, "Tool: ", select); }; 
 
   tool        ,    "mousedown"          ,    event  context.    preventDefault,          . 
 
    – ,     .   ,           .    13   getBoundingClientRect     .  ,   ,     .    clientX  clientY      ,                . 
 
 function relativePos(event, element) { var rect = element.getBoundingClientRect(); return {x: Math.floor(event.clientX - rect.left), y: Math.floor(event.clientY - rect.top)}; } 
 
       "mousemove",    .  trackDrag       . 
 
 function trackDrag(onMove, onEnd) { function end(event) { removeEventListener("mousemove", onMove); removeEventListener("mouseup", end); if (onEnd) onEnd(event); } addEventListener("mousemove", onMove); addEventListener("mouseup", end); } 
 
    .  – ,      "mousemove",   – ,     .      . 
 
           . 
 
 tools.Line = function(event, cx, onEnd) { cx.lineCap = "round"; var pos = relativePos(event, cx.canvas); trackDrag(function(event) { cx.beginPath(); cx.moveTo(pos.x, pos.y); pos = relativePos(event, cx.canvas); cx.lineTo(pos.x, pos.y); cx.stroke(); }, onEnd); }; 
 
      lineCap  “round”, -      ,   ,     .     ,      .     ,      ,     lineCap  . 
 
 ,    "mousemove",  ,   ,         ,      strokeStyle  lineWidth,     . 
 
  onEnd   ,  trackDrag.        ,        undefined,       .        ,  erase,      . 
 
 tools.Erase = function(event, cx) { cx.globalCompositeOperation = "destination-out"; tools.Line(event, cx, function() { cx.globalCompositeOperation = "source-over"; }); }; 
 
  globalCompositeOperation   ,        .  ,   "source-over",  ,  ,  ,   .   ,    ,     ,   . 
 
  “erase”  globalCompositeOperation  "destination-out",    ,     . 
 
         .          (     strokeStyle  lineWidth  ),   . ,   ,  . 
 
     
 ,              ,      . 
 
   18      .        .          ,            .    - .   - "date", "email", "url"  "number".      .      – “text”,     ,     ,       . ,   ,       ,       ,       . 
 
 controls.color = function(cx) { var input = elt("input", {type: "color"}); input.addEventListener("change", function() { cx.fillStyle = input.value; cx.strokeStyle = input.value; }); return elt("span", null, "Color: ", input); }; 
 
     color     fillStyle  strokeStyle    . 
 
      . 
 
 controls.brushSize = function(cx) { var select = elt("select"); var sizes = [1, 2, 3, 5, 8, 12, 25, 35, 50, 75, 100]; sizes.forEach(function(size) { select.appendChild(elt("option", {value: size}, size + " pixels")); }); select.addEventListener("change", function() { cx.lineWidth = select.value; }); return elt("span", null, "Brush size: ", select); }; 
 
       ,    ,    lineWidth    . 
 
  
  ,     ,      URL  .     http:  https:, URL      ,      .  URL  ,   HTML : 
 
 data:text/html,<h1 style="color:red">Hello!</h1> 
 
  URL    , , ,       .           ,  ,      - . 
 
       toDataURL,   URL  ,        .            .        URL   .       ,      href  ,            . 
 
 controls.save = function(cx) { var link = elt("a", {href: "/"}, "Save"); function update() { try { link.href = cx.canvas.toDataURL(); } catch (e) { if (e instanceof SecurityError) link.href = "javascript:alert(" + JSON.stringify("Can't save: " + e.toString()) + ")"; else throw e; } } link.addEventListener("mouseover", update); link.addEventListener("focus", update); return link; }; 
 
  ,          ,       ,      ,     . 
 
     ,      URL  ,    .       . 
 
           .     URL   ,      ,       (.  17),    ,    ,    . 
 
        (   ).        ,      . 
 
     ,  ,  ,    ,     «».  ,  URL  ,     «» .    ,     . 
 
     try/catch   update   .   «»,  toDataURL  ,   SecurityError.           URL   javascript:.     ,   ,     ,   . 
 
   
              URL.    ,      URL     . 
 
 function loadImageURL(cx, url) { var image = document.createElement("img"); image.addEventListener("load", function() { var color = cx.fillStyle, size = cx.lineWidth; cx.canvas.width = image.width; cx.canvas.height = image.height; cx.drawImage(image, 0, 0); cx.fillStyle = color; cx.strokeStyle = color; cx.lineWidth = size; }); image.src = url; } 
 
     ,    . -          (fillStyle  lineWidth),              . 
 
         FileReader   18.     readAsText        readAsDataURL –   ,   .   ,   ,  URL  ,     loadImageURL    . 
 
 controls.openFile = function(cx) { var input = elt("input", {type: "file"}); input.addEventListener("change", function() { if (input.files.length == 0) return; var reader = new FileReader(); reader.addEventListener("load", function() { loadImageURL(cx, reader.result); }); reader.readAsDataURL(input.files[0]); }); return elt("div", null, "Open file: ", input); }; 
 
    URL  .       ,       URL,        “change”.         ,     –    Enter,     load. 
 
 controls.openURL = function(cx) { var input = elt("input", {type: "text"}); var form = elt("form", null, "Open URL: ", input, elt("button", {type: "submit"}, "load")); form.addEventListener("submit", function(event) { event.preventDefault(); loadImageURL(cx, form.querySelector("input").value); }); return form; }; 
 
      ,   ,      . 
 
  
        ,    ,     . 
 
 tools.Text = function(event, cx) { var text = prompt("Text:", ""); if (text) { var pos = relativePos(event, cx.canvas); cx.font = Math.max(7, cx.lineWidth) + "px sans-serif"; cx.fillText(text, pos.x, pos.y); } }; 
 
          ,        sans-serif   ,    .   – 7 ,      . 
 
      - – “”.      ,    ,            . 
 
 tools.Spray = function(event, cx) { var radius = cx.lineWidth / 2; var area = radius * radius * Math.PI; var dotsPerTick = Math.ceil(area / 30); var currentPos = relativePos(event, cx.canvas); var spray = setInterval(function() { for (var i = 0; i < dotsPerTick; i++) { var offset = randomPointInRadius(radius); cx.fillRect(currentPos.x + offset.x, currentPos.y + offset.y, 1, 1); } }, 25); trackDrag(function(event) { currentPos = relativePos(event, cx.canvas); }, function() { clearInterval(spray); }); }; 
 
   setInterval      25 ,    .  trackDrag   ,  currentPos     ,       . 
 
  ,         ,           30.         randomPointInRadius. 
 
 function randomPointInRadius(radius) { for (;;) { var x = Math.random() * 2 - 1; var y = Math.random() * 2 - 1; if (x * x + y * y <= 1) return {x: x * radius, y: y * radius}; } } 
 
        (-1,-1)  (1,1).   ,  ,         1.    ,    ,   . 
 
      .       ,        Math.sin  Math.cos   .            .    ,    ,   . 
 
      .    . 
 
 <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body> 
 
  
        .    . 
 
  
   Rectangle,   (.  fillRect   16)  .      ,     ,    ,    . ,         . 
 
   ,  ,        .           ,       ,    ? 
 
   ,    position: absolute,      13.   ,      .  pageX  pageY          ,      left, top, width  height. 
 
 <script> tools.Rectangle = function(event, cx) { //   }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body> 
 
   
      –  ,        ,    .   . 
 
        .  toDataURL    ,       URL   .       getImageData,          width, height  data.   data     0  255,        - red, green, blue  alpha (). 
 
        ,  ,    (  –  ),   ,      . 
 
 function pixelAt(cx, x, y) { var data = cx.getImageData(x, y, 1, 1); console.log(data.data); } var canvas = document.createElement("canvas"); var cx = canvas.getContext("2d"); pixelAt(cx, 10, 10); // → [0, 0, 0, 0] cx.fillStyle = "red"; cx.fillRect(10, 10, 1, 1); pixelAt(cx, 10, 10); // → [255, 0, 0, 255] 
 
  getImageData     x  y,    ,      . 
 
     ,         .        color   .  ,  fillStyle  strokeStyle    ,   . 
 
 ,      ,   CSS,    rgb(R, G, B),      15. 
 
  getImageData    ,   toDataURL –   ,      ,    .   try/catch        alert. 
 
 <script> tools["Pick color"] = function(event, cx) { // Your code here. }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body> 
 
  
    ,  ,        . ,           ,   ,     -   . 
 
              ,    .       ,      ,      ,         (   ),    ,     . 
 
     , ,       : 
 
  
 
          ,   ,      ,   . 
 
    getImageData    .  ,       ,          .           7,  ,      .       (x,y)    (x + y × width) × 4 
 
      (),          () . 
 
            , ,   ,       .         .      -      ,    9.        ,    ,       ,    ,    . 
 
      .      ,       .  ,  ,    . 
 
       fillRect,   -  ,  ,     . 
 
 <script> tools["Flood fill"] = function(event, cx) { //   }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body> 

, . , , . , , ..

"mousedown" , , . , , "mousemove", , .

. fillStyle, strokeStyle, lineWidth .

. file, . URL .

. save . , . , .

DOM
30 DOM. - .

DOM HTML. HTML – DOM , - . querySelector , DOM .

DOM JavaScript, . DOM JavaScript. 13, DOM . , .

– elt 13. , , , , .

function elt(name, attributes) { var node = document.createElement(name); if (attributes) { for (var attr in attributes) if (attributes.hasOwnProperty(attr)) node.setAttribute(attr, attributes[attr]); } for (var i = 2; i < arguments.length; i++) { var child = arguments[i]; if (typeof child == "string") child = document.createTextNode(child); node.appendChild(child); } return node; }

, .


– createPaint, DOM, . , controls, .

var controls = Object.create(null); function createPaint(parent) { var canvas = elt("canvas", {width: 500, height: 300}); var cx = canvas.getContext("2d"); var toolbar = elt("div", {class: "toolbar"}); for (var name in controls) toolbar.appendChild(controls[name](cx)); var panel = elt("div", {class: "picturepanel"}, canvas); parent.appendChild(elt("div", null, panel, toolbar)); }

, – . – , ( fillStyle) ( lineWidth).

, , .


, – , . controls, , , . , .

var tools = Object.create(null); controls.tool = function(cx) { var select = elt("select"); for (var name in tools) select.appendChild(elt("option", null, name)); cx.canvas.addEventListener("mousedown", function(event) { if (event.which == 1) { tools[select.value](event, cx); event.preventDefault(); } }); return elt("span", null, "Tool: ", select); };

tool , "mousedown" , event context. preventDefault, .

– , . , . 13 getBoundingClientRect . , , . clientX clientY , .

function relativePos(event, element) { var rect = element.getBoundingClientRect(); return {x: Math.floor(event.clientX - rect.left), y: Math.floor(event.clientY - rect.top)}; }

"mousemove", . trackDrag .

function trackDrag(onMove, onEnd) { function end(event) { removeEventListener("mousemove", onMove); removeEventListener("mouseup", end); if (onEnd) onEnd(event); } addEventListener("mousemove", onMove); addEventListener("mouseup", end); }

. – , "mousemove", – , . .

.

tools.Line = function(event, cx, onEnd) { cx.lineCap = "round"; var pos = relativePos(event, cx.canvas); trackDrag(function(event) { cx.beginPath(); cx.moveTo(pos.x, pos.y); pos = relativePos(event, cx.canvas); cx.lineTo(pos.x, pos.y); cx.stroke(); }, onEnd); };

lineCap “round”, - , , . , . , , lineCap .

, "mousemove", , , , strokeStyle lineWidth, .

onEnd , trackDrag. , undefined, . , erase, .

tools.Erase = function(event, cx) { cx.globalCompositeOperation = "destination-out"; tools.Line(event, cx, function() { cx.globalCompositeOperation = "source-over"; }); };

globalCompositeOperation , . , "source-over", , , , . , , , .

“erase” globalCompositeOperation "destination-out", , .

. ( strokeStyle lineWidth ), . , , .


, , .

18 . . , . - . - "date", "email", "url" "number". . – “text”, , , . , , , , .

controls.color = function(cx) { var input = elt("input", {type: "color"}); input.addEventListener("change", function() { cx.fillStyle = input.value; cx.strokeStyle = input.value; }); return elt("span", null, "Color: ", input); };

color fillStyle strokeStyle .

.

controls.brushSize = function(cx) { var select = elt("select"); var sizes = [1, 2, 3, 5, 8, 12, 25, 35, 50, 75, 100]; sizes.forEach(function(size) { select.appendChild(elt("option", {value: size}, size + " pixels")); }); select.addEventListener("change", function() { cx.lineWidth = select.value; }); return elt("span", null, "Brush size: ", select); };

, , lineWidth .


, , URL . http: https:, URL , . URL , HTML :

data:text/html,<h1 style="color:red">Hello!</h1>

URL , , , . , , - .

toDataURL, URL , . . URL . , href , .

controls.save = function(cx) { var link = elt("a", {href: "/"}, "Save"); function update() { try { link.href = cx.canvas.toDataURL(); } catch (e) { if (e instanceof SecurityError) link.href = "javascript:alert(" + JSON.stringify("Can't save: " + e.toString()) + ")"; else throw e; } } link.addEventListener("mouseover", update); link.addEventListener("focus", update); return link; };

, , , , .

, URL , . .

. URL , , (. 17), , , .

( ). , .

, , , , «». , URL , «» . , .

try/catch update . «», toDataURL , SecurityError. URL javascript:. , , , .


URL. , URL .

function loadImageURL(cx, url) { var image = document.createElement("img"); image.addEventListener("load", function() { var color = cx.fillStyle, size = cx.lineWidth; cx.canvas.width = image.width; cx.canvas.height = image.height; cx.drawImage(image, 0, 0); cx.fillStyle = color; cx.strokeStyle = color; cx.lineWidth = size; }); image.src = url; }

, . - (fillStyle lineWidth), .

FileReader 18. readAsText readAsDataURL – , . , , URL , loadImageURL .

controls.openFile = function(cx) { var input = elt("input", {type: "file"}); input.addEventListener("change", function() { if (input.files.length == 0) return; var reader = new FileReader(); reader.addEventListener("load", function() { loadImageURL(cx, reader.result); }); reader.readAsDataURL(input.files[0]); }); return elt("div", null, "Open file: ", input); };

URL . , URL, “change”. , – Enter, load.

controls.openURL = function(cx) { var input = elt("input", {type: "text"}); var form = elt("form", null, "Open URL: ", input, elt("button", {type: "submit"}, "load")); form.addEventListener("submit", function(event) { event.preventDefault(); loadImageURL(cx, form.querySelector("input").value); }); return form; };

, , .


, , .

tools.Text = function(event, cx) { var text = prompt("Text:", ""); if (text) { var pos = relativePos(event, cx.canvas); cx.font = Math.max(7, cx.lineWidth) + "px sans-serif"; cx.fillText(text, pos.x, pos.y); } };

, sans-serif , . – 7 , .

- – “”. , , .

tools.Spray = function(event, cx) { var radius = cx.lineWidth / 2; var area = radius * radius * Math.PI; var dotsPerTick = Math.ceil(area / 30); var currentPos = relativePos(event, cx.canvas); var spray = setInterval(function() { for (var i = 0; i < dotsPerTick; i++) { var offset = randomPointInRadius(radius); cx.fillRect(currentPos.x + offset.x, currentPos.y + offset.y, 1, 1); } }, 25); trackDrag(function(event) { currentPos = relativePos(event, cx.canvas); }, function() { clearInterval(spray); }); };

setInterval 25 , . trackDrag , currentPos , .

, , 30. randomPointInRadius.

function randomPointInRadius(radius) { for (;;) { var x = Math.random() * 2 - 1; var y = Math.random() * 2 - 1; if (x * x + y * y <= 1) return {x: x * radius, y: y * radius}; } }

(-1,-1) (1,1). , , 1. , , .

. , Math.sin Math.cos . . , , .

. .

<link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>


. .


Rectangle, (. fillRect 16) . , , , . , .

, , . , , ?

, position: absolute, 13. , . pageX pageY , left, top, width height.

<script> tools.Rectangle = function(event, cx) { // }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>


– , , . .

. toDataURL , URL . getImageData, width, height data. data 0 255, - red, green, blue alpha ().

, , ( – ), , .

function pixelAt(cx, x, y) { var data = cx.getImageData(x, y, 1, 1); console.log(data.data); } var canvas = document.createElement("canvas"); var cx = canvas.getContext("2d"); pixelAt(cx, 10, 10); // → [0, 0, 0, 0] cx.fillStyle = "red"; cx.fillRect(10, 10, 1, 1); pixelAt(cx, 10, 10); // → [255, 0, 0, 255]

getImageData x y, , .

, . color . , fillStyle strokeStyle , .

, , CSS, rgb(R, G, B), 15.

getImageData , toDataURL – , , . try/catch alert.

<script> tools["Pick color"] = function(event, cx) { // Your code here. }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>


, , . , , , - .

, . , , , ( ), , .

, , :



, , , .

getImageData . , , . 7, , . (x,y) (x + y × width) × 4

(), () .

, , , . . - , 9. , , , , .

. , . , , .

fillRect, - , , .

<script> tools["Flood fill"] = function(event, cx) { // }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>

, . , , . , , ..

"mousedown" , , . , , "mousemove", , .

. fillStyle, strokeStyle, lineWidth .

. file, . URL .

. save . , . , .

DOM
30 DOM. - .

DOM HTML. HTML – DOM , - . querySelector , DOM .

DOM JavaScript, . DOM JavaScript. 13, DOM . , .

– elt 13. , , , , .

function elt(name, attributes) { var node = document.createElement(name); if (attributes) { for (var attr in attributes) if (attributes.hasOwnProperty(attr)) node.setAttribute(attr, attributes[attr]); } for (var i = 2; i < arguments.length; i++) { var child = arguments[i]; if (typeof child == "string") child = document.createTextNode(child); node.appendChild(child); } return node; }

, .


– createPaint, DOM, . , controls, .

var controls = Object.create(null); function createPaint(parent) { var canvas = elt("canvas", {width: 500, height: 300}); var cx = canvas.getContext("2d"); var toolbar = elt("div", {class: "toolbar"}); for (var name in controls) toolbar.appendChild(controls[name](cx)); var panel = elt("div", {class: "picturepanel"}, canvas); parent.appendChild(elt("div", null, panel, toolbar)); }

, – . – , ( fillStyle) ( lineWidth).

, , .


, – , . controls, , , . , .

var tools = Object.create(null); controls.tool = function(cx) { var select = elt("select"); for (var name in tools) select.appendChild(elt("option", null, name)); cx.canvas.addEventListener("mousedown", function(event) { if (event.which == 1) { tools[select.value](event, cx); event.preventDefault(); } }); return elt("span", null, "Tool: ", select); };

tool , "mousedown" , event context. preventDefault, .

– , . , . 13 getBoundingClientRect . , , . clientX clientY , .

function relativePos(event, element) { var rect = element.getBoundingClientRect(); return {x: Math.floor(event.clientX - rect.left), y: Math.floor(event.clientY - rect.top)}; }

"mousemove", . trackDrag .

function trackDrag(onMove, onEnd) { function end(event) { removeEventListener("mousemove", onMove); removeEventListener("mouseup", end); if (onEnd) onEnd(event); } addEventListener("mousemove", onMove); addEventListener("mouseup", end); }

. – , "mousemove", – , . .

.

tools.Line = function(event, cx, onEnd) { cx.lineCap = "round"; var pos = relativePos(event, cx.canvas); trackDrag(function(event) { cx.beginPath(); cx.moveTo(pos.x, pos.y); pos = relativePos(event, cx.canvas); cx.lineTo(pos.x, pos.y); cx.stroke(); }, onEnd); };

lineCap “round”, - , , . , . , , lineCap .

, "mousemove", , , , strokeStyle lineWidth, .

onEnd , trackDrag. , undefined, . , erase, .

tools.Erase = function(event, cx) { cx.globalCompositeOperation = "destination-out"; tools.Line(event, cx, function() { cx.globalCompositeOperation = "source-over"; }); };

globalCompositeOperation , . , "source-over", , , , . , , , .

“erase” globalCompositeOperation "destination-out", , .

. ( strokeStyle lineWidth ), . , , .


, , .

18 . . , . - . - "date", "email", "url" "number". . – “text”, , , . , , , , .

controls.color = function(cx) { var input = elt("input", {type: "color"}); input.addEventListener("change", function() { cx.fillStyle = input.value; cx.strokeStyle = input.value; }); return elt("span", null, "Color: ", input); };

color fillStyle strokeStyle .

.

controls.brushSize = function(cx) { var select = elt("select"); var sizes = [1, 2, 3, 5, 8, 12, 25, 35, 50, 75, 100]; sizes.forEach(function(size) { select.appendChild(elt("option", {value: size}, size + " pixels")); }); select.addEventListener("change", function() { cx.lineWidth = select.value; }); return elt("span", null, "Brush size: ", select); };

, , lineWidth .


, , URL . http: https:, URL , . URL , HTML :

data:text/html,<h1 style="color:red">Hello!</h1>

URL , , , . , , - .

toDataURL, URL , . . URL . , href , .

controls.save = function(cx) { var link = elt("a", {href: "/"}, "Save"); function update() { try { link.href = cx.canvas.toDataURL(); } catch (e) { if (e instanceof SecurityError) link.href = "javascript:alert(" + JSON.stringify("Can't save: " + e.toString()) + ")"; else throw e; } } link.addEventListener("mouseover", update); link.addEventListener("focus", update); return link; };

, , , , .

, URL , . .

. URL , , (. 17), , , .

( ). , .

, , , , «». , URL , «» . , .

try/catch update . «», toDataURL , SecurityError. URL javascript:. , , , .


URL. , URL .

function loadImageURL(cx, url) { var image = document.createElement("img"); image.addEventListener("load", function() { var color = cx.fillStyle, size = cx.lineWidth; cx.canvas.width = image.width; cx.canvas.height = image.height; cx.drawImage(image, 0, 0); cx.fillStyle = color; cx.strokeStyle = color; cx.lineWidth = size; }); image.src = url; }

, . - (fillStyle lineWidth), .

FileReader 18. readAsText readAsDataURL – , . , , URL , loadImageURL .

controls.openFile = function(cx) { var input = elt("input", {type: "file"}); input.addEventListener("change", function() { if (input.files.length == 0) return; var reader = new FileReader(); reader.addEventListener("load", function() { loadImageURL(cx, reader.result); }); reader.readAsDataURL(input.files[0]); }); return elt("div", null, "Open file: ", input); };

URL . , URL, “change”. , – Enter, load.

controls.openURL = function(cx) { var input = elt("input", {type: "text"}); var form = elt("form", null, "Open URL: ", input, elt("button", {type: "submit"}, "load")); form.addEventListener("submit", function(event) { event.preventDefault(); loadImageURL(cx, form.querySelector("input").value); }); return form; };

, , .


, , .

tools.Text = function(event, cx) { var text = prompt("Text:", ""); if (text) { var pos = relativePos(event, cx.canvas); cx.font = Math.max(7, cx.lineWidth) + "px sans-serif"; cx.fillText(text, pos.x, pos.y); } };

, sans-serif , . – 7 , .

- – “”. , , .

tools.Spray = function(event, cx) { var radius = cx.lineWidth / 2; var area = radius * radius * Math.PI; var dotsPerTick = Math.ceil(area / 30); var currentPos = relativePos(event, cx.canvas); var spray = setInterval(function() { for (var i = 0; i < dotsPerTick; i++) { var offset = randomPointInRadius(radius); cx.fillRect(currentPos.x + offset.x, currentPos.y + offset.y, 1, 1); } }, 25); trackDrag(function(event) { currentPos = relativePos(event, cx.canvas); }, function() { clearInterval(spray); }); };

setInterval 25 , . trackDrag , currentPos , .

, , 30. randomPointInRadius.

function randomPointInRadius(radius) { for (;;) { var x = Math.random() * 2 - 1; var y = Math.random() * 2 - 1; if (x * x + y * y <= 1) return {x: x * radius, y: y * radius}; } }

(-1,-1) (1,1). , , 1. , , .

. , Math.sin Math.cos . . , , .

. .

<link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>


. .


Rectangle, (. fillRect 16) . , , , . , .

, , . , , ?

, position: absolute, 13. , . pageX pageY , left, top, width height.

<script> tools.Rectangle = function(event, cx) { // }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>


– , , . .

. toDataURL , URL . getImageData, width, height data. data 0 255, - red, green, blue alpha ().

, , ( – ), , .

function pixelAt(cx, x, y) { var data = cx.getImageData(x, y, 1, 1); console.log(data.data); } var canvas = document.createElement("canvas"); var cx = canvas.getContext("2d"); pixelAt(cx, 10, 10); // → [0, 0, 0, 0] cx.fillStyle = "red"; cx.fillRect(10, 10, 1, 1); pixelAt(cx, 10, 10); // → [255, 0, 0, 255]

getImageData x y, , .

, . color . , fillStyle strokeStyle , .

, , CSS, rgb(R, G, B), 15.

getImageData , toDataURL – , , . try/catch alert.

<script> tools["Pick color"] = function(event, cx) { // Your code here. }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>


, , . , , , - .

, . , , , ( ), , .

, , :



, , , .

getImageData . , , . 7, , . (x,y) (x + y × width) × 4

(), () .

, , , . . - , 9. , , , , .

. , . , , .

fillRect, - , , .

<script> tools["Flood fill"] = function(event, cx) { // }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>

, . , , . , , ..

"mousedown" , , . , , "mousemove", , .

. fillStyle, strokeStyle, lineWidth .

. file, . URL .

. save . , . , .

DOM
30 DOM. - .

DOM HTML. HTML – DOM , - . querySelector , DOM .

DOM JavaScript, . DOM JavaScript. 13, DOM . , .

– elt 13. , , , , .

function elt(name, attributes) { var node = document.createElement(name); if (attributes) { for (var attr in attributes) if (attributes.hasOwnProperty(attr)) node.setAttribute(attr, attributes[attr]); } for (var i = 2; i < arguments.length; i++) { var child = arguments[i]; if (typeof child == "string") child = document.createTextNode(child); node.appendChild(child); } return node; }

, .


– createPaint, DOM, . , controls, .

var controls = Object.create(null); function createPaint(parent) { var canvas = elt("canvas", {width: 500, height: 300}); var cx = canvas.getContext("2d"); var toolbar = elt("div", {class: "toolbar"}); for (var name in controls) toolbar.appendChild(controls[name](cx)); var panel = elt("div", {class: "picturepanel"}, canvas); parent.appendChild(elt("div", null, panel, toolbar)); }

, – . – , ( fillStyle) ( lineWidth).

, , .


, – , . controls, , , . , .

var tools = Object.create(null); controls.tool = function(cx) { var select = elt("select"); for (var name in tools) select.appendChild(elt("option", null, name)); cx.canvas.addEventListener("mousedown", function(event) { if (event.which == 1) { tools[select.value](event, cx); event.preventDefault(); } }); return elt("span", null, "Tool: ", select); };

tool , "mousedown" , event context. preventDefault, .

– , . , . 13 getBoundingClientRect . , , . clientX clientY , .

function relativePos(event, element) { var rect = element.getBoundingClientRect(); return {x: Math.floor(event.clientX - rect.left), y: Math.floor(event.clientY - rect.top)}; }

"mousemove", . trackDrag .

function trackDrag(onMove, onEnd) { function end(event) { removeEventListener("mousemove", onMove); removeEventListener("mouseup", end); if (onEnd) onEnd(event); } addEventListener("mousemove", onMove); addEventListener("mouseup", end); }

. – , "mousemove", – , . .

.

tools.Line = function(event, cx, onEnd) { cx.lineCap = "round"; var pos = relativePos(event, cx.canvas); trackDrag(function(event) { cx.beginPath(); cx.moveTo(pos.x, pos.y); pos = relativePos(event, cx.canvas); cx.lineTo(pos.x, pos.y); cx.stroke(); }, onEnd); };

lineCap “round”, - , , . , . , , lineCap .

, "mousemove", , , , strokeStyle lineWidth, .

onEnd , trackDrag. , undefined, . , erase, .

tools.Erase = function(event, cx) { cx.globalCompositeOperation = "destination-out"; tools.Line(event, cx, function() { cx.globalCompositeOperation = "source-over"; }); };

globalCompositeOperation , . , "source-over", , , , . , , , .

“erase” globalCompositeOperation "destination-out", , .

. ( strokeStyle lineWidth ), . , , .


, , .

18 . . , . - . - "date", "email", "url" "number". . – “text”, , , . , , , , .

controls.color = function(cx) { var input = elt("input", {type: "color"}); input.addEventListener("change", function() { cx.fillStyle = input.value; cx.strokeStyle = input.value; }); return elt("span", null, "Color: ", input); };

color fillStyle strokeStyle .

.

controls.brushSize = function(cx) { var select = elt("select"); var sizes = [1, 2, 3, 5, 8, 12, 25, 35, 50, 75, 100]; sizes.forEach(function(size) { select.appendChild(elt("option", {value: size}, size + " pixels")); }); select.addEventListener("change", function() { cx.lineWidth = select.value; }); return elt("span", null, "Brush size: ", select); };

, , lineWidth .


, , URL . http: https:, URL , . URL , HTML :

data:text/html,<h1 style="color:red">Hello!</h1>

URL , , , . , , - .

toDataURL, URL , . . URL . , href , .

controls.save = function(cx) { var link = elt("a", {href: "/"}, "Save"); function update() { try { link.href = cx.canvas.toDataURL(); } catch (e) { if (e instanceof SecurityError) link.href = "javascript:alert(" + JSON.stringify("Can't save: " + e.toString()) + ")"; else throw e; } } link.addEventListener("mouseover", update); link.addEventListener("focus", update); return link; };

, , , , .

, URL , . .

. URL , , (. 17), , , .

( ). , .

, , , , «». , URL , «» . , .

try/catch update . «», toDataURL , SecurityError. URL javascript:. , , , .


URL. , URL .

function loadImageURL(cx, url) { var image = document.createElement("img"); image.addEventListener("load", function() { var color = cx.fillStyle, size = cx.lineWidth; cx.canvas.width = image.width; cx.canvas.height = image.height; cx.drawImage(image, 0, 0); cx.fillStyle = color; cx.strokeStyle = color; cx.lineWidth = size; }); image.src = url; }

, . - (fillStyle lineWidth), .

FileReader 18. readAsText readAsDataURL – , . , , URL , loadImageURL .

controls.openFile = function(cx) { var input = elt("input", {type: "file"}); input.addEventListener("change", function() { if (input.files.length == 0) return; var reader = new FileReader(); reader.addEventListener("load", function() { loadImageURL(cx, reader.result); }); reader.readAsDataURL(input.files[0]); }); return elt("div", null, "Open file: ", input); };

URL . , URL, “change”. , – Enter, load.

controls.openURL = function(cx) { var input = elt("input", {type: "text"}); var form = elt("form", null, "Open URL: ", input, elt("button", {type: "submit"}, "load")); form.addEventListener("submit", function(event) { event.preventDefault(); loadImageURL(cx, form.querySelector("input").value); }); return form; };

, , .


, , .

tools.Text = function(event, cx) { var text = prompt("Text:", ""); if (text) { var pos = relativePos(event, cx.canvas); cx.font = Math.max(7, cx.lineWidth) + "px sans-serif"; cx.fillText(text, pos.x, pos.y); } };

, sans-serif , . – 7 , .

- – “”. , , .

tools.Spray = function(event, cx) { var radius = cx.lineWidth / 2; var area = radius * radius * Math.PI; var dotsPerTick = Math.ceil(area / 30); var currentPos = relativePos(event, cx.canvas); var spray = setInterval(function() { for (var i = 0; i < dotsPerTick; i++) { var offset = randomPointInRadius(radius); cx.fillRect(currentPos.x + offset.x, currentPos.y + offset.y, 1, 1); } }, 25); trackDrag(function(event) { currentPos = relativePos(event, cx.canvas); }, function() { clearInterval(spray); }); };

setInterval 25 , . trackDrag , currentPos , .

, , 30. randomPointInRadius.

function randomPointInRadius(radius) { for (;;) { var x = Math.random() * 2 - 1; var y = Math.random() * 2 - 1; if (x * x + y * y <= 1) return {x: x * radius, y: y * radius}; } }

(-1,-1) (1,1). , , 1. , , .

. , Math.sin Math.cos . . , , .

. .

<link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>


. .


Rectangle, (. fillRect 16) . , , , . , .

, , . , , ?

, position: absolute, 13. , . pageX pageY , left, top, width height.

<script> tools.Rectangle = function(event, cx) { // }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>


– , , . .

. toDataURL , URL . getImageData, width, height data. data 0 255, - red, green, blue alpha ().

, , ( – ), , .

function pixelAt(cx, x, y) { var data = cx.getImageData(x, y, 1, 1); console.log(data.data); } var canvas = document.createElement("canvas"); var cx = canvas.getContext("2d"); pixelAt(cx, 10, 10); // → [0, 0, 0, 0] cx.fillStyle = "red"; cx.fillRect(10, 10, 1, 1); pixelAt(cx, 10, 10); // → [255, 0, 0, 255]

getImageData x y, , .

, . color . , fillStyle strokeStyle , .

, , CSS, rgb(R, G, B), 15.

getImageData , toDataURL – , , . try/catch alert.

<script> tools["Pick color"] = function(event, cx) { // Your code here. }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>


, , . , , , - .

, . , , , ( ), , .

, , :



, , , .

getImageData . , , . 7, , . (x,y) (x + y × width) × 4

(), () .

, , , . . - , 9. , , , , .

. , . , , .

fillRect, - , , .

<script> tools["Flood fill"] = function(event, cx) { // }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>

 ,      .    ,     ,      .     ,   ,    .. 
 
      "mousedown"  ,   ,   .  , ,    "mousemove",      ,           . 
 
         .         fillStyle, strokeStyle,  lineWidth     . 
 
       .    file,       .   URL     . 
 
    .  save       .    ,       .   ,   . 
 
  DOM 
       30  DOM.   -  . 
 
      DOM  HTML.     HTML    –   DOM        ,    -   .       querySelector   ,     DOM  . 
 
      DOM      JavaScript,   .       DOM   JavaScript.      13,      DOM  .      ,    . 
 
   –    elt   13.        ,     ,  ,    ,      . 
 
 function elt(name, attributes) { var node = document.createElement(name); if (attributes) { for (var attr in attributes) if (attributes.hasOwnProperty(attr)) node.setAttribute(attr, attributes[attr]); } for (var i = 2; i < arguments.length; i++) { var child = arguments[i]; if (typeof child == "string") child = document.createTextNode(child); node.appendChild(child); } return node; } 
 
       ,       . 
 
  
    –  createPaint,      DOM,     .      ,    controls,           . 
 
 var controls = Object.create(null); function createPaint(parent) { var canvas = elt("canvas", {width: 500, height: 300}); var cx = canvas.getContext("2d"); var toolbar = elt("div", {class: "toolbar"}); for (var name in controls) toolbar.appendChild(controls[name](cx)); var panel = elt("div", {class: "picturepanel"}, canvas); parent.appendChild(elt("div", null, panel, toolbar)); } 
 
           ,    –   .        –    ,   (  fillStyle)    (  lineWidth). 
 
          ,      ,     . 
 
   
   ,    –  ,    .      controls,        ,           ,       .       ,          . 
 
 var tools = Object.create(null); controls.tool = function(cx) { var select = elt("select"); for (var name in tools) select.appendChild(elt("option", null, name)); cx.canvas.addEventListener("mousedown", function(event) { if (event.which == 1) { tools[select.value](event, cx); event.preventDefault(); } }); return elt("span", null, "Tool: ", select); }; 
 
   tool        ,    "mousedown"          ,    event  context.    preventDefault,          . 
 
    – ,     .   ,           .    13   getBoundingClientRect     .  ,   ,     .    clientX  clientY      ,                . 
 
 function relativePos(event, element) { var rect = element.getBoundingClientRect(); return {x: Math.floor(event.clientX - rect.left), y: Math.floor(event.clientY - rect.top)}; } 
 
       "mousemove",    .  trackDrag       . 
 
 function trackDrag(onMove, onEnd) { function end(event) { removeEventListener("mousemove", onMove); removeEventListener("mouseup", end); if (onEnd) onEnd(event); } addEventListener("mousemove", onMove); addEventListener("mouseup", end); } 
 
    .  – ,      "mousemove",   – ,     .      . 
 
           . 
 
 tools.Line = function(event, cx, onEnd) { cx.lineCap = "round"; var pos = relativePos(event, cx.canvas); trackDrag(function(event) { cx.beginPath(); cx.moveTo(pos.x, pos.y); pos = relativePos(event, cx.canvas); cx.lineTo(pos.x, pos.y); cx.stroke(); }, onEnd); }; 
 
      lineCap  “round”, -      ,   ,     .     ,      .     ,      ,     lineCap  . 
 
 ,    "mousemove",  ,   ,         ,      strokeStyle  lineWidth,     . 
 
  onEnd   ,  trackDrag.        ,        undefined,       .        ,  erase,      . 
 
 tools.Erase = function(event, cx) { cx.globalCompositeOperation = "destination-out"; tools.Line(event, cx, function() { cx.globalCompositeOperation = "source-over"; }); }; 
 
  globalCompositeOperation   ,        .  ,   "source-over",  ,  ,  ,   .   ,    ,     ,   . 
 
  “erase”  globalCompositeOperation  "destination-out",    ,     . 
 
         .          (     strokeStyle  lineWidth  ),   . ,   ,  . 
 
     
 ,              ,      . 
 
   18      .        .          ,            .    - .   - "date", "email", "url"  "number".      .      – “text”,     ,     ,       . ,   ,       ,       ,       . 
 
 controls.color = function(cx) { var input = elt("input", {type: "color"}); input.addEventListener("change", function() { cx.fillStyle = input.value; cx.strokeStyle = input.value; }); return elt("span", null, "Color: ", input); }; 
 
     color     fillStyle  strokeStyle    . 
 
      . 
 
 controls.brushSize = function(cx) { var select = elt("select"); var sizes = [1, 2, 3, 5, 8, 12, 25, 35, 50, 75, 100]; sizes.forEach(function(size) { select.appendChild(elt("option", {value: size}, size + " pixels")); }); select.addEventListener("change", function() { cx.lineWidth = select.value; }); return elt("span", null, "Brush size: ", select); }; 
 
       ,    ,    lineWidth    . 
 
  
  ,     ,      URL  .     http:  https:, URL      ,      .  URL  ,   HTML : 
 
 data:text/html,<h1 style="color:red">Hello!</h1> 
 
  URL    , , ,       .           ,  ,      - . 
 
       toDataURL,   URL  ,        .            .        URL   .       ,      href  ,            . 
 
 controls.save = function(cx) { var link = elt("a", {href: "/"}, "Save"); function update() { try { link.href = cx.canvas.toDataURL(); } catch (e) { if (e instanceof SecurityError) link.href = "javascript:alert(" + JSON.stringify("Can't save: " + e.toString()) + ")"; else throw e; } } link.addEventListener("mouseover", update); link.addEventListener("focus", update); return link; }; 
 
  ,          ,       ,      ,     . 
 
     ,      URL  ,    .       . 
 
           .     URL   ,      ,       (.  17),    ,    ,    . 
 
        (   ).        ,      . 
 
     ,  ,  ,    ,     «».  ,  URL  ,     «» .    ,     . 
 
     try/catch   update   .   «»,  toDataURL  ,   SecurityError.           URL   javascript:.     ,   ,     ,   . 
 
   
              URL.    ,      URL     . 
 
 function loadImageURL(cx, url) { var image = document.createElement("img"); image.addEventListener("load", function() { var color = cx.fillStyle, size = cx.lineWidth; cx.canvas.width = image.width; cx.canvas.height = image.height; cx.drawImage(image, 0, 0); cx.fillStyle = color; cx.strokeStyle = color; cx.lineWidth = size; }); image.src = url; } 
 
     ,    . -          (fillStyle  lineWidth),              . 
 
         FileReader   18.     readAsText        readAsDataURL –   ,   .   ,   ,  URL  ,     loadImageURL    . 
 
 controls.openFile = function(cx) { var input = elt("input", {type: "file"}); input.addEventListener("change", function() { if (input.files.length == 0) return; var reader = new FileReader(); reader.addEventListener("load", function() { loadImageURL(cx, reader.result); }); reader.readAsDataURL(input.files[0]); }); return elt("div", null, "Open file: ", input); }; 
 
    URL  .       ,       URL,        “change”.         ,     –    Enter,     load. 
 
 controls.openURL = function(cx) { var input = elt("input", {type: "text"}); var form = elt("form", null, "Open URL: ", input, elt("button", {type: "submit"}, "load")); form.addEventListener("submit", function(event) { event.preventDefault(); loadImageURL(cx, form.querySelector("input").value); }); return form; }; 
 
      ,   ,      . 
 
  
        ,    ,     . 
 
 tools.Text = function(event, cx) { var text = prompt("Text:", ""); if (text) { var pos = relativePos(event, cx.canvas); cx.font = Math.max(7, cx.lineWidth) + "px sans-serif"; cx.fillText(text, pos.x, pos.y); } }; 
 
          ,        sans-serif   ,    .   – 7 ,      . 
 
      - – “”.      ,    ,            . 
 
 tools.Spray = function(event, cx) { var radius = cx.lineWidth / 2; var area = radius * radius * Math.PI; var dotsPerTick = Math.ceil(area / 30); var currentPos = relativePos(event, cx.canvas); var spray = setInterval(function() { for (var i = 0; i < dotsPerTick; i++) { var offset = randomPointInRadius(radius); cx.fillRect(currentPos.x + offset.x, currentPos.y + offset.y, 1, 1); } }, 25); trackDrag(function(event) { currentPos = relativePos(event, cx.canvas); }, function() { clearInterval(spray); }); }; 
 
   setInterval      25 ,    .  trackDrag   ,  currentPos     ,       . 
 
  ,         ,           30.         randomPointInRadius. 
 
 function randomPointInRadius(radius) { for (;;) { var x = Math.random() * 2 - 1; var y = Math.random() * 2 - 1; if (x * x + y * y <= 1) return {x: x * radius, y: y * radius}; } } 
 
        (-1,-1)  (1,1).   ,  ,         1.    ,    ,   . 
 
      .       ,        Math.sin  Math.cos   .            .    ,    ,   . 
 
      .    . 
 
 <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body> 
 
  
        .    . 
 
  
   Rectangle,   (.  fillRect   16)  .      ,     ,    ,    . ,         . 
 
   ,  ,        .           ,       ,    ? 
 
   ,    position: absolute,      13.   ,      .  pageX  pageY          ,      left, top, width  height. 
 
 <script> tools.Rectangle = function(event, cx) { //   }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body> 
 
   
      –  ,        ,    .   . 
 
        .  toDataURL    ,       URL   .       getImageData,          width, height  data.   data     0  255,        - red, green, blue  alpha (). 
 
        ,  ,    (  –  ),   ,      . 
 
 function pixelAt(cx, x, y) { var data = cx.getImageData(x, y, 1, 1); console.log(data.data); } var canvas = document.createElement("canvas"); var cx = canvas.getContext("2d"); pixelAt(cx, 10, 10); // → [0, 0, 0, 0] cx.fillStyle = "red"; cx.fillRect(10, 10, 1, 1); pixelAt(cx, 10, 10); // → [255, 0, 0, 255] 
 
  getImageData     x  y,    ,      . 
 
     ,         .        color   .  ,  fillStyle  strokeStyle    ,   . 
 
 ,      ,   CSS,    rgb(R, G, B),      15. 
 
  getImageData    ,   toDataURL –   ,      ,    .   try/catch        alert. 
 
 <script> tools["Pick color"] = function(event, cx) { // Your code here. }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body> 
 
  
    ,  ,        . ,           ,   ,     -   . 
 
              ,    .       ,      ,      ,         (   ),    ,     . 
 
     , ,       : 
 
  
 
          ,   ,      ,   . 
 
    getImageData    .  ,       ,          .           7,  ,      .       (x,y)    (x + y × width) × 4 
 
      (),          () . 
 
            , ,   ,       .         .      -      ,    9.        ,    ,       ,    ,    . 
 
      .      ,       .  ,  ,    . 
 
       fillRect,   -  ,  ,     . 
 
 <script> tools["Flood fill"] = function(event, cx) { //   }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body> 

, . , , . , , ..

"mousedown" , , . , , "mousemove", , .

. fillStyle, strokeStyle, lineWidth .

. file, . URL .

. save . , . , .

DOM
30 DOM. - .

DOM HTML. HTML – DOM , - . querySelector , DOM .

DOM JavaScript, . DOM JavaScript. 13, DOM . , .

– elt 13. , , , , .

function elt(name, attributes) { var node = document.createElement(name); if (attributes) { for (var attr in attributes) if (attributes.hasOwnProperty(attr)) node.setAttribute(attr, attributes[attr]); } for (var i = 2; i < arguments.length; i++) { var child = arguments[i]; if (typeof child == "string") child = document.createTextNode(child); node.appendChild(child); } return node; }

, .


– createPaint, DOM, . , controls, .

var controls = Object.create(null); function createPaint(parent) { var canvas = elt("canvas", {width: 500, height: 300}); var cx = canvas.getContext("2d"); var toolbar = elt("div", {class: "toolbar"}); for (var name in controls) toolbar.appendChild(controls[name](cx)); var panel = elt("div", {class: "picturepanel"}, canvas); parent.appendChild(elt("div", null, panel, toolbar)); }

, – . – , ( fillStyle) ( lineWidth).

, , .


, – , . controls, , , . , .

var tools = Object.create(null); controls.tool = function(cx) { var select = elt("select"); for (var name in tools) select.appendChild(elt("option", null, name)); cx.canvas.addEventListener("mousedown", function(event) { if (event.which == 1) { tools[select.value](event, cx); event.preventDefault(); } }); return elt("span", null, "Tool: ", select); };

tool , "mousedown" , event context. preventDefault, .

– , . , . 13 getBoundingClientRect . , , . clientX clientY , .

function relativePos(event, element) { var rect = element.getBoundingClientRect(); return {x: Math.floor(event.clientX - rect.left), y: Math.floor(event.clientY - rect.top)}; }

"mousemove", . trackDrag .

function trackDrag(onMove, onEnd) { function end(event) { removeEventListener("mousemove", onMove); removeEventListener("mouseup", end); if (onEnd) onEnd(event); } addEventListener("mousemove", onMove); addEventListener("mouseup", end); }

. – , "mousemove", – , . .

.

tools.Line = function(event, cx, onEnd) { cx.lineCap = "round"; var pos = relativePos(event, cx.canvas); trackDrag(function(event) { cx.beginPath(); cx.moveTo(pos.x, pos.y); pos = relativePos(event, cx.canvas); cx.lineTo(pos.x, pos.y); cx.stroke(); }, onEnd); };

lineCap “round”, - , , . , . , , lineCap .

, "mousemove", , , , strokeStyle lineWidth, .

onEnd , trackDrag. , undefined, . , erase, .

tools.Erase = function(event, cx) { cx.globalCompositeOperation = "destination-out"; tools.Line(event, cx, function() { cx.globalCompositeOperation = "source-over"; }); };

globalCompositeOperation , . , "source-over", , , , . , , , .

“erase” globalCompositeOperation "destination-out", , .

. ( strokeStyle lineWidth ), . , , .


, , .

18 . . , . - . - "date", "email", "url" "number". . – “text”, , , . , , , , .

controls.color = function(cx) { var input = elt("input", {type: "color"}); input.addEventListener("change", function() { cx.fillStyle = input.value; cx.strokeStyle = input.value; }); return elt("span", null, "Color: ", input); };

color fillStyle strokeStyle .

.

controls.brushSize = function(cx) { var select = elt("select"); var sizes = [1, 2, 3, 5, 8, 12, 25, 35, 50, 75, 100]; sizes.forEach(function(size) { select.appendChild(elt("option", {value: size}, size + " pixels")); }); select.addEventListener("change", function() { cx.lineWidth = select.value; }); return elt("span", null, "Brush size: ", select); };

, , lineWidth .


, , URL . http: https:, URL , . URL , HTML :

data:text/html,<h1 style="color:red">Hello!</h1>

URL , , , . , , - .

toDataURL, URL , . . URL . , href , .

controls.save = function(cx) { var link = elt("a", {href: "/"}, "Save"); function update() { try { link.href = cx.canvas.toDataURL(); } catch (e) { if (e instanceof SecurityError) link.href = "javascript:alert(" + JSON.stringify("Can't save: " + e.toString()) + ")"; else throw e; } } link.addEventListener("mouseover", update); link.addEventListener("focus", update); return link; };

, , , , .

, URL , . .

. URL , , (. 17), , , .

( ). , .

, , , , «». , URL , «» . , .

try/catch update . «», toDataURL , SecurityError. URL javascript:. , , , .


URL. , URL .

function loadImageURL(cx, url) { var image = document.createElement("img"); image.addEventListener("load", function() { var color = cx.fillStyle, size = cx.lineWidth; cx.canvas.width = image.width; cx.canvas.height = image.height; cx.drawImage(image, 0, 0); cx.fillStyle = color; cx.strokeStyle = color; cx.lineWidth = size; }); image.src = url; }

, . - (fillStyle lineWidth), .

FileReader 18. readAsText readAsDataURL – , . , , URL , loadImageURL .

controls.openFile = function(cx) { var input = elt("input", {type: "file"}); input.addEventListener("change", function() { if (input.files.length == 0) return; var reader = new FileReader(); reader.addEventListener("load", function() { loadImageURL(cx, reader.result); }); reader.readAsDataURL(input.files[0]); }); return elt("div", null, "Open file: ", input); };

URL . , URL, “change”. , – Enter, load.

controls.openURL = function(cx) { var input = elt("input", {type: "text"}); var form = elt("form", null, "Open URL: ", input, elt("button", {type: "submit"}, "load")); form.addEventListener("submit", function(event) { event.preventDefault(); loadImageURL(cx, form.querySelector("input").value); }); return form; };

, , .


, , .

tools.Text = function(event, cx) { var text = prompt("Text:", ""); if (text) { var pos = relativePos(event, cx.canvas); cx.font = Math.max(7, cx.lineWidth) + "px sans-serif"; cx.fillText(text, pos.x, pos.y); } };

, sans-serif , . – 7 , .

- – “”. , , .

tools.Spray = function(event, cx) { var radius = cx.lineWidth / 2; var area = radius * radius * Math.PI; var dotsPerTick = Math.ceil(area / 30); var currentPos = relativePos(event, cx.canvas); var spray = setInterval(function() { for (var i = 0; i < dotsPerTick; i++) { var offset = randomPointInRadius(radius); cx.fillRect(currentPos.x + offset.x, currentPos.y + offset.y, 1, 1); } }, 25); trackDrag(function(event) { currentPos = relativePos(event, cx.canvas); }, function() { clearInterval(spray); }); };

setInterval 25 , . trackDrag , currentPos , .

, , 30. randomPointInRadius.

function randomPointInRadius(radius) { for (;;) { var x = Math.random() * 2 - 1; var y = Math.random() * 2 - 1; if (x * x + y * y <= 1) return {x: x * radius, y: y * radius}; } }

(-1,-1) (1,1). , , 1. , , .

. , Math.sin Math.cos . . , , .

. .

<link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>


. .


Rectangle, (. fillRect 16) . , , , . , .

, , . , , ?

, position: absolute, 13. , . pageX pageY , left, top, width height.

<script> tools.Rectangle = function(event, cx) { // }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>


– , , . .

. toDataURL , URL . getImageData, width, height data. data 0 255, - red, green, blue alpha ().

, , ( – ), , .

function pixelAt(cx, x, y) { var data = cx.getImageData(x, y, 1, 1); console.log(data.data); } var canvas = document.createElement("canvas"); var cx = canvas.getContext("2d"); pixelAt(cx, 10, 10); // → [0, 0, 0, 0] cx.fillStyle = "red"; cx.fillRect(10, 10, 1, 1); pixelAt(cx, 10, 10); // → [255, 0, 0, 255]

getImageData x y, , .

, . color . , fillStyle strokeStyle , .

, , CSS, rgb(R, G, B), 15.

getImageData , toDataURL – , , . try/catch alert.

<script> tools["Pick color"] = function(event, cx) { // Your code here. }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>


, , . , , , - .

, . , , , ( ), , .

, , :



, , , .

getImageData . , , . 7, , . (x,y) (x + y × width) × 4

(), () .

, , , . . - , 9. , , , , .

. , . , , .

fillRect, - , , .

<script> tools["Flood fill"] = function(event, cx) { // }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>

 ,      .    ,     ,      .     ,   ,    .. 
 
      "mousedown"  ,   ,   .  , ,    "mousemove",      ,           . 
 
         .         fillStyle, strokeStyle,  lineWidth     . 
 
       .    file,       .   URL     . 
 
    .  save       .    ,       .   ,   . 
 
  DOM 
       30  DOM.   -  . 
 
      DOM  HTML.     HTML    –   DOM        ,    -   .       querySelector   ,     DOM  . 
 
      DOM      JavaScript,   .       DOM   JavaScript.      13,      DOM  .      ,    . 
 
   –    elt   13.        ,     ,  ,    ,      . 
 
 function elt(name, attributes) { var node = document.createElement(name); if (attributes) { for (var attr in attributes) if (attributes.hasOwnProperty(attr)) node.setAttribute(attr, attributes[attr]); } for (var i = 2; i < arguments.length; i++) { var child = arguments[i]; if (typeof child == "string") child = document.createTextNode(child); node.appendChild(child); } return node; } 
 
       ,       . 
 
  
    –  createPaint,      DOM,     .      ,    controls,           . 
 
 var controls = Object.create(null); function createPaint(parent) { var canvas = elt("canvas", {width: 500, height: 300}); var cx = canvas.getContext("2d"); var toolbar = elt("div", {class: "toolbar"}); for (var name in controls) toolbar.appendChild(controls[name](cx)); var panel = elt("div", {class: "picturepanel"}, canvas); parent.appendChild(elt("div", null, panel, toolbar)); } 
 
           ,    –   .        –    ,   (  fillStyle)    (  lineWidth). 
 
          ,      ,     . 
 
   
   ,    –  ,    .      controls,        ,           ,       .       ,          . 
 
 var tools = Object.create(null); controls.tool = function(cx) { var select = elt("select"); for (var name in tools) select.appendChild(elt("option", null, name)); cx.canvas.addEventListener("mousedown", function(event) { if (event.which == 1) { tools[select.value](event, cx); event.preventDefault(); } }); return elt("span", null, "Tool: ", select); }; 
 
   tool        ,    "mousedown"          ,    event  context.    preventDefault,          . 
 
    – ,     .   ,           .    13   getBoundingClientRect     .  ,   ,     .    clientX  clientY      ,                . 
 
 function relativePos(event, element) { var rect = element.getBoundingClientRect(); return {x: Math.floor(event.clientX - rect.left), y: Math.floor(event.clientY - rect.top)}; } 
 
       "mousemove",    .  trackDrag       . 
 
 function trackDrag(onMove, onEnd) { function end(event) { removeEventListener("mousemove", onMove); removeEventListener("mouseup", end); if (onEnd) onEnd(event); } addEventListener("mousemove", onMove); addEventListener("mouseup", end); } 
 
    .  – ,      "mousemove",   – ,     .      . 
 
           . 
 
 tools.Line = function(event, cx, onEnd) { cx.lineCap = "round"; var pos = relativePos(event, cx.canvas); trackDrag(function(event) { cx.beginPath(); cx.moveTo(pos.x, pos.y); pos = relativePos(event, cx.canvas); cx.lineTo(pos.x, pos.y); cx.stroke(); }, onEnd); }; 
 
      lineCap  “round”, -      ,   ,     .     ,      .     ,      ,     lineCap  . 
 
 ,    "mousemove",  ,   ,         ,      strokeStyle  lineWidth,     . 
 
  onEnd   ,  trackDrag.        ,        undefined,       .        ,  erase,      . 
 
 tools.Erase = function(event, cx) { cx.globalCompositeOperation = "destination-out"; tools.Line(event, cx, function() { cx.globalCompositeOperation = "source-over"; }); }; 
 
  globalCompositeOperation   ,        .  ,   "source-over",  ,  ,  ,   .   ,    ,     ,   . 
 
  “erase”  globalCompositeOperation  "destination-out",    ,     . 
 
         .          (     strokeStyle  lineWidth  ),   . ,   ,  . 
 
     
 ,              ,      . 
 
   18      .        .          ,            .    - .   - "date", "email", "url"  "number".      .      – “text”,     ,     ,       . ,   ,       ,       ,       . 
 
 controls.color = function(cx) { var input = elt("input", {type: "color"}); input.addEventListener("change", function() { cx.fillStyle = input.value; cx.strokeStyle = input.value; }); return elt("span", null, "Color: ", input); }; 
 
     color     fillStyle  strokeStyle    . 
 
      . 
 
 controls.brushSize = function(cx) { var select = elt("select"); var sizes = [1, 2, 3, 5, 8, 12, 25, 35, 50, 75, 100]; sizes.forEach(function(size) { select.appendChild(elt("option", {value: size}, size + " pixels")); }); select.addEventListener("change", function() { cx.lineWidth = select.value; }); return elt("span", null, "Brush size: ", select); }; 
 
       ,    ,    lineWidth    . 
 
  
  ,     ,      URL  .     http:  https:, URL      ,      .  URL  ,   HTML : 
 
 data:text/html,<h1 style="color:red">Hello!</h1> 
 
  URL    , , ,       .           ,  ,      - . 
 
       toDataURL,   URL  ,        .            .        URL   .       ,      href  ,            . 
 
 controls.save = function(cx) { var link = elt("a", {href: "/"}, "Save"); function update() { try { link.href = cx.canvas.toDataURL(); } catch (e) { if (e instanceof SecurityError) link.href = "javascript:alert(" + JSON.stringify("Can't save: " + e.toString()) + ")"; else throw e; } } link.addEventListener("mouseover", update); link.addEventListener("focus", update); return link; }; 
 
  ,          ,       ,      ,     . 
 
     ,      URL  ,    .       . 
 
           .     URL   ,      ,       (.  17),    ,    ,    . 
 
        (   ).        ,      . 
 
     ,  ,  ,    ,     «».  ,  URL  ,     «» .    ,     . 
 
     try/catch   update   .   «»,  toDataURL  ,   SecurityError.           URL   javascript:.     ,   ,     ,   . 
 
   
              URL.    ,      URL     . 
 
 function loadImageURL(cx, url) { var image = document.createElement("img"); image.addEventListener("load", function() { var color = cx.fillStyle, size = cx.lineWidth; cx.canvas.width = image.width; cx.canvas.height = image.height; cx.drawImage(image, 0, 0); cx.fillStyle = color; cx.strokeStyle = color; cx.lineWidth = size; }); image.src = url; } 
 
     ,    . -          (fillStyle  lineWidth),              . 
 
         FileReader   18.     readAsText        readAsDataURL –   ,   .   ,   ,  URL  ,     loadImageURL    . 
 
 controls.openFile = function(cx) { var input = elt("input", {type: "file"}); input.addEventListener("change", function() { if (input.files.length == 0) return; var reader = new FileReader(); reader.addEventListener("load", function() { loadImageURL(cx, reader.result); }); reader.readAsDataURL(input.files[0]); }); return elt("div", null, "Open file: ", input); }; 
 
    URL  .       ,       URL,        “change”.         ,     –    Enter,     load. 
 
 controls.openURL = function(cx) { var input = elt("input", {type: "text"}); var form = elt("form", null, "Open URL: ", input, elt("button", {type: "submit"}, "load")); form.addEventListener("submit", function(event) { event.preventDefault(); loadImageURL(cx, form.querySelector("input").value); }); return form; }; 
 
      ,   ,      . 
 
  
        ,    ,     . 
 
 tools.Text = function(event, cx) { var text = prompt("Text:", ""); if (text) { var pos = relativePos(event, cx.canvas); cx.font = Math.max(7, cx.lineWidth) + "px sans-serif"; cx.fillText(text, pos.x, pos.y); } }; 
 
          ,        sans-serif   ,    .   – 7 ,      . 
 
      - – “”.      ,    ,            . 
 
 tools.Spray = function(event, cx) { var radius = cx.lineWidth / 2; var area = radius * radius * Math.PI; var dotsPerTick = Math.ceil(area / 30); var currentPos = relativePos(event, cx.canvas); var spray = setInterval(function() { for (var i = 0; i < dotsPerTick; i++) { var offset = randomPointInRadius(radius); cx.fillRect(currentPos.x + offset.x, currentPos.y + offset.y, 1, 1); } }, 25); trackDrag(function(event) { currentPos = relativePos(event, cx.canvas); }, function() { clearInterval(spray); }); }; 
 
   setInterval      25 ,    .  trackDrag   ,  currentPos     ,       . 
 
  ,         ,           30.         randomPointInRadius. 
 
 function randomPointInRadius(radius) { for (;;) { var x = Math.random() * 2 - 1; var y = Math.random() * 2 - 1; if (x * x + y * y <= 1) return {x: x * radius, y: y * radius}; } } 
 
        (-1,-1)  (1,1).   ,  ,         1.    ,    ,   . 
 
      .       ,        Math.sin  Math.cos   .            .    ,    ,   . 
 
      .    . 
 
 <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body> 
 
  
        .    . 
 
  
   Rectangle,   (.  fillRect   16)  .      ,     ,    ,    . ,         . 
 
   ,  ,        .           ,       ,    ? 
 
   ,    position: absolute,      13.   ,      .  pageX  pageY          ,      left, top, width  height. 
 
 <script> tools.Rectangle = function(event, cx) { //   }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body> 
 
   
      –  ,        ,    .   . 
 
        .  toDataURL    ,       URL   .       getImageData,          width, height  data.   data     0  255,        - red, green, blue  alpha (). 
 
        ,  ,    (  –  ),   ,      . 
 
 function pixelAt(cx, x, y) { var data = cx.getImageData(x, y, 1, 1); console.log(data.data); } var canvas = document.createElement("canvas"); var cx = canvas.getContext("2d"); pixelAt(cx, 10, 10); // → [0, 0, 0, 0] cx.fillStyle = "red"; cx.fillRect(10, 10, 1, 1); pixelAt(cx, 10, 10); // → [255, 0, 0, 255] 
 
  getImageData     x  y,    ,      . 
 
     ,         .        color   .  ,  fillStyle  strokeStyle    ,   . 
 
 ,      ,   CSS,    rgb(R, G, B),      15. 
 
  getImageData    ,   toDataURL –   ,      ,    .   try/catch        alert. 
 
 <script> tools["Pick color"] = function(event, cx) { // Your code here. }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body> 
 
  
    ,  ,        . ,           ,   ,     -   . 
 
              ,    .       ,      ,      ,         (   ),    ,     . 
 
     , ,       : 
 
  
 
          ,   ,      ,   . 
 
    getImageData    .  ,       ,          .           7,  ,      .       (x,y)    (x + y × width) × 4 
 
      (),          () . 
 
            , ,   ,       .         .      -      ,    9.        ,    ,       ,    ,    . 
 
      .      ,       .  ,  ,    . 
 
       fillRect,   -  ,  ,     . 
 
 <script> tools["Flood fill"] = function(event, cx) { //   }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body> 

, . , , . , , ..

"mousedown" , , . , , "mousemove", , .

. fillStyle, strokeStyle, lineWidth .

. file, . URL .

. save . , . , .

DOM
30 DOM. - .

DOM HTML. HTML – DOM , - . querySelector , DOM .

DOM JavaScript, . DOM JavaScript. 13, DOM . , .

– elt 13. , , , , .

function elt(name, attributes) { var node = document.createElement(name); if (attributes) { for (var attr in attributes) if (attributes.hasOwnProperty(attr)) node.setAttribute(attr, attributes[attr]); } for (var i = 2; i < arguments.length; i++) { var child = arguments[i]; if (typeof child == "string") child = document.createTextNode(child); node.appendChild(child); } return node; }

, .


– createPaint, DOM, . , controls, .

var controls = Object.create(null); function createPaint(parent) { var canvas = elt("canvas", {width: 500, height: 300}); var cx = canvas.getContext("2d"); var toolbar = elt("div", {class: "toolbar"}); for (var name in controls) toolbar.appendChild(controls[name](cx)); var panel = elt("div", {class: "picturepanel"}, canvas); parent.appendChild(elt("div", null, panel, toolbar)); }

, – . – , ( fillStyle) ( lineWidth).

, , .


, – , . controls, , , . , .

var tools = Object.create(null); controls.tool = function(cx) { var select = elt("select"); for (var name in tools) select.appendChild(elt("option", null, name)); cx.canvas.addEventListener("mousedown", function(event) { if (event.which == 1) { tools[select.value](event, cx); event.preventDefault(); } }); return elt("span", null, "Tool: ", select); };

tool , "mousedown" , event context. preventDefault, .

– , . , . 13 getBoundingClientRect . , , . clientX clientY , .

function relativePos(event, element) { var rect = element.getBoundingClientRect(); return {x: Math.floor(event.clientX - rect.left), y: Math.floor(event.clientY - rect.top)}; }

"mousemove", . trackDrag .

function trackDrag(onMove, onEnd) { function end(event) { removeEventListener("mousemove", onMove); removeEventListener("mouseup", end); if (onEnd) onEnd(event); } addEventListener("mousemove", onMove); addEventListener("mouseup", end); }

. – , "mousemove", – , . .

.

tools.Line = function(event, cx, onEnd) { cx.lineCap = "round"; var pos = relativePos(event, cx.canvas); trackDrag(function(event) { cx.beginPath(); cx.moveTo(pos.x, pos.y); pos = relativePos(event, cx.canvas); cx.lineTo(pos.x, pos.y); cx.stroke(); }, onEnd); };

lineCap “round”, - , , . , . , , lineCap .

, "mousemove", , , , strokeStyle lineWidth, .

onEnd , trackDrag. , undefined, . , erase, .

tools.Erase = function(event, cx) { cx.globalCompositeOperation = "destination-out"; tools.Line(event, cx, function() { cx.globalCompositeOperation = "source-over"; }); };

globalCompositeOperation , . , "source-over", , , , . , , , .

“erase” globalCompositeOperation "destination-out", , .

. ( strokeStyle lineWidth ), . , , .


, , .

18 . . , . - . - "date", "email", "url" "number". . – “text”, , , . , , , , .

controls.color = function(cx) { var input = elt("input", {type: "color"}); input.addEventListener("change", function() { cx.fillStyle = input.value; cx.strokeStyle = input.value; }); return elt("span", null, "Color: ", input); };

color fillStyle strokeStyle .

.

controls.brushSize = function(cx) { var select = elt("select"); var sizes = [1, 2, 3, 5, 8, 12, 25, 35, 50, 75, 100]; sizes.forEach(function(size) { select.appendChild(elt("option", {value: size}, size + " pixels")); }); select.addEventListener("change", function() { cx.lineWidth = select.value; }); return elt("span", null, "Brush size: ", select); };

, , lineWidth .


, , URL . http: https:, URL , . URL , HTML :

data:text/html,<h1 style="color:red">Hello!</h1>

URL , , , . , , - .

toDataURL, URL , . . URL . , href , .

controls.save = function(cx) { var link = elt("a", {href: "/"}, "Save"); function update() { try { link.href = cx.canvas.toDataURL(); } catch (e) { if (e instanceof SecurityError) link.href = "javascript:alert(" + JSON.stringify("Can't save: " + e.toString()) + ")"; else throw e; } } link.addEventListener("mouseover", update); link.addEventListener("focus", update); return link; };

, , , , .

, URL , . .

. URL , , (. 17), , , .

( ). , .

, , , , «». , URL , «» . , .

try/catch update . «», toDataURL , SecurityError. URL javascript:. , , , .


URL. , URL .

function loadImageURL(cx, url) { var image = document.createElement("img"); image.addEventListener("load", function() { var color = cx.fillStyle, size = cx.lineWidth; cx.canvas.width = image.width; cx.canvas.height = image.height; cx.drawImage(image, 0, 0); cx.fillStyle = color; cx.strokeStyle = color; cx.lineWidth = size; }); image.src = url; }

, . - (fillStyle lineWidth), .

FileReader 18. readAsText readAsDataURL – , . , , URL , loadImageURL .

controls.openFile = function(cx) { var input = elt("input", {type: "file"}); input.addEventListener("change", function() { if (input.files.length == 0) return; var reader = new FileReader(); reader.addEventListener("load", function() { loadImageURL(cx, reader.result); }); reader.readAsDataURL(input.files[0]); }); return elt("div", null, "Open file: ", input); };

URL . , URL, “change”. , – Enter, load.

controls.openURL = function(cx) { var input = elt("input", {type: "text"}); var form = elt("form", null, "Open URL: ", input, elt("button", {type: "submit"}, "load")); form.addEventListener("submit", function(event) { event.preventDefault(); loadImageURL(cx, form.querySelector("input").value); }); return form; };

, , .


, , .

tools.Text = function(event, cx) { var text = prompt("Text:", ""); if (text) { var pos = relativePos(event, cx.canvas); cx.font = Math.max(7, cx.lineWidth) + "px sans-serif"; cx.fillText(text, pos.x, pos.y); } };

, sans-serif , . – 7 , .

- – “”. , , .

tools.Spray = function(event, cx) { var radius = cx.lineWidth / 2; var area = radius * radius * Math.PI; var dotsPerTick = Math.ceil(area / 30); var currentPos = relativePos(event, cx.canvas); var spray = setInterval(function() { for (var i = 0; i < dotsPerTick; i++) { var offset = randomPointInRadius(radius); cx.fillRect(currentPos.x + offset.x, currentPos.y + offset.y, 1, 1); } }, 25); trackDrag(function(event) { currentPos = relativePos(event, cx.canvas); }, function() { clearInterval(spray); }); };

setInterval 25 , . trackDrag , currentPos , .

, , 30. randomPointInRadius.

function randomPointInRadius(radius) { for (;;) { var x = Math.random() * 2 - 1; var y = Math.random() * 2 - 1; if (x * x + y * y <= 1) return {x: x * radius, y: y * radius}; } }

(-1,-1) (1,1). , , 1. , , .

. , Math.sin Math.cos . . , , .

. .

<link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>


. .


Rectangle, (. fillRect 16) . , , , . , .

, , . , , ?

, position: absolute, 13. , . pageX pageY , left, top, width height.

<script> tools.Rectangle = function(event, cx) { // }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>


– , , . .

. toDataURL , URL . getImageData, width, height data. data 0 255, - red, green, blue alpha ().

, , ( – ), , .

function pixelAt(cx, x, y) { var data = cx.getImageData(x, y, 1, 1); console.log(data.data); } var canvas = document.createElement("canvas"); var cx = canvas.getContext("2d"); pixelAt(cx, 10, 10); // → [0, 0, 0, 0] cx.fillStyle = "red"; cx.fillRect(10, 10, 1, 1); pixelAt(cx, 10, 10); // → [255, 0, 0, 255]

getImageData x y, , .

, . color . , fillStyle strokeStyle , .

, , CSS, rgb(R, G, B), 15.

getImageData , toDataURL – , , . try/catch alert.

<script> tools["Pick color"] = function(event, cx) { // Your code here. }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>


, , . , , , - .

, . , , , ( ), , .

, , :



, , , .

getImageData . , , . 7, , . (x,y) (x + y × width) × 4

(), () .

, , , . . - , 9. , , , , .

. , . , , .

fillRect, - , , .

<script> tools["Flood fill"] = function(event, cx) { // }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>

, . , , . , , ..

"mousedown" , , . , , "mousemove", , .

. fillStyle, strokeStyle, lineWidth .

. file, . URL .

. save . , . , .

DOM
30 DOM. - .

DOM HTML. HTML – DOM , - . querySelector , DOM .

DOM JavaScript, . DOM JavaScript. 13, DOM . , .

– elt 13. , , , , .

function elt(name, attributes) { var node = document.createElement(name); if (attributes) { for (var attr in attributes) if (attributes.hasOwnProperty(attr)) node.setAttribute(attr, attributes[attr]); } for (var i = 2; i < arguments.length; i++) { var child = arguments[i]; if (typeof child == "string") child = document.createTextNode(child); node.appendChild(child); } return node; }

, .


– createPaint, DOM, . , controls, .

var controls = Object.create(null); function createPaint(parent) { var canvas = elt("canvas", {width: 500, height: 300}); var cx = canvas.getContext("2d"); var toolbar = elt("div", {class: "toolbar"}); for (var name in controls) toolbar.appendChild(controls[name](cx)); var panel = elt("div", {class: "picturepanel"}, canvas); parent.appendChild(elt("div", null, panel, toolbar)); }

, – . – , ( fillStyle) ( lineWidth).

, , .


, – , . controls, , , . , .

var tools = Object.create(null); controls.tool = function(cx) { var select = elt("select"); for (var name in tools) select.appendChild(elt("option", null, name)); cx.canvas.addEventListener("mousedown", function(event) { if (event.which == 1) { tools[select.value](event, cx); event.preventDefault(); } }); return elt("span", null, "Tool: ", select); };

tool , "mousedown" , event context. preventDefault, .

– , . , . 13 getBoundingClientRect . , , . clientX clientY , .

function relativePos(event, element) { var rect = element.getBoundingClientRect(); return {x: Math.floor(event.clientX - rect.left), y: Math.floor(event.clientY - rect.top)}; }

"mousemove", . trackDrag .

function trackDrag(onMove, onEnd) { function end(event) { removeEventListener("mousemove", onMove); removeEventListener("mouseup", end); if (onEnd) onEnd(event); } addEventListener("mousemove", onMove); addEventListener("mouseup", end); }

. – , "mousemove", – , . .

.

tools.Line = function(event, cx, onEnd) { cx.lineCap = "round"; var pos = relativePos(event, cx.canvas); trackDrag(function(event) { cx.beginPath(); cx.moveTo(pos.x, pos.y); pos = relativePos(event, cx.canvas); cx.lineTo(pos.x, pos.y); cx.stroke(); }, onEnd); };

lineCap “round”, - , , . , . , , lineCap .

, "mousemove", , , , strokeStyle lineWidth, .

onEnd , trackDrag. , undefined, . , erase, .

tools.Erase = function(event, cx) { cx.globalCompositeOperation = "destination-out"; tools.Line(event, cx, function() { cx.globalCompositeOperation = "source-over"; }); };

globalCompositeOperation , . , "source-over", , , , . , , , .

“erase” globalCompositeOperation "destination-out", , .

. ( strokeStyle lineWidth ), . , , .


, , .

18 . . , . - . - "date", "email", "url" "number". . – “text”, , , . , , , , .

controls.color = function(cx) { var input = elt("input", {type: "color"}); input.addEventListener("change", function() { cx.fillStyle = input.value; cx.strokeStyle = input.value; }); return elt("span", null, "Color: ", input); };

color fillStyle strokeStyle .

.

controls.brushSize = function(cx) { var select = elt("select"); var sizes = [1, 2, 3, 5, 8, 12, 25, 35, 50, 75, 100]; sizes.forEach(function(size) { select.appendChild(elt("option", {value: size}, size + " pixels")); }); select.addEventListener("change", function() { cx.lineWidth = select.value; }); return elt("span", null, "Brush size: ", select); };

, , lineWidth .


, , URL . http: https:, URL , . URL , HTML :

data:text/html,<h1 style="color:red">Hello!</h1>

URL , , , . , , - .

toDataURL, URL , . . URL . , href , .

controls.save = function(cx) { var link = elt("a", {href: "/"}, "Save"); function update() { try { link.href = cx.canvas.toDataURL(); } catch (e) { if (e instanceof SecurityError) link.href = "javascript:alert(" + JSON.stringify("Can't save: " + e.toString()) + ")"; else throw e; } } link.addEventListener("mouseover", update); link.addEventListener("focus", update); return link; };

, , , , .

, URL , . .

. URL , , (. 17), , , .

( ). , .

, , , , «». , URL , «» . , .

try/catch update . «», toDataURL , SecurityError. URL javascript:. , , , .


URL. , URL .

function loadImageURL(cx, url) { var image = document.createElement("img"); image.addEventListener("load", function() { var color = cx.fillStyle, size = cx.lineWidth; cx.canvas.width = image.width; cx.canvas.height = image.height; cx.drawImage(image, 0, 0); cx.fillStyle = color; cx.strokeStyle = color; cx.lineWidth = size; }); image.src = url; }

, . - (fillStyle lineWidth), .

FileReader 18. readAsText readAsDataURL – , . , , URL , loadImageURL .

controls.openFile = function(cx) { var input = elt("input", {type: "file"}); input.addEventListener("change", function() { if (input.files.length == 0) return; var reader = new FileReader(); reader.addEventListener("load", function() { loadImageURL(cx, reader.result); }); reader.readAsDataURL(input.files[0]); }); return elt("div", null, "Open file: ", input); };

URL . , URL, “change”. , – Enter, load.

controls.openURL = function(cx) { var input = elt("input", {type: "text"}); var form = elt("form", null, "Open URL: ", input, elt("button", {type: "submit"}, "load")); form.addEventListener("submit", function(event) { event.preventDefault(); loadImageURL(cx, form.querySelector("input").value); }); return form; };

, , .


, , .

tools.Text = function(event, cx) { var text = prompt("Text:", ""); if (text) { var pos = relativePos(event, cx.canvas); cx.font = Math.max(7, cx.lineWidth) + "px sans-serif"; cx.fillText(text, pos.x, pos.y); } };

, sans-serif , . – 7 , .

- – “”. , , .

tools.Spray = function(event, cx) { var radius = cx.lineWidth / 2; var area = radius * radius * Math.PI; var dotsPerTick = Math.ceil(area / 30); var currentPos = relativePos(event, cx.canvas); var spray = setInterval(function() { for (var i = 0; i < dotsPerTick; i++) { var offset = randomPointInRadius(radius); cx.fillRect(currentPos.x + offset.x, currentPos.y + offset.y, 1, 1); } }, 25); trackDrag(function(event) { currentPos = relativePos(event, cx.canvas); }, function() { clearInterval(spray); }); };

setInterval 25 , . trackDrag , currentPos , .

, , 30. randomPointInRadius.

function randomPointInRadius(radius) { for (;;) { var x = Math.random() * 2 - 1; var y = Math.random() * 2 - 1; if (x * x + y * y <= 1) return {x: x * radius, y: y * radius}; } }

(-1,-1) (1,1). , , 1. , , .

. , Math.sin Math.cos . . , , .

. .

<link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>


. .


Rectangle, (. fillRect 16) . , , , . , .

, , . , , ?

, position: absolute, 13. , . pageX pageY , left, top, width height.

<script> tools.Rectangle = function(event, cx) { // }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>


– , , . .

. toDataURL , URL . getImageData, width, height data. data 0 255, - red, green, blue alpha ().

, , ( – ), , .

function pixelAt(cx, x, y) { var data = cx.getImageData(x, y, 1, 1); console.log(data.data); } var canvas = document.createElement("canvas"); var cx = canvas.getContext("2d"); pixelAt(cx, 10, 10); // → [0, 0, 0, 0] cx.fillStyle = "red"; cx.fillRect(10, 10, 1, 1); pixelAt(cx, 10, 10); // → [255, 0, 0, 255]

getImageData x y, , .

, . color . , fillStyle strokeStyle , .

, , CSS, rgb(R, G, B), 15.

getImageData , toDataURL – , , . try/catch alert.

<script> tools["Pick color"] = function(event, cx) { // Your code here. }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>


, , . , , , - .

, . , , , ( ), , .

, , :



, , , .

getImageData . , , . 7, , . (x,y) (x + y × width) × 4

(), () .

, , , . . - , 9. , , , , .

. , . , , .

fillRect, - , , .

<script> tools["Flood fill"] = function(event, cx) { // }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>

, . , , . , , ..

"mousedown" , , . , , "mousemove", , .

. fillStyle, strokeStyle, lineWidth .

. file, . URL .

. save . , . , .

DOM
30 DOM. - .

DOM HTML. HTML – DOM , - . querySelector , DOM .

DOM JavaScript, . DOM JavaScript. 13, DOM . , .

– elt 13. , , , , .

function elt(name, attributes) { var node = document.createElement(name); if (attributes) { for (var attr in attributes) if (attributes.hasOwnProperty(attr)) node.setAttribute(attr, attributes[attr]); } for (var i = 2; i < arguments.length; i++) { var child = arguments[i]; if (typeof child == "string") child = document.createTextNode(child); node.appendChild(child); } return node; }

, .


– createPaint, DOM, . , controls, .

var controls = Object.create(null); function createPaint(parent) { var canvas = elt("canvas", {width: 500, height: 300}); var cx = canvas.getContext("2d"); var toolbar = elt("div", {class: "toolbar"}); for (var name in controls) toolbar.appendChild(controls[name](cx)); var panel = elt("div", {class: "picturepanel"}, canvas); parent.appendChild(elt("div", null, panel, toolbar)); }

, – . – , ( fillStyle) ( lineWidth).

, , .


, – , . controls, , , . , .

var tools = Object.create(null); controls.tool = function(cx) { var select = elt("select"); for (var name in tools) select.appendChild(elt("option", null, name)); cx.canvas.addEventListener("mousedown", function(event) { if (event.which == 1) { tools[select.value](event, cx); event.preventDefault(); } }); return elt("span", null, "Tool: ", select); };

tool , "mousedown" , event context. preventDefault, .

– , . , . 13 getBoundingClientRect . , , . clientX clientY , .

function relativePos(event, element) { var rect = element.getBoundingClientRect(); return {x: Math.floor(event.clientX - rect.left), y: Math.floor(event.clientY - rect.top)}; }

"mousemove", . trackDrag .

function trackDrag(onMove, onEnd) { function end(event) { removeEventListener("mousemove", onMove); removeEventListener("mouseup", end); if (onEnd) onEnd(event); } addEventListener("mousemove", onMove); addEventListener("mouseup", end); }

. – , "mousemove", – , . .

.

tools.Line = function(event, cx, onEnd) { cx.lineCap = "round"; var pos = relativePos(event, cx.canvas); trackDrag(function(event) { cx.beginPath(); cx.moveTo(pos.x, pos.y); pos = relativePos(event, cx.canvas); cx.lineTo(pos.x, pos.y); cx.stroke(); }, onEnd); };

lineCap “round”, - , , . , . , , lineCap .

, "mousemove", , , , strokeStyle lineWidth, .

onEnd , trackDrag. , undefined, . , erase, .

tools.Erase = function(event, cx) { cx.globalCompositeOperation = "destination-out"; tools.Line(event, cx, function() { cx.globalCompositeOperation = "source-over"; }); };

globalCompositeOperation , . , "source-over", , , , . , , , .

“erase” globalCompositeOperation "destination-out", , .

. ( strokeStyle lineWidth ), . , , .


, , .

18 . . , . - . - "date", "email", "url" "number". . – “text”, , , . , , , , .

controls.color = function(cx) { var input = elt("input", {type: "color"}); input.addEventListener("change", function() { cx.fillStyle = input.value; cx.strokeStyle = input.value; }); return elt("span", null, "Color: ", input); };

color fillStyle strokeStyle .

.

controls.brushSize = function(cx) { var select = elt("select"); var sizes = [1, 2, 3, 5, 8, 12, 25, 35, 50, 75, 100]; sizes.forEach(function(size) { select.appendChild(elt("option", {value: size}, size + " pixels")); }); select.addEventListener("change", function() { cx.lineWidth = select.value; }); return elt("span", null, "Brush size: ", select); };

, , lineWidth .


, , URL . http: https:, URL , . URL , HTML :

data:text/html,<h1 style="color:red">Hello!</h1>

URL , , , . , , - .

toDataURL, URL , . . URL . , href , .

controls.save = function(cx) { var link = elt("a", {href: "/"}, "Save"); function update() { try { link.href = cx.canvas.toDataURL(); } catch (e) { if (e instanceof SecurityError) link.href = "javascript:alert(" + JSON.stringify("Can't save: " + e.toString()) + ")"; else throw e; } } link.addEventListener("mouseover", update); link.addEventListener("focus", update); return link; };

, , , , .

, URL , . .

. URL , , (. 17), , , .

( ). , .

, , , , «». , URL , «» . , .

try/catch update . «», toDataURL , SecurityError. URL javascript:. , , , .


URL. , URL .

function loadImageURL(cx, url) { var image = document.createElement("img"); image.addEventListener("load", function() { var color = cx.fillStyle, size = cx.lineWidth; cx.canvas.width = image.width; cx.canvas.height = image.height; cx.drawImage(image, 0, 0); cx.fillStyle = color; cx.strokeStyle = color; cx.lineWidth = size; }); image.src = url; }

, . - (fillStyle lineWidth), .

FileReader 18. readAsText readAsDataURL – , . , , URL , loadImageURL .

controls.openFile = function(cx) { var input = elt("input", {type: "file"}); input.addEventListener("change", function() { if (input.files.length == 0) return; var reader = new FileReader(); reader.addEventListener("load", function() { loadImageURL(cx, reader.result); }); reader.readAsDataURL(input.files[0]); }); return elt("div", null, "Open file: ", input); };

URL . , URL, “change”. , – Enter, load.

controls.openURL = function(cx) { var input = elt("input", {type: "text"}); var form = elt("form", null, "Open URL: ", input, elt("button", {type: "submit"}, "load")); form.addEventListener("submit", function(event) { event.preventDefault(); loadImageURL(cx, form.querySelector("input").value); }); return form; };

, , .


, , .

tools.Text = function(event, cx) { var text = prompt("Text:", ""); if (text) { var pos = relativePos(event, cx.canvas); cx.font = Math.max(7, cx.lineWidth) + "px sans-serif"; cx.fillText(text, pos.x, pos.y); } };

, sans-serif , . – 7 , .

- – “”. , , .

tools.Spray = function(event, cx) { var radius = cx.lineWidth / 2; var area = radius * radius * Math.PI; var dotsPerTick = Math.ceil(area / 30); var currentPos = relativePos(event, cx.canvas); var spray = setInterval(function() { for (var i = 0; i < dotsPerTick; i++) { var offset = randomPointInRadius(radius); cx.fillRect(currentPos.x + offset.x, currentPos.y + offset.y, 1, 1); } }, 25); trackDrag(function(event) { currentPos = relativePos(event, cx.canvas); }, function() { clearInterval(spray); }); };

setInterval 25 , . trackDrag , currentPos , .

, , 30. randomPointInRadius.

function randomPointInRadius(radius) { for (;;) { var x = Math.random() * 2 - 1; var y = Math.random() * 2 - 1; if (x * x + y * y <= 1) return {x: x * radius, y: y * radius}; } }

(-1,-1) (1,1). , , 1. , , .

. , Math.sin Math.cos . . , , .

. .

<link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>


. .


Rectangle, (. fillRect 16) . , , , . , .

, , . , , ?

, position: absolute, 13. , . pageX pageY , left, top, width height.

<script> tools.Rectangle = function(event, cx) { // }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>


– , , . .

. toDataURL , URL . getImageData, width, height data. data 0 255, - red, green, blue alpha ().

, , ( – ), , .

function pixelAt(cx, x, y) { var data = cx.getImageData(x, y, 1, 1); console.log(data.data); } var canvas = document.createElement("canvas"); var cx = canvas.getContext("2d"); pixelAt(cx, 10, 10); // → [0, 0, 0, 0] cx.fillStyle = "red"; cx.fillRect(10, 10, 1, 1); pixelAt(cx, 10, 10); // → [255, 0, 0, 255]

getImageData x y, , .

, . color . , fillStyle strokeStyle , .

, , CSS, rgb(R, G, B), 15.

getImageData , toDataURL – , , . try/catch alert.

<script> tools["Pick color"] = function(event, cx) { // Your code here. }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>


, , . , , , - .

, . , , , ( ), , .

, , :



, , , .

getImageData . , , . 7, , . (x,y) (x + y × width) × 4

(), () .

, , , . . - , 9. , , , , .

. , . , , .

fillRect, - , , .

<script> tools["Flood fill"] = function(event, cx) { // }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>

 ,      .    ,     ,      .     ,   ,    .. 
 
      "mousedown"  ,   ,   .  , ,    "mousemove",      ,           . 
 
         .         fillStyle, strokeStyle,  lineWidth     . 
 
       .    file,       .   URL     . 
 
    .  save       .    ,       .   ,   . 
 
  DOM 
       30  DOM.   -  . 
 
      DOM  HTML.     HTML    –   DOM        ,    -   .       querySelector   ,     DOM  . 
 
      DOM      JavaScript,   .       DOM   JavaScript.      13,      DOM  .      ,    . 
 
   –    elt   13.        ,     ,  ,    ,      . 
 
 function elt(name, attributes) { var node = document.createElement(name); if (attributes) { for (var attr in attributes) if (attributes.hasOwnProperty(attr)) node.setAttribute(attr, attributes[attr]); } for (var i = 2; i < arguments.length; i++) { var child = arguments[i]; if (typeof child == "string") child = document.createTextNode(child); node.appendChild(child); } return node; } 
 
       ,       . 
 
  
    –  createPaint,      DOM,     .      ,    controls,           . 
 
 var controls = Object.create(null); function createPaint(parent) { var canvas = elt("canvas", {width: 500, height: 300}); var cx = canvas.getContext("2d"); var toolbar = elt("div", {class: "toolbar"}); for (var name in controls) toolbar.appendChild(controls[name](cx)); var panel = elt("div", {class: "picturepanel"}, canvas); parent.appendChild(elt("div", null, panel, toolbar)); } 
 
           ,    –   .        –    ,   (  fillStyle)    (  lineWidth). 
 
          ,      ,     . 
 
   
   ,    –  ,    .      controls,        ,           ,       .       ,          . 
 
 var tools = Object.create(null); controls.tool = function(cx) { var select = elt("select"); for (var name in tools) select.appendChild(elt("option", null, name)); cx.canvas.addEventListener("mousedown", function(event) { if (event.which == 1) { tools[select.value](event, cx); event.preventDefault(); } }); return elt("span", null, "Tool: ", select); }; 
 
   tool        ,    "mousedown"          ,    event  context.    preventDefault,          . 
 
    – ,     .   ,           .    13   getBoundingClientRect     .  ,   ,     .    clientX  clientY      ,                . 
 
 function relativePos(event, element) { var rect = element.getBoundingClientRect(); return {x: Math.floor(event.clientX - rect.left), y: Math.floor(event.clientY - rect.top)}; } 
 
       "mousemove",    .  trackDrag       . 
 
 function trackDrag(onMove, onEnd) { function end(event) { removeEventListener("mousemove", onMove); removeEventListener("mouseup", end); if (onEnd) onEnd(event); } addEventListener("mousemove", onMove); addEventListener("mouseup", end); } 
 
    .  – ,      "mousemove",   – ,     .      . 
 
           . 
 
 tools.Line = function(event, cx, onEnd) { cx.lineCap = "round"; var pos = relativePos(event, cx.canvas); trackDrag(function(event) { cx.beginPath(); cx.moveTo(pos.x, pos.y); pos = relativePos(event, cx.canvas); cx.lineTo(pos.x, pos.y); cx.stroke(); }, onEnd); }; 
 
      lineCap  “round”, -      ,   ,     .     ,      .     ,      ,     lineCap  . 
 
 ,    "mousemove",  ,   ,         ,      strokeStyle  lineWidth,     . 
 
  onEnd   ,  trackDrag.        ,        undefined,       .        ,  erase,      . 
 
 tools.Erase = function(event, cx) { cx.globalCompositeOperation = "destination-out"; tools.Line(event, cx, function() { cx.globalCompositeOperation = "source-over"; }); }; 
 
  globalCompositeOperation   ,        .  ,   "source-over",  ,  ,  ,   .   ,    ,     ,   . 
 
  “erase”  globalCompositeOperation  "destination-out",    ,     . 
 
         .          (     strokeStyle  lineWidth  ),   . ,   ,  . 
 
     
 ,              ,      . 
 
   18      .        .          ,            .    - .   - "date", "email", "url"  "number".      .      – “text”,     ,     ,       . ,   ,       ,       ,       . 
 
 controls.color = function(cx) { var input = elt("input", {type: "color"}); input.addEventListener("change", function() { cx.fillStyle = input.value; cx.strokeStyle = input.value; }); return elt("span", null, "Color: ", input); }; 
 
     color     fillStyle  strokeStyle    . 
 
      . 
 
 controls.brushSize = function(cx) { var select = elt("select"); var sizes = [1, 2, 3, 5, 8, 12, 25, 35, 50, 75, 100]; sizes.forEach(function(size) { select.appendChild(elt("option", {value: size}, size + " pixels")); }); select.addEventListener("change", function() { cx.lineWidth = select.value; }); return elt("span", null, "Brush size: ", select); }; 
 
       ,    ,    lineWidth    . 
 
  
  ,     ,      URL  .     http:  https:, URL      ,      .  URL  ,   HTML : 
 
 data:text/html,<h1 style="color:red">Hello!</h1> 
 
  URL    , , ,       .           ,  ,      - . 
 
       toDataURL,   URL  ,        .            .        URL   .       ,      href  ,            . 
 
 controls.save = function(cx) { var link = elt("a", {href: "/"}, "Save"); function update() { try { link.href = cx.canvas.toDataURL(); } catch (e) { if (e instanceof SecurityError) link.href = "javascript:alert(" + JSON.stringify("Can't save: " + e.toString()) + ")"; else throw e; } } link.addEventListener("mouseover", update); link.addEventListener("focus", update); return link; }; 
 
  ,          ,       ,      ,     . 
 
     ,      URL  ,    .       . 
 
           .     URL   ,      ,       (.  17),    ,    ,    . 
 
        (   ).        ,      . 
 
     ,  ,  ,    ,     «».  ,  URL  ,     «» .    ,     . 
 
     try/catch   update   .   «»,  toDataURL  ,   SecurityError.           URL   javascript:.     ,   ,     ,   . 
 
   
              URL.    ,      URL     . 
 
 function loadImageURL(cx, url) { var image = document.createElement("img"); image.addEventListener("load", function() { var color = cx.fillStyle, size = cx.lineWidth; cx.canvas.width = image.width; cx.canvas.height = image.height; cx.drawImage(image, 0, 0); cx.fillStyle = color; cx.strokeStyle = color; cx.lineWidth = size; }); image.src = url; } 
 
     ,    . -          (fillStyle  lineWidth),              . 
 
         FileReader   18.     readAsText        readAsDataURL –   ,   .   ,   ,  URL  ,     loadImageURL    . 
 
 controls.openFile = function(cx) { var input = elt("input", {type: "file"}); input.addEventListener("change", function() { if (input.files.length == 0) return; var reader = new FileReader(); reader.addEventListener("load", function() { loadImageURL(cx, reader.result); }); reader.readAsDataURL(input.files[0]); }); return elt("div", null, "Open file: ", input); }; 
 
    URL  .       ,       URL,        “change”.         ,     –    Enter,     load. 
 
 controls.openURL = function(cx) { var input = elt("input", {type: "text"}); var form = elt("form", null, "Open URL: ", input, elt("button", {type: "submit"}, "load")); form.addEventListener("submit", function(event) { event.preventDefault(); loadImageURL(cx, form.querySelector("input").value); }); return form; }; 
 
      ,   ,      . 
 
  
        ,    ,     . 
 
 tools.Text = function(event, cx) { var text = prompt("Text:", ""); if (text) { var pos = relativePos(event, cx.canvas); cx.font = Math.max(7, cx.lineWidth) + "px sans-serif"; cx.fillText(text, pos.x, pos.y); } }; 
 
          ,        sans-serif   ,    .   – 7 ,      . 
 
      - – “”.      ,    ,            . 
 
 tools.Spray = function(event, cx) { var radius = cx.lineWidth / 2; var area = radius * radius * Math.PI; var dotsPerTick = Math.ceil(area / 30); var currentPos = relativePos(event, cx.canvas); var spray = setInterval(function() { for (var i = 0; i < dotsPerTick; i++) { var offset = randomPointInRadius(radius); cx.fillRect(currentPos.x + offset.x, currentPos.y + offset.y, 1, 1); } }, 25); trackDrag(function(event) { currentPos = relativePos(event, cx.canvas); }, function() { clearInterval(spray); }); }; 
 
   setInterval      25 ,    .  trackDrag   ,  currentPos     ,       . 
 
  ,         ,           30.         randomPointInRadius. 
 
 function randomPointInRadius(radius) { for (;;) { var x = Math.random() * 2 - 1; var y = Math.random() * 2 - 1; if (x * x + y * y <= 1) return {x: x * radius, y: y * radius}; } } 
 
        (-1,-1)  (1,1).   ,  ,         1.    ,    ,   . 
 
      .       ,        Math.sin  Math.cos   .            .    ,    ,   . 
 
      .    . 
 
 <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body> 
 
  
        .    . 
 
  
   Rectangle,   (.  fillRect   16)  .      ,     ,    ,    . ,         . 
 
   ,  ,        .           ,       ,    ? 
 
   ,    position: absolute,      13.   ,      .  pageX  pageY          ,      left, top, width  height. 
 
 <script> tools.Rectangle = function(event, cx) { //   }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body> 
 
   
      –  ,        ,    .   . 
 
        .  toDataURL    ,       URL   .       getImageData,          width, height  data.   data     0  255,        - red, green, blue  alpha (). 
 
        ,  ,    (  –  ),   ,      . 
 
 function pixelAt(cx, x, y) { var data = cx.getImageData(x, y, 1, 1); console.log(data.data); } var canvas = document.createElement("canvas"); var cx = canvas.getContext("2d"); pixelAt(cx, 10, 10); // → [0, 0, 0, 0] cx.fillStyle = "red"; cx.fillRect(10, 10, 1, 1); pixelAt(cx, 10, 10); // → [255, 0, 0, 255] 
 
  getImageData     x  y,    ,      . 
 
     ,         .        color   .  ,  fillStyle  strokeStyle    ,   . 
 
 ,      ,   CSS,    rgb(R, G, B),      15. 
 
  getImageData    ,   toDataURL –   ,      ,    .   try/catch        alert. 
 
 <script> tools["Pick color"] = function(event, cx) { // Your code here. }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body> 
 
  
    ,  ,        . ,           ,   ,     -   . 
 
              ,    .       ,      ,      ,         (   ),    ,     . 
 
     , ,       : 
 
  
 
          ,   ,      ,   . 
 
    getImageData    .  ,       ,          .           7,  ,      .       (x,y)    (x + y × width) × 4 
 
      (),          () . 
 
            , ,   ,       .         .      -      ,    9.        ,    ,       ,    ,    . 
 
      .      ,       .  ,  ,    . 
 
       fillRect,   -  ,  ,     . 
 
 <script> tools["Flood fill"] = function(event, cx) { //   }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body> 

, . , , . , , ..

"mousedown" , , . , , "mousemove", , .

. fillStyle, strokeStyle, lineWidth .

. file, . URL .

. save . , . , .

DOM
30 DOM. - .

DOM HTML. HTML – DOM , - . querySelector , DOM .

DOM JavaScript, . DOM JavaScript. 13, DOM . , .

– elt 13. , , , , .

function elt(name, attributes) { var node = document.createElement(name); if (attributes) { for (var attr in attributes) if (attributes.hasOwnProperty(attr)) node.setAttribute(attr, attributes[attr]); } for (var i = 2; i < arguments.length; i++) { var child = arguments[i]; if (typeof child == "string") child = document.createTextNode(child); node.appendChild(child); } return node; }

, .


– createPaint, DOM, . , controls, .

var controls = Object.create(null); function createPaint(parent) { var canvas = elt("canvas", {width: 500, height: 300}); var cx = canvas.getContext("2d"); var toolbar = elt("div", {class: "toolbar"}); for (var name in controls) toolbar.appendChild(controls[name](cx)); var panel = elt("div", {class: "picturepanel"}, canvas); parent.appendChild(elt("div", null, panel, toolbar)); }

, – . – , ( fillStyle) ( lineWidth).

, , .


, – , . controls, , , . , .

var tools = Object.create(null); controls.tool = function(cx) { var select = elt("select"); for (var name in tools) select.appendChild(elt("option", null, name)); cx.canvas.addEventListener("mousedown", function(event) { if (event.which == 1) { tools[select.value](event, cx); event.preventDefault(); } }); return elt("span", null, "Tool: ", select); };

tool , "mousedown" , event context. preventDefault, .

– , . , . 13 getBoundingClientRect . , , . clientX clientY , .

function relativePos(event, element) { var rect = element.getBoundingClientRect(); return {x: Math.floor(event.clientX - rect.left), y: Math.floor(event.clientY - rect.top)}; }

"mousemove", . trackDrag .

function trackDrag(onMove, onEnd) { function end(event) { removeEventListener("mousemove", onMove); removeEventListener("mouseup", end); if (onEnd) onEnd(event); } addEventListener("mousemove", onMove); addEventListener("mouseup", end); }

. – , "mousemove", – , . .

.

tools.Line = function(event, cx, onEnd) { cx.lineCap = "round"; var pos = relativePos(event, cx.canvas); trackDrag(function(event) { cx.beginPath(); cx.moveTo(pos.x, pos.y); pos = relativePos(event, cx.canvas); cx.lineTo(pos.x, pos.y); cx.stroke(); }, onEnd); };

lineCap “round”, - , , . , . , , lineCap .

, "mousemove", , , , strokeStyle lineWidth, .

onEnd , trackDrag. , undefined, . , erase, .

tools.Erase = function(event, cx) { cx.globalCompositeOperation = "destination-out"; tools.Line(event, cx, function() { cx.globalCompositeOperation = "source-over"; }); };

globalCompositeOperation , . , "source-over", , , , . , , , .

“erase” globalCompositeOperation "destination-out", , .

. ( strokeStyle lineWidth ), . , , .


, , .

18 . . , . - . - "date", "email", "url" "number". . – “text”, , , . , , , , .

controls.color = function(cx) { var input = elt("input", {type: "color"}); input.addEventListener("change", function() { cx.fillStyle = input.value; cx.strokeStyle = input.value; }); return elt("span", null, "Color: ", input); };

color fillStyle strokeStyle .

.

controls.brushSize = function(cx) { var select = elt("select"); var sizes = [1, 2, 3, 5, 8, 12, 25, 35, 50, 75, 100]; sizes.forEach(function(size) { select.appendChild(elt("option", {value: size}, size + " pixels")); }); select.addEventListener("change", function() { cx.lineWidth = select.value; }); return elt("span", null, "Brush size: ", select); };

, , lineWidth .


, , URL . http: https:, URL , . URL , HTML :

data:text/html,<h1 style="color:red">Hello!</h1>

URL , , , . , , - .

toDataURL, URL , . . URL . , href , .

controls.save = function(cx) { var link = elt("a", {href: "/"}, "Save"); function update() { try { link.href = cx.canvas.toDataURL(); } catch (e) { if (e instanceof SecurityError) link.href = "javascript:alert(" + JSON.stringify("Can't save: " + e.toString()) + ")"; else throw e; } } link.addEventListener("mouseover", update); link.addEventListener("focus", update); return link; };

, , , , .

, URL , . .

. URL , , (. 17), , , .

( ). , .

, , , , «». , URL , «» . , .

try/catch update . «», toDataURL , SecurityError. URL javascript:. , , , .


URL. , URL .

function loadImageURL(cx, url) { var image = document.createElement("img"); image.addEventListener("load", function() { var color = cx.fillStyle, size = cx.lineWidth; cx.canvas.width = image.width; cx.canvas.height = image.height; cx.drawImage(image, 0, 0); cx.fillStyle = color; cx.strokeStyle = color; cx.lineWidth = size; }); image.src = url; }

, . - (fillStyle lineWidth), .

FileReader 18. readAsText readAsDataURL – , . , , URL , loadImageURL .

controls.openFile = function(cx) { var input = elt("input", {type: "file"}); input.addEventListener("change", function() { if (input.files.length == 0) return; var reader = new FileReader(); reader.addEventListener("load", function() { loadImageURL(cx, reader.result); }); reader.readAsDataURL(input.files[0]); }); return elt("div", null, "Open file: ", input); };

URL . , URL, “change”. , – Enter, load.

controls.openURL = function(cx) { var input = elt("input", {type: "text"}); var form = elt("form", null, "Open URL: ", input, elt("button", {type: "submit"}, "load")); form.addEventListener("submit", function(event) { event.preventDefault(); loadImageURL(cx, form.querySelector("input").value); }); return form; };

, , .


, , .

tools.Text = function(event, cx) { var text = prompt("Text:", ""); if (text) { var pos = relativePos(event, cx.canvas); cx.font = Math.max(7, cx.lineWidth) + "px sans-serif"; cx.fillText(text, pos.x, pos.y); } };

, sans-serif , . – 7 , .

- – “”. , , .

tools.Spray = function(event, cx) { var radius = cx.lineWidth / 2; var area = radius * radius * Math.PI; var dotsPerTick = Math.ceil(area / 30); var currentPos = relativePos(event, cx.canvas); var spray = setInterval(function() { for (var i = 0; i < dotsPerTick; i++) { var offset = randomPointInRadius(radius); cx.fillRect(currentPos.x + offset.x, currentPos.y + offset.y, 1, 1); } }, 25); trackDrag(function(event) { currentPos = relativePos(event, cx.canvas); }, function() { clearInterval(spray); }); };

setInterval 25 , . trackDrag , currentPos , .

, , 30. randomPointInRadius.

function randomPointInRadius(radius) { for (;;) { var x = Math.random() * 2 - 1; var y = Math.random() * 2 - 1; if (x * x + y * y <= 1) return {x: x * radius, y: y * radius}; } }

(-1,-1) (1,1). , , 1. , , .

. , Math.sin Math.cos . . , , .

. .

<link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>


. .


Rectangle, (. fillRect 16) . , , , . , .

, , . , , ?

, position: absolute, 13. , . pageX pageY , left, top, width height.

<script> tools.Rectangle = function(event, cx) { // }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>


– , , . .

. toDataURL , URL . getImageData, width, height data. data 0 255, - red, green, blue alpha ().

, , ( – ), , .

function pixelAt(cx, x, y) { var data = cx.getImageData(x, y, 1, 1); console.log(data.data); } var canvas = document.createElement("canvas"); var cx = canvas.getContext("2d"); pixelAt(cx, 10, 10); // → [0, 0, 0, 0] cx.fillStyle = "red"; cx.fillRect(10, 10, 1, 1); pixelAt(cx, 10, 10); // → [255, 0, 0, 255]

getImageData x y, , .

, . color . , fillStyle strokeStyle , .

, , CSS, rgb(R, G, B), 15.

getImageData , toDataURL – , , . try/catch alert.

<script> tools["Pick color"] = function(event, cx) { // Your code here. }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>


, , . , , , - .

, . , , , ( ), , .

, , :



, , , .

getImageData . , , . 7, , . (x,y) (x + y × width) × 4

(), () .

, , , . . - , 9. , , , , .

. , . , , .

fillRect, - , , .

<script> tools["Flood fill"] = function(event, cx) { // }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>

 ,      .    ,     ,      .     ,   ,    .. 
 
      "mousedown"  ,   ,   .  , ,    "mousemove",      ,           . 
 
         .         fillStyle, strokeStyle,  lineWidth     . 
 
       .    file,       .   URL     . 
 
    .  save       .    ,       .   ,   . 
 
  DOM 
       30  DOM.   -  . 
 
      DOM  HTML.     HTML    –   DOM        ,    -   .       querySelector   ,     DOM  . 
 
      DOM      JavaScript,   .       DOM   JavaScript.      13,      DOM  .      ,    . 
 
   –    elt   13.        ,     ,  ,    ,      . 
 
 function elt(name, attributes) { var node = document.createElement(name); if (attributes) { for (var attr in attributes) if (attributes.hasOwnProperty(attr)) node.setAttribute(attr, attributes[attr]); } for (var i = 2; i < arguments.length; i++) { var child = arguments[i]; if (typeof child == "string") child = document.createTextNode(child); node.appendChild(child); } return node; } 
 
       ,       . 
 
  
    –  createPaint,      DOM,     .      ,    controls,           . 
 
 var controls = Object.create(null); function createPaint(parent) { var canvas = elt("canvas", {width: 500, height: 300}); var cx = canvas.getContext("2d"); var toolbar = elt("div", {class: "toolbar"}); for (var name in controls) toolbar.appendChild(controls[name](cx)); var panel = elt("div", {class: "picturepanel"}, canvas); parent.appendChild(elt("div", null, panel, toolbar)); } 
 
           ,    –   .        –    ,   (  fillStyle)    (  lineWidth). 
 
          ,      ,     . 
 
   
   ,    –  ,    .      controls,        ,           ,       .       ,          . 
 
 var tools = Object.create(null); controls.tool = function(cx) { var select = elt("select"); for (var name in tools) select.appendChild(elt("option", null, name)); cx.canvas.addEventListener("mousedown", function(event) { if (event.which == 1) { tools[select.value](event, cx); event.preventDefault(); } }); return elt("span", null, "Tool: ", select); }; 
 
   tool        ,    "mousedown"          ,    event  context.    preventDefault,          . 
 
    – ,     .   ,           .    13   getBoundingClientRect     .  ,   ,     .    clientX  clientY      ,                . 
 
 function relativePos(event, element) { var rect = element.getBoundingClientRect(); return {x: Math.floor(event.clientX - rect.left), y: Math.floor(event.clientY - rect.top)}; } 
 
       "mousemove",    .  trackDrag       . 
 
 function trackDrag(onMove, onEnd) { function end(event) { removeEventListener("mousemove", onMove); removeEventListener("mouseup", end); if (onEnd) onEnd(event); } addEventListener("mousemove", onMove); addEventListener("mouseup", end); } 
 
    .  – ,      "mousemove",   – ,     .      . 
 
           . 
 
 tools.Line = function(event, cx, onEnd) { cx.lineCap = "round"; var pos = relativePos(event, cx.canvas); trackDrag(function(event) { cx.beginPath(); cx.moveTo(pos.x, pos.y); pos = relativePos(event, cx.canvas); cx.lineTo(pos.x, pos.y); cx.stroke(); }, onEnd); }; 
 
      lineCap  “round”, -      ,   ,     .     ,      .     ,      ,     lineCap  . 
 
 ,    "mousemove",  ,   ,         ,      strokeStyle  lineWidth,     . 
 
  onEnd   ,  trackDrag.        ,        undefined,       .        ,  erase,      . 
 
 tools.Erase = function(event, cx) { cx.globalCompositeOperation = "destination-out"; tools.Line(event, cx, function() { cx.globalCompositeOperation = "source-over"; }); }; 
 
  globalCompositeOperation   ,        .  ,   "source-over",  ,  ,  ,   .   ,    ,     ,   . 
 
  “erase”  globalCompositeOperation  "destination-out",    ,     . 
 
         .          (     strokeStyle  lineWidth  ),   . ,   ,  . 
 
     
 ,              ,      . 
 
   18      .        .          ,            .    - .   - "date", "email", "url"  "number".      .      – “text”,     ,     ,       . ,   ,       ,       ,       . 
 
 controls.color = function(cx) { var input = elt("input", {type: "color"}); input.addEventListener("change", function() { cx.fillStyle = input.value; cx.strokeStyle = input.value; }); return elt("span", null, "Color: ", input); }; 
 
     color     fillStyle  strokeStyle    . 
 
      . 
 
 controls.brushSize = function(cx) { var select = elt("select"); var sizes = [1, 2, 3, 5, 8, 12, 25, 35, 50, 75, 100]; sizes.forEach(function(size) { select.appendChild(elt("option", {value: size}, size + " pixels")); }); select.addEventListener("change", function() { cx.lineWidth = select.value; }); return elt("span", null, "Brush size: ", select); }; 
 
       ,    ,    lineWidth    . 
 
  
  ,     ,      URL  .     http:  https:, URL      ,      .  URL  ,   HTML : 
 
 data:text/html,<h1 style="color:red">Hello!</h1> 
 
  URL    , , ,       .           ,  ,      - . 
 
       toDataURL,   URL  ,        .            .        URL   .       ,      href  ,            . 
 
 controls.save = function(cx) { var link = elt("a", {href: "/"}, "Save"); function update() { try { link.href = cx.canvas.toDataURL(); } catch (e) { if (e instanceof SecurityError) link.href = "javascript:alert(" + JSON.stringify("Can't save: " + e.toString()) + ")"; else throw e; } } link.addEventListener("mouseover", update); link.addEventListener("focus", update); return link; }; 
 
  ,          ,       ,      ,     . 
 
     ,      URL  ,    .       . 
 
           .     URL   ,      ,       (.  17),    ,    ,    . 
 
        (   ).        ,      . 
 
     ,  ,  ,    ,     «».  ,  URL  ,     «» .    ,     . 
 
     try/catch   update   .   «»,  toDataURL  ,   SecurityError.           URL   javascript:.     ,   ,     ,   . 
 
   
              URL.    ,      URL     . 
 
 function loadImageURL(cx, url) { var image = document.createElement("img"); image.addEventListener("load", function() { var color = cx.fillStyle, size = cx.lineWidth; cx.canvas.width = image.width; cx.canvas.height = image.height; cx.drawImage(image, 0, 0); cx.fillStyle = color; cx.strokeStyle = color; cx.lineWidth = size; }); image.src = url; } 
 
     ,    . -          (fillStyle  lineWidth),              . 
 
         FileReader   18.     readAsText        readAsDataURL –   ,   .   ,   ,  URL  ,     loadImageURL    . 
 
 controls.openFile = function(cx) { var input = elt("input", {type: "file"}); input.addEventListener("change", function() { if (input.files.length == 0) return; var reader = new FileReader(); reader.addEventListener("load", function() { loadImageURL(cx, reader.result); }); reader.readAsDataURL(input.files[0]); }); return elt("div", null, "Open file: ", input); }; 
 
    URL  .       ,       URL,        “change”.         ,     –    Enter,     load. 
 
 controls.openURL = function(cx) { var input = elt("input", {type: "text"}); var form = elt("form", null, "Open URL: ", input, elt("button", {type: "submit"}, "load")); form.addEventListener("submit", function(event) { event.preventDefault(); loadImageURL(cx, form.querySelector("input").value); }); return form; }; 
 
      ,   ,      . 
 
  
        ,    ,     . 
 
 tools.Text = function(event, cx) { var text = prompt("Text:", ""); if (text) { var pos = relativePos(event, cx.canvas); cx.font = Math.max(7, cx.lineWidth) + "px sans-serif"; cx.fillText(text, pos.x, pos.y); } }; 
 
          ,        sans-serif   ,    .   – 7 ,      . 
 
      - – “”.      ,    ,            . 
 
 tools.Spray = function(event, cx) { var radius = cx.lineWidth / 2; var area = radius * radius * Math.PI; var dotsPerTick = Math.ceil(area / 30); var currentPos = relativePos(event, cx.canvas); var spray = setInterval(function() { for (var i = 0; i < dotsPerTick; i++) { var offset = randomPointInRadius(radius); cx.fillRect(currentPos.x + offset.x, currentPos.y + offset.y, 1, 1); } }, 25); trackDrag(function(event) { currentPos = relativePos(event, cx.canvas); }, function() { clearInterval(spray); }); }; 
 
   setInterval      25 ,    .  trackDrag   ,  currentPos     ,       . 
 
  ,         ,           30.         randomPointInRadius. 
 
 function randomPointInRadius(radius) { for (;;) { var x = Math.random() * 2 - 1; var y = Math.random() * 2 - 1; if (x * x + y * y <= 1) return {x: x * radius, y: y * radius}; } } 
 
        (-1,-1)  (1,1).   ,  ,         1.    ,    ,   . 
 
      .       ,        Math.sin  Math.cos   .            .    ,    ,   . 
 
      .    . 
 
 <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body> 
 
  
        .    . 
 
  
   Rectangle,   (.  fillRect   16)  .      ,     ,    ,    . ,         . 
 
   ,  ,        .           ,       ,    ? 
 
   ,    position: absolute,      13.   ,      .  pageX  pageY          ,      left, top, width  height. 
 
 <script> tools.Rectangle = function(event, cx) { //   }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body> 
 
   
      –  ,        ,    .   . 
 
        .  toDataURL    ,       URL   .       getImageData,          width, height  data.   data     0  255,        - red, green, blue  alpha (). 
 
        ,  ,    (  –  ),   ,      . 
 
 function pixelAt(cx, x, y) { var data = cx.getImageData(x, y, 1, 1); console.log(data.data); } var canvas = document.createElement("canvas"); var cx = canvas.getContext("2d"); pixelAt(cx, 10, 10); // → [0, 0, 0, 0] cx.fillStyle = "red"; cx.fillRect(10, 10, 1, 1); pixelAt(cx, 10, 10); // → [255, 0, 0, 255] 
 
  getImageData     x  y,    ,      . 
 
     ,         .        color   .  ,  fillStyle  strokeStyle    ,   . 
 
 ,      ,   CSS,    rgb(R, G, B),      15. 
 
  getImageData    ,   toDataURL –   ,      ,    .   try/catch        alert. 
 
 <script> tools["Pick color"] = function(event, cx) { // Your code here. }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body> 
 
  
    ,  ,        . ,           ,   ,     -   . 
 
              ,    .       ,      ,      ,         (   ),    ,     . 
 
     , ,       : 
 
  
 
          ,   ,      ,   . 
 
    getImageData    .  ,       ,          .           7,  ,      .       (x,y)    (x + y × width) × 4 
 
      (),          () . 
 
            , ,   ,       .         .      -      ,    9.        ,    ,       ,    ,    . 
 
      .      ,       .  ,  ,    . 
 
       fillRect,   -  ,  ,     . 
 
 <script> tools["Flood fill"] = function(event, cx) { //   }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body> 

, . , , . , , ..

"mousedown" , , . , , "mousemove", , .

. fillStyle, strokeStyle, lineWidth .

. file, . URL .

. save . , . , .

DOM
30 DOM. - .

DOM HTML. HTML – DOM , - . querySelector , DOM .

DOM JavaScript, . DOM JavaScript. 13, DOM . , .

– elt 13. , , , , .

function elt(name, attributes) { var node = document.createElement(name); if (attributes) { for (var attr in attributes) if (attributes.hasOwnProperty(attr)) node.setAttribute(attr, attributes[attr]); } for (var i = 2; i < arguments.length; i++) { var child = arguments[i]; if (typeof child == "string") child = document.createTextNode(child); node.appendChild(child); } return node; }

, .


– createPaint, DOM, . , controls, .

var controls = Object.create(null); function createPaint(parent) { var canvas = elt("canvas", {width: 500, height: 300}); var cx = canvas.getContext("2d"); var toolbar = elt("div", {class: "toolbar"}); for (var name in controls) toolbar.appendChild(controls[name](cx)); var panel = elt("div", {class: "picturepanel"}, canvas); parent.appendChild(elt("div", null, panel, toolbar)); }

, – . – , ( fillStyle) ( lineWidth).

, , .


, – , . controls, , , . , .

var tools = Object.create(null); controls.tool = function(cx) { var select = elt("select"); for (var name in tools) select.appendChild(elt("option", null, name)); cx.canvas.addEventListener("mousedown", function(event) { if (event.which == 1) { tools[select.value](event, cx); event.preventDefault(); } }); return elt("span", null, "Tool: ", select); };

tool , "mousedown" , event context. preventDefault, .

– , . , . 13 getBoundingClientRect . , , . clientX clientY , .

function relativePos(event, element) { var rect = element.getBoundingClientRect(); return {x: Math.floor(event.clientX - rect.left), y: Math.floor(event.clientY - rect.top)}; }

"mousemove", . trackDrag .

function trackDrag(onMove, onEnd) { function end(event) { removeEventListener("mousemove", onMove); removeEventListener("mouseup", end); if (onEnd) onEnd(event); } addEventListener("mousemove", onMove); addEventListener("mouseup", end); }

. – , "mousemove", – , . .

.

tools.Line = function(event, cx, onEnd) { cx.lineCap = "round"; var pos = relativePos(event, cx.canvas); trackDrag(function(event) { cx.beginPath(); cx.moveTo(pos.x, pos.y); pos = relativePos(event, cx.canvas); cx.lineTo(pos.x, pos.y); cx.stroke(); }, onEnd); };

lineCap “round”, - , , . , . , , lineCap .

, "mousemove", , , , strokeStyle lineWidth, .

onEnd , trackDrag. , undefined, . , erase, .

tools.Erase = function(event, cx) { cx.globalCompositeOperation = "destination-out"; tools.Line(event, cx, function() { cx.globalCompositeOperation = "source-over"; }); };

globalCompositeOperation , . , "source-over", , , , . , , , .

“erase” globalCompositeOperation "destination-out", , .

. ( strokeStyle lineWidth ), . , , .


, , .

18 . . , . - . - "date", "email", "url" "number". . – “text”, , , . , , , , .

controls.color = function(cx) { var input = elt("input", {type: "color"}); input.addEventListener("change", function() { cx.fillStyle = input.value; cx.strokeStyle = input.value; }); return elt("span", null, "Color: ", input); };

color fillStyle strokeStyle .

.

controls.brushSize = function(cx) { var select = elt("select"); var sizes = [1, 2, 3, 5, 8, 12, 25, 35, 50, 75, 100]; sizes.forEach(function(size) { select.appendChild(elt("option", {value: size}, size + " pixels")); }); select.addEventListener("change", function() { cx.lineWidth = select.value; }); return elt("span", null, "Brush size: ", select); };

, , lineWidth .


, , URL . http: https:, URL , . URL , HTML :

data:text/html,<h1 style="color:red">Hello!</h1>

URL , , , . , , - .

toDataURL, URL , . . URL . , href , .

controls.save = function(cx) { var link = elt("a", {href: "/"}, "Save"); function update() { try { link.href = cx.canvas.toDataURL(); } catch (e) { if (e instanceof SecurityError) link.href = "javascript:alert(" + JSON.stringify("Can't save: " + e.toString()) + ")"; else throw e; } } link.addEventListener("mouseover", update); link.addEventListener("focus", update); return link; };

, , , , .

, URL , . .

. URL , , (. 17), , , .

( ). , .

, , , , «». , URL , «» . , .

try/catch update . «», toDataURL , SecurityError. URL javascript:. , , , .


URL. , URL .

function loadImageURL(cx, url) { var image = document.createElement("img"); image.addEventListener("load", function() { var color = cx.fillStyle, size = cx.lineWidth; cx.canvas.width = image.width; cx.canvas.height = image.height; cx.drawImage(image, 0, 0); cx.fillStyle = color; cx.strokeStyle = color; cx.lineWidth = size; }); image.src = url; }

, . - (fillStyle lineWidth), .

FileReader 18. readAsText readAsDataURL – , . , , URL , loadImageURL .

controls.openFile = function(cx) { var input = elt("input", {type: "file"}); input.addEventListener("change", function() { if (input.files.length == 0) return; var reader = new FileReader(); reader.addEventListener("load", function() { loadImageURL(cx, reader.result); }); reader.readAsDataURL(input.files[0]); }); return elt("div", null, "Open file: ", input); };

URL . , URL, “change”. , – Enter, load.

controls.openURL = function(cx) { var input = elt("input", {type: "text"}); var form = elt("form", null, "Open URL: ", input, elt("button", {type: "submit"}, "load")); form.addEventListener("submit", function(event) { event.preventDefault(); loadImageURL(cx, form.querySelector("input").value); }); return form; };

, , .


, , .

tools.Text = function(event, cx) { var text = prompt("Text:", ""); if (text) { var pos = relativePos(event, cx.canvas); cx.font = Math.max(7, cx.lineWidth) + "px sans-serif"; cx.fillText(text, pos.x, pos.y); } };

, sans-serif , . – 7 , .

- – “”. , , .

tools.Spray = function(event, cx) { var radius = cx.lineWidth / 2; var area = radius * radius * Math.PI; var dotsPerTick = Math.ceil(area / 30); var currentPos = relativePos(event, cx.canvas); var spray = setInterval(function() { for (var i = 0; i < dotsPerTick; i++) { var offset = randomPointInRadius(radius); cx.fillRect(currentPos.x + offset.x, currentPos.y + offset.y, 1, 1); } }, 25); trackDrag(function(event) { currentPos = relativePos(event, cx.canvas); }, function() { clearInterval(spray); }); };

setInterval 25 , . trackDrag , currentPos , .

, , 30. randomPointInRadius.

function randomPointInRadius(radius) { for (;;) { var x = Math.random() * 2 - 1; var y = Math.random() * 2 - 1; if (x * x + y * y <= 1) return {x: x * radius, y: y * radius}; } }

(-1,-1) (1,1). , , 1. , , .

. , Math.sin Math.cos . . , , .

. .

<link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>


. .


Rectangle, (. fillRect 16) . , , , . , .

, , . , , ?

, position: absolute, 13. , . pageX pageY , left, top, width height.

<script> tools.Rectangle = function(event, cx) { // }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>


– , , . .

. toDataURL , URL . getImageData, width, height data. data 0 255, - red, green, blue alpha ().

, , ( – ), , .

function pixelAt(cx, x, y) { var data = cx.getImageData(x, y, 1, 1); console.log(data.data); } var canvas = document.createElement("canvas"); var cx = canvas.getContext("2d"); pixelAt(cx, 10, 10); // → [0, 0, 0, 0] cx.fillStyle = "red"; cx.fillRect(10, 10, 1, 1); pixelAt(cx, 10, 10); // → [255, 0, 0, 255]

getImageData x y, , .

, . color . , fillStyle strokeStyle , .

, , CSS, rgb(R, G, B), 15.

getImageData , toDataURL – , , . try/catch alert.

<script> tools["Pick color"] = function(event, cx) { // Your code here. }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>


, , . , , , - .

, . , , , ( ), , .

, , :



, , , .

getImageData . , , . 7, , . (x,y) (x + y × width) × 4

(), () .

, , , . . - , 9. , , , , .

. , . , , .

fillRect, - , , .

<script> tools["Flood fill"] = function(event, cx) { // }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>

 ,      .    ,     ,      .     ,   ,    .. 
 
      "mousedown"  ,   ,   .  , ,    "mousemove",      ,           . 
 
         .         fillStyle, strokeStyle,  lineWidth     . 
 
       .    file,       .   URL     . 
 
    .  save       .    ,       .   ,   . 
 
  DOM 
       30  DOM.   -  . 
 
      DOM  HTML.     HTML    –   DOM        ,    -   .       querySelector   ,     DOM  . 
 
      DOM      JavaScript,   .       DOM   JavaScript.      13,      DOM  .      ,    . 
 
   –    elt   13.        ,     ,  ,    ,      . 
 
 function elt(name, attributes) { var node = document.createElement(name); if (attributes) { for (var attr in attributes) if (attributes.hasOwnProperty(attr)) node.setAttribute(attr, attributes[attr]); } for (var i = 2; i < arguments.length; i++) { var child = arguments[i]; if (typeof child == "string") child = document.createTextNode(child); node.appendChild(child); } return node; } 
 
       ,       . 
 
  
    –  createPaint,      DOM,     .      ,    controls,           . 
 
 var controls = Object.create(null); function createPaint(parent) { var canvas = elt("canvas", {width: 500, height: 300}); var cx = canvas.getContext("2d"); var toolbar = elt("div", {class: "toolbar"}); for (var name in controls) toolbar.appendChild(controls[name](cx)); var panel = elt("div", {class: "picturepanel"}, canvas); parent.appendChild(elt("div", null, panel, toolbar)); } 
 
           ,    –   .        –    ,   (  fillStyle)    (  lineWidth). 
 
          ,      ,     . 
 
   
   ,    –  ,    .      controls,        ,           ,       .       ,          . 
 
 var tools = Object.create(null); controls.tool = function(cx) { var select = elt("select"); for (var name in tools) select.appendChild(elt("option", null, name)); cx.canvas.addEventListener("mousedown", function(event) { if (event.which == 1) { tools[select.value](event, cx); event.preventDefault(); } }); return elt("span", null, "Tool: ", select); }; 
 
   tool        ,    "mousedown"          ,    event  context.    preventDefault,          . 
 
    – ,     .   ,           .    13   getBoundingClientRect     .  ,   ,     .    clientX  clientY      ,                . 
 
 function relativePos(event, element) { var rect = element.getBoundingClientRect(); return {x: Math.floor(event.clientX - rect.left), y: Math.floor(event.clientY - rect.top)}; } 
 
       "mousemove",    .  trackDrag       . 
 
 function trackDrag(onMove, onEnd) { function end(event) { removeEventListener("mousemove", onMove); removeEventListener("mouseup", end); if (onEnd) onEnd(event); } addEventListener("mousemove", onMove); addEventListener("mouseup", end); } 
 
    .  – ,      "mousemove",   – ,     .      . 
 
           . 
 
 tools.Line = function(event, cx, onEnd) { cx.lineCap = "round"; var pos = relativePos(event, cx.canvas); trackDrag(function(event) { cx.beginPath(); cx.moveTo(pos.x, pos.y); pos = relativePos(event, cx.canvas); cx.lineTo(pos.x, pos.y); cx.stroke(); }, onEnd); }; 
 
      lineCap  “round”, -      ,   ,     .     ,      .     ,      ,     lineCap  . 
 
 ,    "mousemove",  ,   ,         ,      strokeStyle  lineWidth,     . 
 
  onEnd   ,  trackDrag.        ,        undefined,       .        ,  erase,      . 
 
 tools.Erase = function(event, cx) { cx.globalCompositeOperation = "destination-out"; tools.Line(event, cx, function() { cx.globalCompositeOperation = "source-over"; }); }; 
 
  globalCompositeOperation   ,        .  ,   "source-over",  ,  ,  ,   .   ,    ,     ,   . 
 
  “erase”  globalCompositeOperation  "destination-out",    ,     . 
 
         .          (     strokeStyle  lineWidth  ),   . ,   ,  . 
 
     
 ,              ,      . 
 
   18      .        .          ,            .    - .   - "date", "email", "url"  "number".      .      – “text”,     ,     ,       . ,   ,       ,       ,       . 
 
 controls.color = function(cx) { var input = elt("input", {type: "color"}); input.addEventListener("change", function() { cx.fillStyle = input.value; cx.strokeStyle = input.value; }); return elt("span", null, "Color: ", input); }; 
 
     color     fillStyle  strokeStyle    . 
 
      . 
 
 controls.brushSize = function(cx) { var select = elt("select"); var sizes = [1, 2, 3, 5, 8, 12, 25, 35, 50, 75, 100]; sizes.forEach(function(size) { select.appendChild(elt("option", {value: size}, size + " pixels")); }); select.addEventListener("change", function() { cx.lineWidth = select.value; }); return elt("span", null, "Brush size: ", select); }; 
 
       ,    ,    lineWidth    . 
 
  
  ,     ,      URL  .     http:  https:, URL      ,      .  URL  ,   HTML : 
 
 data:text/html,<h1 style="color:red">Hello!</h1> 
 
  URL    , , ,       .           ,  ,      - . 
 
       toDataURL,   URL  ,        .            .        URL   .       ,      href  ,            . 
 
 controls.save = function(cx) { var link = elt("a", {href: "/"}, "Save"); function update() { try { link.href = cx.canvas.toDataURL(); } catch (e) { if (e instanceof SecurityError) link.href = "javascript:alert(" + JSON.stringify("Can't save: " + e.toString()) + ")"; else throw e; } } link.addEventListener("mouseover", update); link.addEventListener("focus", update); return link; }; 
 
  ,          ,       ,      ,     . 
 
     ,      URL  ,    .       . 
 
           .     URL   ,      ,       (.  17),    ,    ,    . 
 
        (   ).        ,      . 
 
     ,  ,  ,    ,     «».  ,  URL  ,     «» .    ,     . 
 
     try/catch   update   .   «»,  toDataURL  ,   SecurityError.           URL   javascript:.     ,   ,     ,   . 
 
   
              URL.    ,      URL     . 
 
 function loadImageURL(cx, url) { var image = document.createElement("img"); image.addEventListener("load", function() { var color = cx.fillStyle, size = cx.lineWidth; cx.canvas.width = image.width; cx.canvas.height = image.height; cx.drawImage(image, 0, 0); cx.fillStyle = color; cx.strokeStyle = color; cx.lineWidth = size; }); image.src = url; } 
 
     ,    . -          (fillStyle  lineWidth),              . 
 
         FileReader   18.     readAsText        readAsDataURL –   ,   .   ,   ,  URL  ,     loadImageURL    . 
 
 controls.openFile = function(cx) { var input = elt("input", {type: "file"}); input.addEventListener("change", function() { if (input.files.length == 0) return; var reader = new FileReader(); reader.addEventListener("load", function() { loadImageURL(cx, reader.result); }); reader.readAsDataURL(input.files[0]); }); return elt("div", null, "Open file: ", input); }; 
 
    URL  .       ,       URL,        “change”.         ,     –    Enter,     load. 
 
 controls.openURL = function(cx) { var input = elt("input", {type: "text"}); var form = elt("form", null, "Open URL: ", input, elt("button", {type: "submit"}, "load")); form.addEventListener("submit", function(event) { event.preventDefault(); loadImageURL(cx, form.querySelector("input").value); }); return form; }; 
 
      ,   ,      . 
 
  
        ,    ,     . 
 
 tools.Text = function(event, cx) { var text = prompt("Text:", ""); if (text) { var pos = relativePos(event, cx.canvas); cx.font = Math.max(7, cx.lineWidth) + "px sans-serif"; cx.fillText(text, pos.x, pos.y); } }; 
 
          ,        sans-serif   ,    .   – 7 ,      . 
 
      - – “”.      ,    ,            . 
 
 tools.Spray = function(event, cx) { var radius = cx.lineWidth / 2; var area = radius * radius * Math.PI; var dotsPerTick = Math.ceil(area / 30); var currentPos = relativePos(event, cx.canvas); var spray = setInterval(function() { for (var i = 0; i < dotsPerTick; i++) { var offset = randomPointInRadius(radius); cx.fillRect(currentPos.x + offset.x, currentPos.y + offset.y, 1, 1); } }, 25); trackDrag(function(event) { currentPos = relativePos(event, cx.canvas); }, function() { clearInterval(spray); }); }; 
 
   setInterval      25 ,    .  trackDrag   ,  currentPos     ,       . 
 
  ,         ,           30.         randomPointInRadius. 
 
 function randomPointInRadius(radius) { for (;;) { var x = Math.random() * 2 - 1; var y = Math.random() * 2 - 1; if (x * x + y * y <= 1) return {x: x * radius, y: y * radius}; } } 
 
        (-1,-1)  (1,1).   ,  ,         1.    ,    ,   . 
 
      .       ,        Math.sin  Math.cos   .            .    ,    ,   . 
 
      .    . 
 
 <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body> 
 
  
        .    . 
 
  
   Rectangle,   (.  fillRect   16)  .      ,     ,    ,    . ,         . 
 
   ,  ,        .           ,       ,    ? 
 
   ,    position: absolute,      13.   ,      .  pageX  pageY          ,      left, top, width  height. 
 
 <script> tools.Rectangle = function(event, cx) { //   }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body> 
 
   
      –  ,        ,    .   . 
 
        .  toDataURL    ,       URL   .       getImageData,          width, height  data.   data     0  255,        - red, green, blue  alpha (). 
 
        ,  ,    (  –  ),   ,      . 
 
 function pixelAt(cx, x, y) { var data = cx.getImageData(x, y, 1, 1); console.log(data.data); } var canvas = document.createElement("canvas"); var cx = canvas.getContext("2d"); pixelAt(cx, 10, 10); // → [0, 0, 0, 0] cx.fillStyle = "red"; cx.fillRect(10, 10, 1, 1); pixelAt(cx, 10, 10); // → [255, 0, 0, 255] 
 
  getImageData     x  y,    ,      . 
 
     ,         .        color   .  ,  fillStyle  strokeStyle    ,   . 
 
 ,      ,   CSS,    rgb(R, G, B),      15. 
 
  getImageData    ,   toDataURL –   ,      ,    .   try/catch        alert. 
 
 <script> tools["Pick color"] = function(event, cx) { // Your code here. }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body> 
 
  
    ,  ,        . ,           ,   ,     -   . 
 
              ,    .       ,      ,      ,         (   ),    ,     . 
 
     , ,       : 
 
  
 
          ,   ,      ,   . 
 
    getImageData    .  ,       ,          .           7,  ,      .       (x,y)    (x + y × width) × 4 
 
      (),          () . 
 
            , ,   ,       .         .      -      ,    9.        ,    ,       ,    ,    . 
 
      .      ,       .  ,  ,    . 
 
       fillRect,   -  ,  ,     . 
 
 <script> tools["Flood fill"] = function(event, cx) { //   }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body> 

, . , , . , , ..

"mousedown" , , . , , "mousemove", , .

. fillStyle, strokeStyle, lineWidth .

. file, . URL .

. save . , . , .

DOM
30 DOM. - .

DOM HTML. HTML – DOM , - . querySelector , DOM .

DOM JavaScript, . DOM JavaScript. 13, DOM . , .

– elt 13. , , , , .

function elt(name, attributes) { var node = document.createElement(name); if (attributes) { for (var attr in attributes) if (attributes.hasOwnProperty(attr)) node.setAttribute(attr, attributes[attr]); } for (var i = 2; i < arguments.length; i++) { var child = arguments[i]; if (typeof child == "string") child = document.createTextNode(child); node.appendChild(child); } return node; }

, .


– createPaint, DOM, . , controls, .

var controls = Object.create(null); function createPaint(parent) { var canvas = elt("canvas", {width: 500, height: 300}); var cx = canvas.getContext("2d"); var toolbar = elt("div", {class: "toolbar"}); for (var name in controls) toolbar.appendChild(controls[name](cx)); var panel = elt("div", {class: "picturepanel"}, canvas); parent.appendChild(elt("div", null, panel, toolbar)); }

, – . – , ( fillStyle) ( lineWidth).

, , .


, – , . controls, , , . , .

var tools = Object.create(null); controls.tool = function(cx) { var select = elt("select"); for (var name in tools) select.appendChild(elt("option", null, name)); cx.canvas.addEventListener("mousedown", function(event) { if (event.which == 1) { tools[select.value](event, cx); event.preventDefault(); } }); return elt("span", null, "Tool: ", select); };

tool , "mousedown" , event context. preventDefault, .

– , . , . 13 getBoundingClientRect . , , . clientX clientY , .

function relativePos(event, element) { var rect = element.getBoundingClientRect(); return {x: Math.floor(event.clientX - rect.left), y: Math.floor(event.clientY - rect.top)}; }

"mousemove", . trackDrag .

function trackDrag(onMove, onEnd) { function end(event) { removeEventListener("mousemove", onMove); removeEventListener("mouseup", end); if (onEnd) onEnd(event); } addEventListener("mousemove", onMove); addEventListener("mouseup", end); }

. – , "mousemove", – , . .

.

tools.Line = function(event, cx, onEnd) { cx.lineCap = "round"; var pos = relativePos(event, cx.canvas); trackDrag(function(event) { cx.beginPath(); cx.moveTo(pos.x, pos.y); pos = relativePos(event, cx.canvas); cx.lineTo(pos.x, pos.y); cx.stroke(); }, onEnd); };

lineCap “round”, - , , . , . , , lineCap .

, "mousemove", , , , strokeStyle lineWidth, .

onEnd , trackDrag. , undefined, . , erase, .

tools.Erase = function(event, cx) { cx.globalCompositeOperation = "destination-out"; tools.Line(event, cx, function() { cx.globalCompositeOperation = "source-over"; }); };

globalCompositeOperation , . , "source-over", , , , . , , , .

“erase” globalCompositeOperation "destination-out", , .

. ( strokeStyle lineWidth ), . , , .


, , .

18 . . , . - . - "date", "email", "url" "number". . – “text”, , , . , , , , .

controls.color = function(cx) { var input = elt("input", {type: "color"}); input.addEventListener("change", function() { cx.fillStyle = input.value; cx.strokeStyle = input.value; }); return elt("span", null, "Color: ", input); };

color fillStyle strokeStyle .

.

controls.brushSize = function(cx) { var select = elt("select"); var sizes = [1, 2, 3, 5, 8, 12, 25, 35, 50, 75, 100]; sizes.forEach(function(size) { select.appendChild(elt("option", {value: size}, size + " pixels")); }); select.addEventListener("change", function() { cx.lineWidth = select.value; }); return elt("span", null, "Brush size: ", select); };

, , lineWidth .


, , URL . http: https:, URL , . URL , HTML :

data:text/html,<h1 style="color:red">Hello!</h1>

URL , , , . , , - .

toDataURL, URL , . . URL . , href , .

controls.save = function(cx) { var link = elt("a", {href: "/"}, "Save"); function update() { try { link.href = cx.canvas.toDataURL(); } catch (e) { if (e instanceof SecurityError) link.href = "javascript:alert(" + JSON.stringify("Can't save: " + e.toString()) + ")"; else throw e; } } link.addEventListener("mouseover", update); link.addEventListener("focus", update); return link; };

, , , , .

, URL , . .

. URL , , (. 17), , , .

( ). , .

, , , , «». , URL , «» . , .

try/catch update . «», toDataURL , SecurityError. URL javascript:. , , , .


URL. , URL .

function loadImageURL(cx, url) { var image = document.createElement("img"); image.addEventListener("load", function() { var color = cx.fillStyle, size = cx.lineWidth; cx.canvas.width = image.width; cx.canvas.height = image.height; cx.drawImage(image, 0, 0); cx.fillStyle = color; cx.strokeStyle = color; cx.lineWidth = size; }); image.src = url; }

, . - (fillStyle lineWidth), .

FileReader 18. readAsText readAsDataURL – , . , , URL , loadImageURL .

controls.openFile = function(cx) { var input = elt("input", {type: "file"}); input.addEventListener("change", function() { if (input.files.length == 0) return; var reader = new FileReader(); reader.addEventListener("load", function() { loadImageURL(cx, reader.result); }); reader.readAsDataURL(input.files[0]); }); return elt("div", null, "Open file: ", input); };

URL . , URL, “change”. , – Enter, load.

controls.openURL = function(cx) { var input = elt("input", {type: "text"}); var form = elt("form", null, "Open URL: ", input, elt("button", {type: "submit"}, "load")); form.addEventListener("submit", function(event) { event.preventDefault(); loadImageURL(cx, form.querySelector("input").value); }); return form; };

, , .


, , .

tools.Text = function(event, cx) { var text = prompt("Text:", ""); if (text) { var pos = relativePos(event, cx.canvas); cx.font = Math.max(7, cx.lineWidth) + "px sans-serif"; cx.fillText(text, pos.x, pos.y); } };

, sans-serif , . – 7 , .

- – “”. , , .

tools.Spray = function(event, cx) { var radius = cx.lineWidth / 2; var area = radius * radius * Math.PI; var dotsPerTick = Math.ceil(area / 30); var currentPos = relativePos(event, cx.canvas); var spray = setInterval(function() { for (var i = 0; i < dotsPerTick; i++) { var offset = randomPointInRadius(radius); cx.fillRect(currentPos.x + offset.x, currentPos.y + offset.y, 1, 1); } }, 25); trackDrag(function(event) { currentPos = relativePos(event, cx.canvas); }, function() { clearInterval(spray); }); };

setInterval 25 , . trackDrag , currentPos , .

, , 30. randomPointInRadius.

function randomPointInRadius(radius) { for (;;) { var x = Math.random() * 2 - 1; var y = Math.random() * 2 - 1; if (x * x + y * y <= 1) return {x: x * radius, y: y * radius}; } }

(-1,-1) (1,1). , , 1. , , .

. , Math.sin Math.cos . . , , .

. .

<link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>


. .


Rectangle, (. fillRect 16) . , , , . , .

, , . , , ?

, position: absolute, 13. , . pageX pageY , left, top, width height.

<script> tools.Rectangle = function(event, cx) { // }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>


– , , . .

. toDataURL , URL . getImageData, width, height data. data 0 255, - red, green, blue alpha ().

, , ( – ), , .

function pixelAt(cx, x, y) { var data = cx.getImageData(x, y, 1, 1); console.log(data.data); } var canvas = document.createElement("canvas"); var cx = canvas.getContext("2d"); pixelAt(cx, 10, 10); // → [0, 0, 0, 0] cx.fillStyle = "red"; cx.fillRect(10, 10, 1, 1); pixelAt(cx, 10, 10); // → [255, 0, 0, 255]

getImageData x y, , .

, . color . , fillStyle strokeStyle , .

, , CSS, rgb(R, G, B), 15.

getImageData , toDataURL – , , . try/catch alert.

<script> tools["Pick color"] = function(event, cx) { // Your code here. }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>


, , . , , , - .

, . , , , ( ), , .

, , :



, , , .

getImageData . , , . 7, , . (x,y) (x + y × width) × 4

(), () .

, , , . . - , 9. , , , , .

. , . , , .

fillRect, - , , .

<script> tools["Flood fill"] = function(event, cx) { // }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>

, . , , . , , ..

"mousedown" , , . , , "mousemove", , .

. fillStyle, strokeStyle, lineWidth .

. file, . URL .

. save . , . , .

DOM
30 DOM. - .

DOM HTML. HTML – DOM , - . querySelector , DOM .

DOM JavaScript, . DOM JavaScript. 13, DOM . , .

– elt 13. , , , , .

function elt(name, attributes) { var node = document.createElement(name); if (attributes) { for (var attr in attributes) if (attributes.hasOwnProperty(attr)) node.setAttribute(attr, attributes[attr]); } for (var i = 2; i < arguments.length; i++) { var child = arguments[i]; if (typeof child == "string") child = document.createTextNode(child); node.appendChild(child); } return node; }

, .


– createPaint, DOM, . , controls, .

var controls = Object.create(null); function createPaint(parent) { var canvas = elt("canvas", {width: 500, height: 300}); var cx = canvas.getContext("2d"); var toolbar = elt("div", {class: "toolbar"}); for (var name in controls) toolbar.appendChild(controls[name](cx)); var panel = elt("div", {class: "picturepanel"}, canvas); parent.appendChild(elt("div", null, panel, toolbar)); }

, – . – , ( fillStyle) ( lineWidth).

, , .


, – , . controls, , , . , .

var tools = Object.create(null); controls.tool = function(cx) { var select = elt("select"); for (var name in tools) select.appendChild(elt("option", null, name)); cx.canvas.addEventListener("mousedown", function(event) { if (event.which == 1) { tools[select.value](event, cx); event.preventDefault(); } }); return elt("span", null, "Tool: ", select); };

tool , "mousedown" , event context. preventDefault, .

– , . , . 13 getBoundingClientRect . , , . clientX clientY , .

function relativePos(event, element) { var rect = element.getBoundingClientRect(); return {x: Math.floor(event.clientX - rect.left), y: Math.floor(event.clientY - rect.top)}; }

"mousemove", . trackDrag .

function trackDrag(onMove, onEnd) { function end(event) { removeEventListener("mousemove", onMove); removeEventListener("mouseup", end); if (onEnd) onEnd(event); } addEventListener("mousemove", onMove); addEventListener("mouseup", end); }

. – , "mousemove", – , . .

.

tools.Line = function(event, cx, onEnd) { cx.lineCap = "round"; var pos = relativePos(event, cx.canvas); trackDrag(function(event) { cx.beginPath(); cx.moveTo(pos.x, pos.y); pos = relativePos(event, cx.canvas); cx.lineTo(pos.x, pos.y); cx.stroke(); }, onEnd); };

lineCap “round”, - , , . , . , , lineCap .

, "mousemove", , , , strokeStyle lineWidth, .

onEnd , trackDrag. , undefined, . , erase, .

tools.Erase = function(event, cx) { cx.globalCompositeOperation = "destination-out"; tools.Line(event, cx, function() { cx.globalCompositeOperation = "source-over"; }); };

globalCompositeOperation , . , "source-over", , , , . , , , .

“erase” globalCompositeOperation "destination-out", , .

. ( strokeStyle lineWidth ), . , , .


, , .

18 . . , . - . - "date", "email", "url" "number". . – “text”, , , . , , , , .

controls.color = function(cx) { var input = elt("input", {type: "color"}); input.addEventListener("change", function() { cx.fillStyle = input.value; cx.strokeStyle = input.value; }); return elt("span", null, "Color: ", input); };

color fillStyle strokeStyle .

.

controls.brushSize = function(cx) { var select = elt("select"); var sizes = [1, 2, 3, 5, 8, 12, 25, 35, 50, 75, 100]; sizes.forEach(function(size) { select.appendChild(elt("option", {value: size}, size + " pixels")); }); select.addEventListener("change", function() { cx.lineWidth = select.value; }); return elt("span", null, "Brush size: ", select); };

, , lineWidth .


, , URL . http: https:, URL , . URL , HTML :

data:text/html,<h1 style="color:red">Hello!</h1>

URL , , , . , , - .

toDataURL, URL , . . URL . , href , .

controls.save = function(cx) { var link = elt("a", {href: "/"}, "Save"); function update() { try { link.href = cx.canvas.toDataURL(); } catch (e) { if (e instanceof SecurityError) link.href = "javascript:alert(" + JSON.stringify("Can't save: " + e.toString()) + ")"; else throw e; } } link.addEventListener("mouseover", update); link.addEventListener("focus", update); return link; };

, , , , .

, URL , . .

. URL , , (. 17), , , .

( ). , .

, , , , «». , URL , «» . , .

try/catch update . «», toDataURL , SecurityError. URL javascript:. , , , .


URL. , URL .

function loadImageURL(cx, url) { var image = document.createElement("img"); image.addEventListener("load", function() { var color = cx.fillStyle, size = cx.lineWidth; cx.canvas.width = image.width; cx.canvas.height = image.height; cx.drawImage(image, 0, 0); cx.fillStyle = color; cx.strokeStyle = color; cx.lineWidth = size; }); image.src = url; }

, . - (fillStyle lineWidth), .

FileReader 18. readAsText readAsDataURL – , . , , URL , loadImageURL .

controls.openFile = function(cx) { var input = elt("input", {type: "file"}); input.addEventListener("change", function() { if (input.files.length == 0) return; var reader = new FileReader(); reader.addEventListener("load", function() { loadImageURL(cx, reader.result); }); reader.readAsDataURL(input.files[0]); }); return elt("div", null, "Open file: ", input); };

URL . , URL, “change”. , – Enter, load.

controls.openURL = function(cx) { var input = elt("input", {type: "text"}); var form = elt("form", null, "Open URL: ", input, elt("button", {type: "submit"}, "load")); form.addEventListener("submit", function(event) { event.preventDefault(); loadImageURL(cx, form.querySelector("input").value); }); return form; };

, , .


, , .

tools.Text = function(event, cx) { var text = prompt("Text:", ""); if (text) { var pos = relativePos(event, cx.canvas); cx.font = Math.max(7, cx.lineWidth) + "px sans-serif"; cx.fillText(text, pos.x, pos.y); } };

, sans-serif , . – 7 , .

- – “”. , , .

tools.Spray = function(event, cx) { var radius = cx.lineWidth / 2; var area = radius * radius * Math.PI; var dotsPerTick = Math.ceil(area / 30); var currentPos = relativePos(event, cx.canvas); var spray = setInterval(function() { for (var i = 0; i < dotsPerTick; i++) { var offset = randomPointInRadius(radius); cx.fillRect(currentPos.x + offset.x, currentPos.y + offset.y, 1, 1); } }, 25); trackDrag(function(event) { currentPos = relativePos(event, cx.canvas); }, function() { clearInterval(spray); }); };

setInterval 25 , . trackDrag , currentPos , .

, , 30. randomPointInRadius.

function randomPointInRadius(radius) { for (;;) { var x = Math.random() * 2 - 1; var y = Math.random() * 2 - 1; if (x * x + y * y <= 1) return {x: x * radius, y: y * radius}; } }

(-1,-1) (1,1). , , 1. , , .

. , Math.sin Math.cos . . , , .

. .

<link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>


. .


Rectangle, (. fillRect 16) . , , , . , .

, , . , , ?

, position: absolute, 13. , . pageX pageY , left, top, width height.

<script> tools.Rectangle = function(event, cx) { // }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>


– , , . .

. toDataURL , URL . getImageData, width, height data. data 0 255, - red, green, blue alpha ().

, , ( – ), , .

function pixelAt(cx, x, y) { var data = cx.getImageData(x, y, 1, 1); console.log(data.data); } var canvas = document.createElement("canvas"); var cx = canvas.getContext("2d"); pixelAt(cx, 10, 10); // → [0, 0, 0, 0] cx.fillStyle = "red"; cx.fillRect(10, 10, 1, 1); pixelAt(cx, 10, 10); // → [255, 0, 0, 255]

getImageData x y, , .

, . color . , fillStyle strokeStyle , .

, , CSS, rgb(R, G, B), 15.

getImageData , toDataURL – , , . try/catch alert.

<script> tools["Pick color"] = function(event, cx) { // Your code here. }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>


, , . , , , - .

, . , , , ( ), , .

, , :



, , , .

getImageData . , , . 7, , . (x,y) (x + y × width) × 4

(), () .

, , , . . - , 9. , , , , .

. , . , , .

fillRect, - , , .

<script> tools["Flood fill"] = function(event, cx) { // }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>

, . , , . , , ..

"mousedown" , , . , , "mousemove", , .

. fillStyle, strokeStyle, lineWidth .

. file, . URL .

. save . , . , .

DOM
30 DOM. - .

DOM HTML. HTML – DOM , - . querySelector , DOM .

DOM JavaScript, . DOM JavaScript. 13, DOM . , .

– elt 13. , , , , .

function elt(name, attributes) { var node = document.createElement(name); if (attributes) { for (var attr in attributes) if (attributes.hasOwnProperty(attr)) node.setAttribute(attr, attributes[attr]); } for (var i = 2; i < arguments.length; i++) { var child = arguments[i]; if (typeof child == "string") child = document.createTextNode(child); node.appendChild(child); } return node; }

, .


– createPaint, DOM, . , controls, .

var controls = Object.create(null); function createPaint(parent) { var canvas = elt("canvas", {width: 500, height: 300}); var cx = canvas.getContext("2d"); var toolbar = elt("div", {class: "toolbar"}); for (var name in controls) toolbar.appendChild(controls[name](cx)); var panel = elt("div", {class: "picturepanel"}, canvas); parent.appendChild(elt("div", null, panel, toolbar)); }

, – . – , ( fillStyle) ( lineWidth).

, , .


, – , . controls, , , . , .

var tools = Object.create(null); controls.tool = function(cx) { var select = elt("select"); for (var name in tools) select.appendChild(elt("option", null, name)); cx.canvas.addEventListener("mousedown", function(event) { if (event.which == 1) { tools[select.value](event, cx); event.preventDefault(); } }); return elt("span", null, "Tool: ", select); };

tool , "mousedown" , event context. preventDefault, .

– , . , . 13 getBoundingClientRect . , , . clientX clientY , .

function relativePos(event, element) { var rect = element.getBoundingClientRect(); return {x: Math.floor(event.clientX - rect.left), y: Math.floor(event.clientY - rect.top)}; }

"mousemove", . trackDrag .

function trackDrag(onMove, onEnd) { function end(event) { removeEventListener("mousemove", onMove); removeEventListener("mouseup", end); if (onEnd) onEnd(event); } addEventListener("mousemove", onMove); addEventListener("mouseup", end); }

. – , "mousemove", – , . .

.

tools.Line = function(event, cx, onEnd) { cx.lineCap = "round"; var pos = relativePos(event, cx.canvas); trackDrag(function(event) { cx.beginPath(); cx.moveTo(pos.x, pos.y); pos = relativePos(event, cx.canvas); cx.lineTo(pos.x, pos.y); cx.stroke(); }, onEnd); };

lineCap “round”, - , , . , . , , lineCap .

, "mousemove", , , , strokeStyle lineWidth, .

onEnd , trackDrag. , undefined, . , erase, .

tools.Erase = function(event, cx) { cx.globalCompositeOperation = "destination-out"; tools.Line(event, cx, function() { cx.globalCompositeOperation = "source-over"; }); };

globalCompositeOperation , . , "source-over", , , , . , , , .

“erase” globalCompositeOperation "destination-out", , .

. ( strokeStyle lineWidth ), . , , .


, , .

18 . . , . - . - "date", "email", "url" "number". . – “text”, , , . , , , , .

controls.color = function(cx) { var input = elt("input", {type: "color"}); input.addEventListener("change", function() { cx.fillStyle = input.value; cx.strokeStyle = input.value; }); return elt("span", null, "Color: ", input); };

color fillStyle strokeStyle .

.

controls.brushSize = function(cx) { var select = elt("select"); var sizes = [1, 2, 3, 5, 8, 12, 25, 35, 50, 75, 100]; sizes.forEach(function(size) { select.appendChild(elt("option", {value: size}, size + " pixels")); }); select.addEventListener("change", function() { cx.lineWidth = select.value; }); return elt("span", null, "Brush size: ", select); };

, , lineWidth .


, , URL . http: https:, URL , . URL , HTML :

data:text/html,<h1 style="color:red">Hello!</h1>

URL , , , . , , - .

toDataURL, URL , . . URL . , href , .

controls.save = function(cx) { var link = elt("a", {href: "/"}, "Save"); function update() { try { link.href = cx.canvas.toDataURL(); } catch (e) { if (e instanceof SecurityError) link.href = "javascript:alert(" + JSON.stringify("Can't save: " + e.toString()) + ")"; else throw e; } } link.addEventListener("mouseover", update); link.addEventListener("focus", update); return link; };

, , , , .

, URL , . .

. URL , , (. 17), , , .

( ). , .

, , , , «». , URL , «» . , .

try/catch update . «», toDataURL , SecurityError. URL javascript:. , , , .


URL. , URL .

function loadImageURL(cx, url) { var image = document.createElement("img"); image.addEventListener("load", function() { var color = cx.fillStyle, size = cx.lineWidth; cx.canvas.width = image.width; cx.canvas.height = image.height; cx.drawImage(image, 0, 0); cx.fillStyle = color; cx.strokeStyle = color; cx.lineWidth = size; }); image.src = url; }

, . - (fillStyle lineWidth), .

FileReader 18. readAsText readAsDataURL – , . , , URL , loadImageURL .

controls.openFile = function(cx) { var input = elt("input", {type: "file"}); input.addEventListener("change", function() { if (input.files.length == 0) return; var reader = new FileReader(); reader.addEventListener("load", function() { loadImageURL(cx, reader.result); }); reader.readAsDataURL(input.files[0]); }); return elt("div", null, "Open file: ", input); };

URL . , URL, “change”. , – Enter, load.

controls.openURL = function(cx) { var input = elt("input", {type: "text"}); var form = elt("form", null, "Open URL: ", input, elt("button", {type: "submit"}, "load")); form.addEventListener("submit", function(event) { event.preventDefault(); loadImageURL(cx, form.querySelector("input").value); }); return form; };

, , .


, , .

tools.Text = function(event, cx) { var text = prompt("Text:", ""); if (text) { var pos = relativePos(event, cx.canvas); cx.font = Math.max(7, cx.lineWidth) + "px sans-serif"; cx.fillText(text, pos.x, pos.y); } };

, sans-serif , . – 7 , .

- – “”. , , .

tools.Spray = function(event, cx) { var radius = cx.lineWidth / 2; var area = radius * radius * Math.PI; var dotsPerTick = Math.ceil(area / 30); var currentPos = relativePos(event, cx.canvas); var spray = setInterval(function() { for (var i = 0; i < dotsPerTick; i++) { var offset = randomPointInRadius(radius); cx.fillRect(currentPos.x + offset.x, currentPos.y + offset.y, 1, 1); } }, 25); trackDrag(function(event) { currentPos = relativePos(event, cx.canvas); }, function() { clearInterval(spray); }); };

setInterval 25 , . trackDrag , currentPos , .

, , 30. randomPointInRadius.

function randomPointInRadius(radius) { for (;;) { var x = Math.random() * 2 - 1; var y = Math.random() * 2 - 1; if (x * x + y * y <= 1) return {x: x * radius, y: y * radius}; } }

(-1,-1) (1,1). , , 1. , , .

. , Math.sin Math.cos . . , , .

. .

<link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>


. .


Rectangle, (. fillRect 16) . , , , . , .

, , . , , ?

, position: absolute, 13. , . pageX pageY , left, top, width height.

<script> tools.Rectangle = function(event, cx) { // }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>


– , , . .

. toDataURL , URL . getImageData, width, height data. data 0 255, - red, green, blue alpha ().

, , ( – ), , .

function pixelAt(cx, x, y) { var data = cx.getImageData(x, y, 1, 1); console.log(data.data); } var canvas = document.createElement("canvas"); var cx = canvas.getContext("2d"); pixelAt(cx, 10, 10); // → [0, 0, 0, 0] cx.fillStyle = "red"; cx.fillRect(10, 10, 1, 1); pixelAt(cx, 10, 10); // → [255, 0, 0, 255]

getImageData x y, , .

, . color . , fillStyle strokeStyle , .

, , CSS, rgb(R, G, B), 15.

getImageData , toDataURL – , , . try/catch alert.

<script> tools["Pick color"] = function(event, cx) { // Your code here. }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>


, , . , , , - .

, . , , , ( ), , .

, , :



, , , .

getImageData . , , . 7, , . (x,y) (x + y × width) × 4

(), () .

, , , . . - , 9. , , , , .

. , . , , .

fillRect, - , , .

<script> tools["Flood fill"] = function(event, cx) { // }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>

 ,      .    ,     ,      .     ,   ,    .. 
 
      "mousedown"  ,   ,   .  , ,    "mousemove",      ,           . 
 
         .         fillStyle, strokeStyle,  lineWidth     . 
 
       .    file,       .   URL     . 
 
    .  save       .    ,       .   ,   . 
 
  DOM 
       30  DOM.   -  . 
 
      DOM  HTML.     HTML    –   DOM        ,    -   .       querySelector   ,     DOM  . 
 
      DOM      JavaScript,   .       DOM   JavaScript.      13,      DOM  .      ,    . 
 
   –    elt   13.        ,     ,  ,    ,      . 
 
 function elt(name, attributes) { var node = document.createElement(name); if (attributes) { for (var attr in attributes) if (attributes.hasOwnProperty(attr)) node.setAttribute(attr, attributes[attr]); } for (var i = 2; i < arguments.length; i++) { var child = arguments[i]; if (typeof child == "string") child = document.createTextNode(child); node.appendChild(child); } return node; } 
 
       ,       . 
 
  
    –  createPaint,      DOM,     .      ,    controls,           . 
 
 var controls = Object.create(null); function createPaint(parent) { var canvas = elt("canvas", {width: 500, height: 300}); var cx = canvas.getContext("2d"); var toolbar = elt("div", {class: "toolbar"}); for (var name in controls) toolbar.appendChild(controls[name](cx)); var panel = elt("div", {class: "picturepanel"}, canvas); parent.appendChild(elt("div", null, panel, toolbar)); } 
 
           ,    –   .        –    ,   (  fillStyle)    (  lineWidth). 
 
          ,      ,     . 
 
   
   ,    –  ,    .      controls,        ,           ,       .       ,          . 
 
 var tools = Object.create(null); controls.tool = function(cx) { var select = elt("select"); for (var name in tools) select.appendChild(elt("option", null, name)); cx.canvas.addEventListener("mousedown", function(event) { if (event.which == 1) { tools[select.value](event, cx); event.preventDefault(); } }); return elt("span", null, "Tool: ", select); }; 
 
   tool        ,    "mousedown"          ,    event  context.    preventDefault,          . 
 
    – ,     .   ,           .    13   getBoundingClientRect     .  ,   ,     .    clientX  clientY      ,                . 
 
 function relativePos(event, element) { var rect = element.getBoundingClientRect(); return {x: Math.floor(event.clientX - rect.left), y: Math.floor(event.clientY - rect.top)}; } 
 
       "mousemove",    .  trackDrag       . 
 
 function trackDrag(onMove, onEnd) { function end(event) { removeEventListener("mousemove", onMove); removeEventListener("mouseup", end); if (onEnd) onEnd(event); } addEventListener("mousemove", onMove); addEventListener("mouseup", end); } 
 
    .  – ,      "mousemove",   – ,     .      . 
 
           . 
 
 tools.Line = function(event, cx, onEnd) { cx.lineCap = "round"; var pos = relativePos(event, cx.canvas); trackDrag(function(event) { cx.beginPath(); cx.moveTo(pos.x, pos.y); pos = relativePos(event, cx.canvas); cx.lineTo(pos.x, pos.y); cx.stroke(); }, onEnd); }; 
 
      lineCap  “round”, -      ,   ,     .     ,      .     ,      ,     lineCap  . 
 
 ,    "mousemove",  ,   ,         ,      strokeStyle  lineWidth,     . 
 
  onEnd   ,  trackDrag.        ,        undefined,       .        ,  erase,      . 
 
 tools.Erase = function(event, cx) { cx.globalCompositeOperation = "destination-out"; tools.Line(event, cx, function() { cx.globalCompositeOperation = "source-over"; }); }; 
 
  globalCompositeOperation   ,        .  ,   "source-over",  ,  ,  ,   .   ,    ,     ,   . 
 
  “erase”  globalCompositeOperation  "destination-out",    ,     . 
 
         .          (     strokeStyle  lineWidth  ),   . ,   ,  . 
 
     
 ,              ,      . 
 
   18      .        .          ,            .    - .   - "date", "email", "url"  "number".      .      – “text”,     ,     ,       . ,   ,       ,       ,       . 
 
 controls.color = function(cx) { var input = elt("input", {type: "color"}); input.addEventListener("change", function() { cx.fillStyle = input.value; cx.strokeStyle = input.value; }); return elt("span", null, "Color: ", input); }; 
 
     color     fillStyle  strokeStyle    . 
 
      . 
 
 controls.brushSize = function(cx) { var select = elt("select"); var sizes = [1, 2, 3, 5, 8, 12, 25, 35, 50, 75, 100]; sizes.forEach(function(size) { select.appendChild(elt("option", {value: size}, size + " pixels")); }); select.addEventListener("change", function() { cx.lineWidth = select.value; }); return elt("span", null, "Brush size: ", select); }; 
 
       ,    ,    lineWidth    . 
 
  
  ,     ,      URL  .     http:  https:, URL      ,      .  URL  ,   HTML : 
 
 data:text/html,<h1 style="color:red">Hello!</h1> 
 
  URL    , , ,       .           ,  ,      - . 
 
       toDataURL,   URL  ,        .            .        URL   .       ,      href  ,            . 
 
 controls.save = function(cx) { var link = elt("a", {href: "/"}, "Save"); function update() { try { link.href = cx.canvas.toDataURL(); } catch (e) { if (e instanceof SecurityError) link.href = "javascript:alert(" + JSON.stringify("Can't save: " + e.toString()) + ")"; else throw e; } } link.addEventListener("mouseover", update); link.addEventListener("focus", update); return link; }; 
 
  ,          ,       ,      ,     . 
 
     ,      URL  ,    .       . 
 
           .     URL   ,      ,       (.  17),    ,    ,    . 
 
        (   ).        ,      . 
 
     ,  ,  ,    ,     «».  ,  URL  ,     «» .    ,     . 
 
     try/catch   update   .   «»,  toDataURL  ,   SecurityError.           URL   javascript:.     ,   ,     ,   . 
 
   
              URL.    ,      URL     . 
 
 function loadImageURL(cx, url) { var image = document.createElement("img"); image.addEventListener("load", function() { var color = cx.fillStyle, size = cx.lineWidth; cx.canvas.width = image.width; cx.canvas.height = image.height; cx.drawImage(image, 0, 0); cx.fillStyle = color; cx.strokeStyle = color; cx.lineWidth = size; }); image.src = url; } 
 
     ,    . -          (fillStyle  lineWidth),              . 
 
         FileReader   18.     readAsText        readAsDataURL –   ,   .   ,   ,  URL  ,     loadImageURL    . 
 
 controls.openFile = function(cx) { var input = elt("input", {type: "file"}); input.addEventListener("change", function() { if (input.files.length == 0) return; var reader = new FileReader(); reader.addEventListener("load", function() { loadImageURL(cx, reader.result); }); reader.readAsDataURL(input.files[0]); }); return elt("div", null, "Open file: ", input); }; 
 
    URL  .       ,       URL,        “change”.         ,     –    Enter,     load. 
 
 controls.openURL = function(cx) { var input = elt("input", {type: "text"}); var form = elt("form", null, "Open URL: ", input, elt("button", {type: "submit"}, "load")); form.addEventListener("submit", function(event) { event.preventDefault(); loadImageURL(cx, form.querySelector("input").value); }); return form; }; 
 
      ,   ,      . 
 
  
        ,    ,     . 
 
 tools.Text = function(event, cx) { var text = prompt("Text:", ""); if (text) { var pos = relativePos(event, cx.canvas); cx.font = Math.max(7, cx.lineWidth) + "px sans-serif"; cx.fillText(text, pos.x, pos.y); } }; 
 
          ,        sans-serif   ,    .   – 7 ,      . 
 
      - – “”.      ,    ,            . 
 
 tools.Spray = function(event, cx) { var radius = cx.lineWidth / 2; var area = radius * radius * Math.PI; var dotsPerTick = Math.ceil(area / 30); var currentPos = relativePos(event, cx.canvas); var spray = setInterval(function() { for (var i = 0; i < dotsPerTick; i++) { var offset = randomPointInRadius(radius); cx.fillRect(currentPos.x + offset.x, currentPos.y + offset.y, 1, 1); } }, 25); trackDrag(function(event) { currentPos = relativePos(event, cx.canvas); }, function() { clearInterval(spray); }); }; 
 
   setInterval      25 ,    .  trackDrag   ,  currentPos     ,       . 
 
  ,         ,           30.         randomPointInRadius. 
 
 function randomPointInRadius(radius) { for (;;) { var x = Math.random() * 2 - 1; var y = Math.random() * 2 - 1; if (x * x + y * y <= 1) return {x: x * radius, y: y * radius}; } } 
 
        (-1,-1)  (1,1).   ,  ,         1.    ,    ,   . 
 
      .       ,        Math.sin  Math.cos   .            .    ,    ,   . 
 
      .    . 
 
 <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body> 
 
  
        .    . 
 
  
   Rectangle,   (.  fillRect   16)  .      ,     ,    ,    . ,         . 
 
   ,  ,        .           ,       ,    ? 
 
   ,    position: absolute,      13.   ,      .  pageX  pageY          ,      left, top, width  height. 
 
 <script> tools.Rectangle = function(event, cx) { //   }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body> 
 
   
      –  ,        ,    .   . 
 
        .  toDataURL    ,       URL   .       getImageData,          width, height  data.   data     0  255,        - red, green, blue  alpha (). 
 
        ,  ,    (  –  ),   ,      . 
 
 function pixelAt(cx, x, y) { var data = cx.getImageData(x, y, 1, 1); console.log(data.data); } var canvas = document.createElement("canvas"); var cx = canvas.getContext("2d"); pixelAt(cx, 10, 10); // → [0, 0, 0, 0] cx.fillStyle = "red"; cx.fillRect(10, 10, 1, 1); pixelAt(cx, 10, 10); // → [255, 0, 0, 255] 
 
  getImageData     x  y,    ,      . 
 
     ,         .        color   .  ,  fillStyle  strokeStyle    ,   . 
 
 ,      ,   CSS,    rgb(R, G, B),      15. 
 
  getImageData    ,   toDataURL –   ,      ,    .   try/catch        alert. 
 
 <script> tools["Pick color"] = function(event, cx) { // Your code here. }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body> 
 
  
    ,  ,        . ,           ,   ,     -   . 
 
              ,    .       ,      ,      ,         (   ),    ,     . 
 
     , ,       : 
 
  
 
          ,   ,      ,   . 
 
    getImageData    .  ,       ,          .           7,  ,      .       (x,y)    (x + y × width) × 4 
 
      (),          () . 
 
            , ,   ,       .         .      -      ,    9.        ,    ,       ,    ,    . 
 
      .      ,       .  ,  ,    . 
 
       fillRect,   -  ,  ,     . 
 
 <script> tools["Flood fill"] = function(event, cx) { //   }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body> 

, . , , . , , ..

"mousedown" , , . , , "mousemove", , .

. fillStyle, strokeStyle, lineWidth .

. file, . URL .

. save . , . , .

DOM
30 DOM. - .

DOM HTML. HTML – DOM , - . querySelector , DOM .

DOM JavaScript, . DOM JavaScript. 13, DOM . , .

– elt 13. , , , , .

function elt(name, attributes) { var node = document.createElement(name); if (attributes) { for (var attr in attributes) if (attributes.hasOwnProperty(attr)) node.setAttribute(attr, attributes[attr]); } for (var i = 2; i < arguments.length; i++) { var child = arguments[i]; if (typeof child == "string") child = document.createTextNode(child); node.appendChild(child); } return node; }

, .


– createPaint, DOM, . , controls, .

var controls = Object.create(null); function createPaint(parent) { var canvas = elt("canvas", {width: 500, height: 300}); var cx = canvas.getContext("2d"); var toolbar = elt("div", {class: "toolbar"}); for (var name in controls) toolbar.appendChild(controls[name](cx)); var panel = elt("div", {class: "picturepanel"}, canvas); parent.appendChild(elt("div", null, panel, toolbar)); }

, – . – , ( fillStyle) ( lineWidth).

, , .


, – , . controls, , , . , .

var tools = Object.create(null); controls.tool = function(cx) { var select = elt("select"); for (var name in tools) select.appendChild(elt("option", null, name)); cx.canvas.addEventListener("mousedown", function(event) { if (event.which == 1) { tools[select.value](event, cx); event.preventDefault(); } }); return elt("span", null, "Tool: ", select); };

tool , "mousedown" , event context. preventDefault, .

– , . , . 13 getBoundingClientRect . , , . clientX clientY , .

function relativePos(event, element) { var rect = element.getBoundingClientRect(); return {x: Math.floor(event.clientX - rect.left), y: Math.floor(event.clientY - rect.top)}; }

"mousemove", . trackDrag .

function trackDrag(onMove, onEnd) { function end(event) { removeEventListener("mousemove", onMove); removeEventListener("mouseup", end); if (onEnd) onEnd(event); } addEventListener("mousemove", onMove); addEventListener("mouseup", end); }

. – , "mousemove", – , . .

.

tools.Line = function(event, cx, onEnd) { cx.lineCap = "round"; var pos = relativePos(event, cx.canvas); trackDrag(function(event) { cx.beginPath(); cx.moveTo(pos.x, pos.y); pos = relativePos(event, cx.canvas); cx.lineTo(pos.x, pos.y); cx.stroke(); }, onEnd); };

lineCap “round”, - , , . , . , , lineCap .

, "mousemove", , , , strokeStyle lineWidth, .

onEnd , trackDrag. , undefined, . , erase, .

tools.Erase = function(event, cx) { cx.globalCompositeOperation = "destination-out"; tools.Line(event, cx, function() { cx.globalCompositeOperation = "source-over"; }); };

globalCompositeOperation , . , "source-over", , , , . , , , .

“erase” globalCompositeOperation "destination-out", , .

. ( strokeStyle lineWidth ), . , , .


, , .

18 . . , . - . - "date", "email", "url" "number". . – “text”, , , . , , , , .

controls.color = function(cx) { var input = elt("input", {type: "color"}); input.addEventListener("change", function() { cx.fillStyle = input.value; cx.strokeStyle = input.value; }); return elt("span", null, "Color: ", input); };

color fillStyle strokeStyle .

.

controls.brushSize = function(cx) { var select = elt("select"); var sizes = [1, 2, 3, 5, 8, 12, 25, 35, 50, 75, 100]; sizes.forEach(function(size) { select.appendChild(elt("option", {value: size}, size + " pixels")); }); select.addEventListener("change", function() { cx.lineWidth = select.value; }); return elt("span", null, "Brush size: ", select); };

, , lineWidth .


, , URL . http: https:, URL , . URL , HTML :

data:text/html,<h1 style="color:red">Hello!</h1>

URL , , , . , , - .

toDataURL, URL , . . URL . , href , .

controls.save = function(cx) { var link = elt("a", {href: "/"}, "Save"); function update() { try { link.href = cx.canvas.toDataURL(); } catch (e) { if (e instanceof SecurityError) link.href = "javascript:alert(" + JSON.stringify("Can't save: " + e.toString()) + ")"; else throw e; } } link.addEventListener("mouseover", update); link.addEventListener("focus", update); return link; };

, , , , .

, URL , . .

. URL , , (. 17), , , .

( ). , .

, , , , «». , URL , «» . , .

try/catch update . «», toDataURL , SecurityError. URL javascript:. , , , .


URL. , URL .

function loadImageURL(cx, url) { var image = document.createElement("img"); image.addEventListener("load", function() { var color = cx.fillStyle, size = cx.lineWidth; cx.canvas.width = image.width; cx.canvas.height = image.height; cx.drawImage(image, 0, 0); cx.fillStyle = color; cx.strokeStyle = color; cx.lineWidth = size; }); image.src = url; }

, . - (fillStyle lineWidth), .

FileReader 18. readAsText readAsDataURL – , . , , URL , loadImageURL .

controls.openFile = function(cx) { var input = elt("input", {type: "file"}); input.addEventListener("change", function() { if (input.files.length == 0) return; var reader = new FileReader(); reader.addEventListener("load", function() { loadImageURL(cx, reader.result); }); reader.readAsDataURL(input.files[0]); }); return elt("div", null, "Open file: ", input); };

URL . , URL, “change”. , – Enter, load.

controls.openURL = function(cx) { var input = elt("input", {type: "text"}); var form = elt("form", null, "Open URL: ", input, elt("button", {type: "submit"}, "load")); form.addEventListener("submit", function(event) { event.preventDefault(); loadImageURL(cx, form.querySelector("input").value); }); return form; };

, , .


, , .

tools.Text = function(event, cx) { var text = prompt("Text:", ""); if (text) { var pos = relativePos(event, cx.canvas); cx.font = Math.max(7, cx.lineWidth) + "px sans-serif"; cx.fillText(text, pos.x, pos.y); } };

, sans-serif , . – 7 , .

- – “”. , , .

tools.Spray = function(event, cx) { var radius = cx.lineWidth / 2; var area = radius * radius * Math.PI; var dotsPerTick = Math.ceil(area / 30); var currentPos = relativePos(event, cx.canvas); var spray = setInterval(function() { for (var i = 0; i < dotsPerTick; i++) { var offset = randomPointInRadius(radius); cx.fillRect(currentPos.x + offset.x, currentPos.y + offset.y, 1, 1); } }, 25); trackDrag(function(event) { currentPos = relativePos(event, cx.canvas); }, function() { clearInterval(spray); }); };

setInterval 25 , . trackDrag , currentPos , .

, , 30. randomPointInRadius.

function randomPointInRadius(radius) { for (;;) { var x = Math.random() * 2 - 1; var y = Math.random() * 2 - 1; if (x * x + y * y <= 1) return {x: x * radius, y: y * radius}; } }

(-1,-1) (1,1). , , 1. , , .

. , Math.sin Math.cos . . , , .

. .

<link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>


. .


Rectangle, (. fillRect 16) . , , , . , .

, , . , , ?

, position: absolute, 13. , . pageX pageY , left, top, width height.

<script> tools.Rectangle = function(event, cx) { // }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>


– , , . .

. toDataURL , URL . getImageData, width, height data. data 0 255, - red, green, blue alpha ().

, , ( – ), , .

function pixelAt(cx, x, y) { var data = cx.getImageData(x, y, 1, 1); console.log(data.data); } var canvas = document.createElement("canvas"); var cx = canvas.getContext("2d"); pixelAt(cx, 10, 10); // → [0, 0, 0, 0] cx.fillStyle = "red"; cx.fillRect(10, 10, 1, 1); pixelAt(cx, 10, 10); // → [255, 0, 0, 255]

getImageData x y, , .

, . color . , fillStyle strokeStyle , .

, , CSS, rgb(R, G, B), 15.

getImageData , toDataURL – , , . try/catch alert.

<script> tools["Pick color"] = function(event, cx) { // Your code here. }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>


, , . , , , - .

, . , , , ( ), , .

, , :



, , , .

getImageData . , , . 7, , . (x,y) (x + y × width) × 4

(), () .

, , , . . - , 9. , , , , .

. , . , , .

fillRect, - , , .

<script> tools["Flood fill"] = function(event, cx) { // }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>

 ,      .    ,     ,      .     ,   ,    .. 
 
      "mousedown"  ,   ,   .  , ,    "mousemove",      ,           . 
 
         .         fillStyle, strokeStyle,  lineWidth     . 
 
       .    file,       .   URL     . 
 
    .  save       .    ,       .   ,   . 
 
  DOM 
       30  DOM.   -  . 
 
      DOM  HTML.     HTML    –   DOM        ,    -   .       querySelector   ,     DOM  . 
 
      DOM      JavaScript,   .       DOM   JavaScript.      13,      DOM  .      ,    . 
 
   –    elt   13.        ,     ,  ,    ,      . 
 
 function elt(name, attributes) { var node = document.createElement(name); if (attributes) { for (var attr in attributes) if (attributes.hasOwnProperty(attr)) node.setAttribute(attr, attributes[attr]); } for (var i = 2; i < arguments.length; i++) { var child = arguments[i]; if (typeof child == "string") child = document.createTextNode(child); node.appendChild(child); } return node; } 
 
       ,       . 
 
  
    –  createPaint,      DOM,     .      ,    controls,           . 
 
 var controls = Object.create(null); function createPaint(parent) { var canvas = elt("canvas", {width: 500, height: 300}); var cx = canvas.getContext("2d"); var toolbar = elt("div", {class: "toolbar"}); for (var name in controls) toolbar.appendChild(controls[name](cx)); var panel = elt("div", {class: "picturepanel"}, canvas); parent.appendChild(elt("div", null, panel, toolbar)); } 
 
           ,    –   .        –    ,   (  fillStyle)    (  lineWidth). 
 
          ,      ,     . 
 
   
   ,    –  ,    .      controls,        ,           ,       .       ,          . 
 
 var tools = Object.create(null); controls.tool = function(cx) { var select = elt("select"); for (var name in tools) select.appendChild(elt("option", null, name)); cx.canvas.addEventListener("mousedown", function(event) { if (event.which == 1) { tools[select.value](event, cx); event.preventDefault(); } }); return elt("span", null, "Tool: ", select); }; 
 
   tool        ,    "mousedown"          ,    event  context.    preventDefault,          . 
 
    – ,     .   ,           .    13   getBoundingClientRect     .  ,   ,     .    clientX  clientY      ,                . 
 
 function relativePos(event, element) { var rect = element.getBoundingClientRect(); return {x: Math.floor(event.clientX - rect.left), y: Math.floor(event.clientY - rect.top)}; } 
 
       "mousemove",    .  trackDrag       . 
 
 function trackDrag(onMove, onEnd) { function end(event) { removeEventListener("mousemove", onMove); removeEventListener("mouseup", end); if (onEnd) onEnd(event); } addEventListener("mousemove", onMove); addEventListener("mouseup", end); } 
 
    .  – ,      "mousemove",   – ,     .      . 
 
           . 
 
 tools.Line = function(event, cx, onEnd) { cx.lineCap = "round"; var pos = relativePos(event, cx.canvas); trackDrag(function(event) { cx.beginPath(); cx.moveTo(pos.x, pos.y); pos = relativePos(event, cx.canvas); cx.lineTo(pos.x, pos.y); cx.stroke(); }, onEnd); }; 
 
      lineCap  “round”, -      ,   ,     .     ,      .     ,      ,     lineCap  . 
 
 ,    "mousemove",  ,   ,         ,      strokeStyle  lineWidth,     . 
 
  onEnd   ,  trackDrag.        ,        undefined,       .        ,  erase,      . 
 
 tools.Erase = function(event, cx) { cx.globalCompositeOperation = "destination-out"; tools.Line(event, cx, function() { cx.globalCompositeOperation = "source-over"; }); }; 
 
  globalCompositeOperation   ,        .  ,   "source-over",  ,  ,  ,   .   ,    ,     ,   . 
 
  “erase”  globalCompositeOperation  "destination-out",    ,     . 
 
         .          (     strokeStyle  lineWidth  ),   . ,   ,  . 
 
     
 ,              ,      . 
 
   18      .        .          ,            .    - .   - "date", "email", "url"  "number".      .      – “text”,     ,     ,       . ,   ,       ,       ,       . 
 
 controls.color = function(cx) { var input = elt("input", {type: "color"}); input.addEventListener("change", function() { cx.fillStyle = input.value; cx.strokeStyle = input.value; }); return elt("span", null, "Color: ", input); }; 
 
     color     fillStyle  strokeStyle    . 
 
      . 
 
 controls.brushSize = function(cx) { var select = elt("select"); var sizes = [1, 2, 3, 5, 8, 12, 25, 35, 50, 75, 100]; sizes.forEach(function(size) { select.appendChild(elt("option", {value: size}, size + " pixels")); }); select.addEventListener("change", function() { cx.lineWidth = select.value; }); return elt("span", null, "Brush size: ", select); }; 
 
       ,    ,    lineWidth    . 
 
  
  ,     ,      URL  .     http:  https:, URL      ,      .  URL  ,   HTML : 
 
 data:text/html,<h1 style="color:red">Hello!</h1> 
 
  URL    , , ,       .           ,  ,      - . 
 
       toDataURL,   URL  ,        .            .        URL   .       ,      href  ,            . 
 
 controls.save = function(cx) { var link = elt("a", {href: "/"}, "Save"); function update() { try { link.href = cx.canvas.toDataURL(); } catch (e) { if (e instanceof SecurityError) link.href = "javascript:alert(" + JSON.stringify("Can't save: " + e.toString()) + ")"; else throw e; } } link.addEventListener("mouseover", update); link.addEventListener("focus", update); return link; }; 
 
  ,          ,       ,      ,     . 
 
     ,      URL  ,    .       . 
 
           .     URL   ,      ,       (.  17),    ,    ,    . 
 
        (   ).        ,      . 
 
     ,  ,  ,    ,     «».  ,  URL  ,     «» .    ,     . 
 
     try/catch   update   .   «»,  toDataURL  ,   SecurityError.           URL   javascript:.     ,   ,     ,   . 
 
   
              URL.    ,      URL     . 
 
 function loadImageURL(cx, url) { var image = document.createElement("img"); image.addEventListener("load", function() { var color = cx.fillStyle, size = cx.lineWidth; cx.canvas.width = image.width; cx.canvas.height = image.height; cx.drawImage(image, 0, 0); cx.fillStyle = color; cx.strokeStyle = color; cx.lineWidth = size; }); image.src = url; } 
 
     ,    . -          (fillStyle  lineWidth),              . 
 
         FileReader   18.     readAsText        readAsDataURL –   ,   .   ,   ,  URL  ,     loadImageURL    . 
 
 controls.openFile = function(cx) { var input = elt("input", {type: "file"}); input.addEventListener("change", function() { if (input.files.length == 0) return; var reader = new FileReader(); reader.addEventListener("load", function() { loadImageURL(cx, reader.result); }); reader.readAsDataURL(input.files[0]); }); return elt("div", null, "Open file: ", input); }; 
 
    URL  .       ,       URL,        “change”.         ,     –    Enter,     load. 
 
 controls.openURL = function(cx) { var input = elt("input", {type: "text"}); var form = elt("form", null, "Open URL: ", input, elt("button", {type: "submit"}, "load")); form.addEventListener("submit", function(event) { event.preventDefault(); loadImageURL(cx, form.querySelector("input").value); }); return form; }; 
 
      ,   ,      . 
 
  
        ,    ,     . 
 
 tools.Text = function(event, cx) { var text = prompt("Text:", ""); if (text) { var pos = relativePos(event, cx.canvas); cx.font = Math.max(7, cx.lineWidth) + "px sans-serif"; cx.fillText(text, pos.x, pos.y); } }; 
 
          ,        sans-serif   ,    .   – 7 ,      . 
 
      - – “”.      ,    ,            . 
 
 tools.Spray = function(event, cx) { var radius = cx.lineWidth / 2; var area = radius * radius * Math.PI; var dotsPerTick = Math.ceil(area / 30); var currentPos = relativePos(event, cx.canvas); var spray = setInterval(function() { for (var i = 0; i < dotsPerTick; i++) { var offset = randomPointInRadius(radius); cx.fillRect(currentPos.x + offset.x, currentPos.y + offset.y, 1, 1); } }, 25); trackDrag(function(event) { currentPos = relativePos(event, cx.canvas); }, function() { clearInterval(spray); }); }; 
 
   setInterval      25 ,    .  trackDrag   ,  currentPos     ,       . 
 
  ,         ,           30.         randomPointInRadius. 
 
 function randomPointInRadius(radius) { for (;;) { var x = Math.random() * 2 - 1; var y = Math.random() * 2 - 1; if (x * x + y * y <= 1) return {x: x * radius, y: y * radius}; } } 
 
        (-1,-1)  (1,1).   ,  ,         1.    ,    ,   . 
 
      .       ,        Math.sin  Math.cos   .            .    ,    ,   . 
 
      .    . 
 
 <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body> 
 
  
        .    . 
 
  
   Rectangle,   (.  fillRect   16)  .      ,     ,    ,    . ,         . 
 
   ,  ,        .           ,       ,    ? 
 
   ,    position: absolute,      13.   ,      .  pageX  pageY          ,      left, top, width  height. 
 
 <script> tools.Rectangle = function(event, cx) { //   }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body> 
 
   
      –  ,        ,    .   . 
 
        .  toDataURL    ,       URL   .       getImageData,          width, height  data.   data     0  255,        - red, green, blue  alpha (). 
 
        ,  ,    (  –  ),   ,      . 
 
 function pixelAt(cx, x, y) { var data = cx.getImageData(x, y, 1, 1); console.log(data.data); } var canvas = document.createElement("canvas"); var cx = canvas.getContext("2d"); pixelAt(cx, 10, 10); // → [0, 0, 0, 0] cx.fillStyle = "red"; cx.fillRect(10, 10, 1, 1); pixelAt(cx, 10, 10); // → [255, 0, 0, 255] 
 
  getImageData     x  y,    ,      . 
 
     ,         .        color   .  ,  fillStyle  strokeStyle    ,   . 
 
 ,      ,   CSS,    rgb(R, G, B),      15. 
 
  getImageData    ,   toDataURL –   ,      ,    .   try/catch        alert. 
 
 <script> tools["Pick color"] = function(event, cx) { // Your code here. }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body> 
 
  
    ,  ,        . ,           ,   ,     -   . 
 
              ,    .       ,      ,      ,         (   ),    ,     . 
 
     , ,       : 
 
  
 
          ,   ,      ,   . 
 
    getImageData    .  ,       ,          .           7,  ,      .       (x,y)    (x + y × width) × 4 
 
      (),          () . 
 
            , ,   ,       .         .      -      ,    9.        ,    ,       ,    ,    . 
 
      .      ,       .  ,  ,    . 
 
       fillRect,   -  ,  ,     . 
 
 <script> tools["Flood fill"] = function(event, cx) { //   }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body> 

, . , , . , , ..

"mousedown" , , . , , "mousemove", , .

. fillStyle, strokeStyle, lineWidth .

. file, . URL .

. save . , . , .

DOM
30 DOM. - .

DOM HTML. HTML – DOM , - . querySelector , DOM .

DOM JavaScript, . DOM JavaScript. 13, DOM . , .

– elt 13. , , , , .

function elt(name, attributes) { var node = document.createElement(name); if (attributes) { for (var attr in attributes) if (attributes.hasOwnProperty(attr)) node.setAttribute(attr, attributes[attr]); } for (var i = 2; i < arguments.length; i++) { var child = arguments[i]; if (typeof child == "string") child = document.createTextNode(child); node.appendChild(child); } return node; }

, .


– createPaint, DOM, . , controls, .

var controls = Object.create(null); function createPaint(parent) { var canvas = elt("canvas", {width: 500, height: 300}); var cx = canvas.getContext("2d"); var toolbar = elt("div", {class: "toolbar"}); for (var name in controls) toolbar.appendChild(controls[name](cx)); var panel = elt("div", {class: "picturepanel"}, canvas); parent.appendChild(elt("div", null, panel, toolbar)); }

, – . – , ( fillStyle) ( lineWidth).

, , .


, – , . controls, , , . , .

var tools = Object.create(null); controls.tool = function(cx) { var select = elt("select"); for (var name in tools) select.appendChild(elt("option", null, name)); cx.canvas.addEventListener("mousedown", function(event) { if (event.which == 1) { tools[select.value](event, cx); event.preventDefault(); } }); return elt("span", null, "Tool: ", select); };

tool , "mousedown" , event context. preventDefault, .

– , . , . 13 getBoundingClientRect . , , . clientX clientY , .

function relativePos(event, element) { var rect = element.getBoundingClientRect(); return {x: Math.floor(event.clientX - rect.left), y: Math.floor(event.clientY - rect.top)}; }

"mousemove", . trackDrag .

function trackDrag(onMove, onEnd) { function end(event) { removeEventListener("mousemove", onMove); removeEventListener("mouseup", end); if (onEnd) onEnd(event); } addEventListener("mousemove", onMove); addEventListener("mouseup", end); }

. – , "mousemove", – , . .

.

tools.Line = function(event, cx, onEnd) { cx.lineCap = "round"; var pos = relativePos(event, cx.canvas); trackDrag(function(event) { cx.beginPath(); cx.moveTo(pos.x, pos.y); pos = relativePos(event, cx.canvas); cx.lineTo(pos.x, pos.y); cx.stroke(); }, onEnd); };

lineCap “round”, - , , . , . , , lineCap .

, "mousemove", , , , strokeStyle lineWidth, .

onEnd , trackDrag. , undefined, . , erase, .

tools.Erase = function(event, cx) { cx.globalCompositeOperation = "destination-out"; tools.Line(event, cx, function() { cx.globalCompositeOperation = "source-over"; }); };

globalCompositeOperation , . , "source-over", , , , . , , , .

“erase” globalCompositeOperation "destination-out", , .

. ( strokeStyle lineWidth ), . , , .


, , .

18 . . , . - . - "date", "email", "url" "number". . – “text”, , , . , , , , .

controls.color = function(cx) { var input = elt("input", {type: "color"}); input.addEventListener("change", function() { cx.fillStyle = input.value; cx.strokeStyle = input.value; }); return elt("span", null, "Color: ", input); };

color fillStyle strokeStyle .

.

controls.brushSize = function(cx) { var select = elt("select"); var sizes = [1, 2, 3, 5, 8, 12, 25, 35, 50, 75, 100]; sizes.forEach(function(size) { select.appendChild(elt("option", {value: size}, size + " pixels")); }); select.addEventListener("change", function() { cx.lineWidth = select.value; }); return elt("span", null, "Brush size: ", select); };

, , lineWidth .


, , URL . http: https:, URL , . URL , HTML :

data:text/html,<h1 style="color:red">Hello!</h1>

URL , , , . , , - .

toDataURL, URL , . . URL . , href , .

controls.save = function(cx) { var link = elt("a", {href: "/"}, "Save"); function update() { try { link.href = cx.canvas.toDataURL(); } catch (e) { if (e instanceof SecurityError) link.href = "javascript:alert(" + JSON.stringify("Can't save: " + e.toString()) + ")"; else throw e; } } link.addEventListener("mouseover", update); link.addEventListener("focus", update); return link; };

, , , , .

, URL , . .

. URL , , (. 17), , , .

( ). , .

, , , , «». , URL , «» . , .

try/catch update . «», toDataURL , SecurityError. URL javascript:. , , , .


URL. , URL .

function loadImageURL(cx, url) { var image = document.createElement("img"); image.addEventListener("load", function() { var color = cx.fillStyle, size = cx.lineWidth; cx.canvas.width = image.width; cx.canvas.height = image.height; cx.drawImage(image, 0, 0); cx.fillStyle = color; cx.strokeStyle = color; cx.lineWidth = size; }); image.src = url; }

, . - (fillStyle lineWidth), .

FileReader 18. readAsText readAsDataURL – , . , , URL , loadImageURL .

controls.openFile = function(cx) { var input = elt("input", {type: "file"}); input.addEventListener("change", function() { if (input.files.length == 0) return; var reader = new FileReader(); reader.addEventListener("load", function() { loadImageURL(cx, reader.result); }); reader.readAsDataURL(input.files[0]); }); return elt("div", null, "Open file: ", input); };

URL . , URL, “change”. , – Enter, load.

controls.openURL = function(cx) { var input = elt("input", {type: "text"}); var form = elt("form", null, "Open URL: ", input, elt("button", {type: "submit"}, "load")); form.addEventListener("submit", function(event) { event.preventDefault(); loadImageURL(cx, form.querySelector("input").value); }); return form; };

, , .


, , .

tools.Text = function(event, cx) { var text = prompt("Text:", ""); if (text) { var pos = relativePos(event, cx.canvas); cx.font = Math.max(7, cx.lineWidth) + "px sans-serif"; cx.fillText(text, pos.x, pos.y); } };

, sans-serif , . – 7 , .

- – “”. , , .

tools.Spray = function(event, cx) { var radius = cx.lineWidth / 2; var area = radius * radius * Math.PI; var dotsPerTick = Math.ceil(area / 30); var currentPos = relativePos(event, cx.canvas); var spray = setInterval(function() { for (var i = 0; i < dotsPerTick; i++) { var offset = randomPointInRadius(radius); cx.fillRect(currentPos.x + offset.x, currentPos.y + offset.y, 1, 1); } }, 25); trackDrag(function(event) { currentPos = relativePos(event, cx.canvas); }, function() { clearInterval(spray); }); };

setInterval 25 , . trackDrag , currentPos , .

, , 30. randomPointInRadius.

function randomPointInRadius(radius) { for (;;) { var x = Math.random() * 2 - 1; var y = Math.random() * 2 - 1; if (x * x + y * y <= 1) return {x: x * radius, y: y * radius}; } }

(-1,-1) (1,1). , , 1. , , .

. , Math.sin Math.cos . . , , .

. .

<link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>


. .


Rectangle, (. fillRect 16) . , , , . , .

, , . , , ?

, position: absolute, 13. , . pageX pageY , left, top, width height.

<script> tools.Rectangle = function(event, cx) { // }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>


– , , . .

. toDataURL , URL . getImageData, width, height data. data 0 255, - red, green, blue alpha ().

, , ( – ), , .

function pixelAt(cx, x, y) { var data = cx.getImageData(x, y, 1, 1); console.log(data.data); } var canvas = document.createElement("canvas"); var cx = canvas.getContext("2d"); pixelAt(cx, 10, 10); // → [0, 0, 0, 0] cx.fillStyle = "red"; cx.fillRect(10, 10, 1, 1); pixelAt(cx, 10, 10); // → [255, 0, 0, 255]

getImageData x y, , .

, . color . , fillStyle strokeStyle , .

, , CSS, rgb(R, G, B), 15.

getImageData , toDataURL – , , . try/catch alert.

<script> tools["Pick color"] = function(event, cx) { // Your code here. }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>


, , . , , , - .

, . , , , ( ), , .

, , :



, , , .

getImageData . , , . 7, , . (x,y) (x + y × width) × 4

(), () .

, , , . . - , 9. , , , , .

. , . , , .

fillRect, - , , .

<script> tools["Flood fill"] = function(event, cx) { // }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>

 ,      .    ,     ,      .     ,   ,    .. 
 
      "mousedown"  ,   ,   .  , ,    "mousemove",      ,           . 
 
         .         fillStyle, strokeStyle,  lineWidth     . 
 
       .    file,       .   URL     . 
 
    .  save       .    ,       .   ,   . 
 
  DOM 
       30  DOM.   -  . 
 
      DOM  HTML.     HTML    –   DOM        ,    -   .       querySelector   ,     DOM  . 
 
      DOM      JavaScript,   .       DOM   JavaScript.      13,      DOM  .      ,    . 
 
   –    elt   13.        ,     ,  ,    ,      . 
 
 function elt(name, attributes) { var node = document.createElement(name); if (attributes) { for (var attr in attributes) if (attributes.hasOwnProperty(attr)) node.setAttribute(attr, attributes[attr]); } for (var i = 2; i < arguments.length; i++) { var child = arguments[i]; if (typeof child == "string") child = document.createTextNode(child); node.appendChild(child); } return node; } 
 
       ,       . 
 
  
    –  createPaint,      DOM,     .      ,    controls,           . 
 
 var controls = Object.create(null); function createPaint(parent) { var canvas = elt("canvas", {width: 500, height: 300}); var cx = canvas.getContext("2d"); var toolbar = elt("div", {class: "toolbar"}); for (var name in controls) toolbar.appendChild(controls[name](cx)); var panel = elt("div", {class: "picturepanel"}, canvas); parent.appendChild(elt("div", null, panel, toolbar)); } 
 
           ,    –   .        –    ,   (  fillStyle)    (  lineWidth). 
 
          ,      ,     . 
 
   
   ,    –  ,    .      controls,        ,           ,       .       ,          . 
 
 var tools = Object.create(null); controls.tool = function(cx) { var select = elt("select"); for (var name in tools) select.appendChild(elt("option", null, name)); cx.canvas.addEventListener("mousedown", function(event) { if (event.which == 1) { tools[select.value](event, cx); event.preventDefault(); } }); return elt("span", null, "Tool: ", select); }; 
 
   tool        ,    "mousedown"          ,    event  context.    preventDefault,          . 
 
    – ,     .   ,           .    13   getBoundingClientRect     .  ,   ,     .    clientX  clientY      ,                . 
 
 function relativePos(event, element) { var rect = element.getBoundingClientRect(); return {x: Math.floor(event.clientX - rect.left), y: Math.floor(event.clientY - rect.top)}; } 
 
       "mousemove",    .  trackDrag       . 
 
 function trackDrag(onMove, onEnd) { function end(event) { removeEventListener("mousemove", onMove); removeEventListener("mouseup", end); if (onEnd) onEnd(event); } addEventListener("mousemove", onMove); addEventListener("mouseup", end); } 
 
    .  – ,      "mousemove",   – ,     .      . 
 
           . 
 
 tools.Line = function(event, cx, onEnd) { cx.lineCap = "round"; var pos = relativePos(event, cx.canvas); trackDrag(function(event) { cx.beginPath(); cx.moveTo(pos.x, pos.y); pos = relativePos(event, cx.canvas); cx.lineTo(pos.x, pos.y); cx.stroke(); }, onEnd); }; 
 
      lineCap  “round”, -      ,   ,     .     ,      .     ,      ,     lineCap  . 
 
 ,    "mousemove",  ,   ,         ,      strokeStyle  lineWidth,     . 
 
  onEnd   ,  trackDrag.        ,        undefined,       .        ,  erase,      . 
 
 tools.Erase = function(event, cx) { cx.globalCompositeOperation = "destination-out"; tools.Line(event, cx, function() { cx.globalCompositeOperation = "source-over"; }); }; 
 
  globalCompositeOperation   ,        .  ,   "source-over",  ,  ,  ,   .   ,    ,     ,   . 
 
  “erase”  globalCompositeOperation  "destination-out",    ,     . 
 
         .          (     strokeStyle  lineWidth  ),   . ,   ,  . 
 
     
 ,              ,      . 
 
   18      .        .          ,            .    - .   - "date", "email", "url"  "number".      .      – “text”,     ,     ,       . ,   ,       ,       ,       . 
 
 controls.color = function(cx) { var input = elt("input", {type: "color"}); input.addEventListener("change", function() { cx.fillStyle = input.value; cx.strokeStyle = input.value; }); return elt("span", null, "Color: ", input); }; 
 
     color     fillStyle  strokeStyle    . 
 
      . 
 
 controls.brushSize = function(cx) { var select = elt("select"); var sizes = [1, 2, 3, 5, 8, 12, 25, 35, 50, 75, 100]; sizes.forEach(function(size) { select.appendChild(elt("option", {value: size}, size + " pixels")); }); select.addEventListener("change", function() { cx.lineWidth = select.value; }); return elt("span", null, "Brush size: ", select); }; 
 
       ,    ,    lineWidth    . 
 
  
  ,     ,      URL  .     http:  https:, URL      ,      .  URL  ,   HTML : 
 
 data:text/html,<h1 style="color:red">Hello!</h1> 
 
  URL    , , ,       .           ,  ,      - . 
 
       toDataURL,   URL  ,        .            .        URL   .       ,      href  ,            . 
 
 controls.save = function(cx) { var link = elt("a", {href: "/"}, "Save"); function update() { try { link.href = cx.canvas.toDataURL(); } catch (e) { if (e instanceof SecurityError) link.href = "javascript:alert(" + JSON.stringify("Can't save: " + e.toString()) + ")"; else throw e; } } link.addEventListener("mouseover", update); link.addEventListener("focus", update); return link; }; 
 
  ,          ,       ,      ,     . 
 
     ,      URL  ,    .       . 
 
           .     URL   ,      ,       (.  17),    ,    ,    . 
 
        (   ).        ,      . 
 
     ,  ,  ,    ,     «».  ,  URL  ,     «» .    ,     . 
 
     try/catch   update   .   «»,  toDataURL  ,   SecurityError.           URL   javascript:.     ,   ,     ,   . 
 
   
              URL.    ,      URL     . 
 
 function loadImageURL(cx, url) { var image = document.createElement("img"); image.addEventListener("load", function() { var color = cx.fillStyle, size = cx.lineWidth; cx.canvas.width = image.width; cx.canvas.height = image.height; cx.drawImage(image, 0, 0); cx.fillStyle = color; cx.strokeStyle = color; cx.lineWidth = size; }); image.src = url; } 
 
     ,    . -          (fillStyle  lineWidth),              . 
 
         FileReader   18.     readAsText        readAsDataURL –   ,   .   ,   ,  URL  ,     loadImageURL    . 
 
 controls.openFile = function(cx) { var input = elt("input", {type: "file"}); input.addEventListener("change", function() { if (input.files.length == 0) return; var reader = new FileReader(); reader.addEventListener("load", function() { loadImageURL(cx, reader.result); }); reader.readAsDataURL(input.files[0]); }); return elt("div", null, "Open file: ", input); }; 
 
    URL  .       ,       URL,        “change”.         ,     –    Enter,     load. 
 
 controls.openURL = function(cx) { var input = elt("input", {type: "text"}); var form = elt("form", null, "Open URL: ", input, elt("button", {type: "submit"}, "load")); form.addEventListener("submit", function(event) { event.preventDefault(); loadImageURL(cx, form.querySelector("input").value); }); return form; }; 
 
      ,   ,      . 
 
  
        ,    ,     . 
 
 tools.Text = function(event, cx) { var text = prompt("Text:", ""); if (text) { var pos = relativePos(event, cx.canvas); cx.font = Math.max(7, cx.lineWidth) + "px sans-serif"; cx.fillText(text, pos.x, pos.y); } }; 
 
          ,        sans-serif   ,    .   – 7 ,      . 
 
      - – “”.      ,    ,            . 
 
 tools.Spray = function(event, cx) { var radius = cx.lineWidth / 2; var area = radius * radius * Math.PI; var dotsPerTick = Math.ceil(area / 30); var currentPos = relativePos(event, cx.canvas); var spray = setInterval(function() { for (var i = 0; i < dotsPerTick; i++) { var offset = randomPointInRadius(radius); cx.fillRect(currentPos.x + offset.x, currentPos.y + offset.y, 1, 1); } }, 25); trackDrag(function(event) { currentPos = relativePos(event, cx.canvas); }, function() { clearInterval(spray); }); }; 
 
   setInterval      25 ,    .  trackDrag   ,  currentPos     ,       . 
 
  ,         ,           30.         randomPointInRadius. 
 
 function randomPointInRadius(radius) { for (;;) { var x = Math.random() * 2 - 1; var y = Math.random() * 2 - 1; if (x * x + y * y <= 1) return {x: x * radius, y: y * radius}; } } 
 
        (-1,-1)  (1,1).   ,  ,         1.    ,    ,   . 
 
      .       ,        Math.sin  Math.cos   .            .    ,    ,   . 
 
      .    . 
 
 <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body> 
 
  
        .    . 
 
  
   Rectangle,   (.  fillRect   16)  .      ,     ,    ,    . ,         . 
 
   ,  ,        .           ,       ,    ? 
 
   ,    position: absolute,      13.   ,      .  pageX  pageY          ,      left, top, width  height. 
 
 <script> tools.Rectangle = function(event, cx) { //   }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body> 
 
   
      –  ,        ,    .   . 
 
        .  toDataURL    ,       URL   .       getImageData,          width, height  data.   data     0  255,        - red, green, blue  alpha (). 
 
        ,  ,    (  –  ),   ,      . 
 
 function pixelAt(cx, x, y) { var data = cx.getImageData(x, y, 1, 1); console.log(data.data); } var canvas = document.createElement("canvas"); var cx = canvas.getContext("2d"); pixelAt(cx, 10, 10); // → [0, 0, 0, 0] cx.fillStyle = "red"; cx.fillRect(10, 10, 1, 1); pixelAt(cx, 10, 10); // → [255, 0, 0, 255] 
 
  getImageData     x  y,    ,      . 
 
     ,         .        color   .  ,  fillStyle  strokeStyle    ,   . 
 
 ,      ,   CSS,    rgb(R, G, B),      15. 
 
  getImageData    ,   toDataURL –   ,      ,    .   try/catch        alert. 
 
 <script> tools["Pick color"] = function(event, cx) { // Your code here. }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body> 
 
  
    ,  ,        . ,           ,   ,     -   . 
 
              ,    .       ,      ,      ,         (   ),    ,     . 
 
     , ,       : 
 
  
 
          ,   ,      ,   . 
 
    getImageData    .  ,       ,          .           7,  ,      .       (x,y)    (x + y × width) × 4 
 
      (),          () . 
 
            , ,   ,       .         .      -      ,    9.        ,    ,       ,    ,    . 
 
      .      ,       .  ,  ,    . 
 
       fillRect,   -  ,  ,     . 
 
 <script> tools["Flood fill"] = function(event, cx) { //   }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body> 

, . , , . , , ..

"mousedown" , , . , , "mousemove", , .

. fillStyle, strokeStyle, lineWidth .

. file, . URL .

. save . , . , .

DOM
30 DOM. - .

DOM HTML. HTML – DOM , - . querySelector , DOM .

DOM JavaScript, . DOM JavaScript. 13, DOM . , .

– elt 13. , , , , .

function elt(name, attributes) { var node = document.createElement(name); if (attributes) { for (var attr in attributes) if (attributes.hasOwnProperty(attr)) node.setAttribute(attr, attributes[attr]); } for (var i = 2; i < arguments.length; i++) { var child = arguments[i]; if (typeof child == "string") child = document.createTextNode(child); node.appendChild(child); } return node; }

, .


– createPaint, DOM, . , controls, .

var controls = Object.create(null); function createPaint(parent) { var canvas = elt("canvas", {width: 500, height: 300}); var cx = canvas.getContext("2d"); var toolbar = elt("div", {class: "toolbar"}); for (var name in controls) toolbar.appendChild(controls[name](cx)); var panel = elt("div", {class: "picturepanel"}, canvas); parent.appendChild(elt("div", null, panel, toolbar)); }

, – . – , ( fillStyle) ( lineWidth).

, , .


, – , . controls, , , . , .

var tools = Object.create(null); controls.tool = function(cx) { var select = elt("select"); for (var name in tools) select.appendChild(elt("option", null, name)); cx.canvas.addEventListener("mousedown", function(event) { if (event.which == 1) { tools[select.value](event, cx); event.preventDefault(); } }); return elt("span", null, "Tool: ", select); };

tool , "mousedown" , event context. preventDefault, .

– , . , . 13 getBoundingClientRect . , , . clientX clientY , .

function relativePos(event, element) { var rect = element.getBoundingClientRect(); return {x: Math.floor(event.clientX - rect.left), y: Math.floor(event.clientY - rect.top)}; }

"mousemove", . trackDrag .

function trackDrag(onMove, onEnd) { function end(event) { removeEventListener("mousemove", onMove); removeEventListener("mouseup", end); if (onEnd) onEnd(event); } addEventListener("mousemove", onMove); addEventListener("mouseup", end); }

. – , "mousemove", – , . .

.

tools.Line = function(event, cx, onEnd) { cx.lineCap = "round"; var pos = relativePos(event, cx.canvas); trackDrag(function(event) { cx.beginPath(); cx.moveTo(pos.x, pos.y); pos = relativePos(event, cx.canvas); cx.lineTo(pos.x, pos.y); cx.stroke(); }, onEnd); };

lineCap “round”, - , , . , . , , lineCap .

, "mousemove", , , , strokeStyle lineWidth, .

onEnd , trackDrag. , undefined, . , erase, .

tools.Erase = function(event, cx) { cx.globalCompositeOperation = "destination-out"; tools.Line(event, cx, function() { cx.globalCompositeOperation = "source-over"; }); };

globalCompositeOperation , . , "source-over", , , , . , , , .

“erase” globalCompositeOperation "destination-out", , .

. ( strokeStyle lineWidth ), . , , .


, , .

18 . . , . - . - "date", "email", "url" "number". . – “text”, , , . , , , , .

controls.color = function(cx) { var input = elt("input", {type: "color"}); input.addEventListener("change", function() { cx.fillStyle = input.value; cx.strokeStyle = input.value; }); return elt("span", null, "Color: ", input); };

color fillStyle strokeStyle .

.

controls.brushSize = function(cx) { var select = elt("select"); var sizes = [1, 2, 3, 5, 8, 12, 25, 35, 50, 75, 100]; sizes.forEach(function(size) { select.appendChild(elt("option", {value: size}, size + " pixels")); }); select.addEventListener("change", function() { cx.lineWidth = select.value; }); return elt("span", null, "Brush size: ", select); };

, , lineWidth .


, , URL . http: https:, URL , . URL , HTML :

data:text/html,<h1 style="color:red">Hello!</h1>

URL , , , . , , - .

toDataURL, URL , . . URL . , href , .

controls.save = function(cx) { var link = elt("a", {href: "/"}, "Save"); function update() { try { link.href = cx.canvas.toDataURL(); } catch (e) { if (e instanceof SecurityError) link.href = "javascript:alert(" + JSON.stringify("Can't save: " + e.toString()) + ")"; else throw e; } } link.addEventListener("mouseover", update); link.addEventListener("focus", update); return link; };

, , , , .

, URL , . .

. URL , , (. 17), , , .

( ). , .

, , , , «». , URL , «» . , .

try/catch update . «», toDataURL , SecurityError. URL javascript:. , , , .


URL. , URL .

function loadImageURL(cx, url) { var image = document.createElement("img"); image.addEventListener("load", function() { var color = cx.fillStyle, size = cx.lineWidth; cx.canvas.width = image.width; cx.canvas.height = image.height; cx.drawImage(image, 0, 0); cx.fillStyle = color; cx.strokeStyle = color; cx.lineWidth = size; }); image.src = url; }

, . - (fillStyle lineWidth), .

FileReader 18. readAsText readAsDataURL – , . , , URL , loadImageURL .

controls.openFile = function(cx) { var input = elt("input", {type: "file"}); input.addEventListener("change", function() { if (input.files.length == 0) return; var reader = new FileReader(); reader.addEventListener("load", function() { loadImageURL(cx, reader.result); }); reader.readAsDataURL(input.files[0]); }); return elt("div", null, "Open file: ", input); };

URL . , URL, “change”. , – Enter, load.

controls.openURL = function(cx) { var input = elt("input", {type: "text"}); var form = elt("form", null, "Open URL: ", input, elt("button", {type: "submit"}, "load")); form.addEventListener("submit", function(event) { event.preventDefault(); loadImageURL(cx, form.querySelector("input").value); }); return form; };

, , .


, , .

tools.Text = function(event, cx) { var text = prompt("Text:", ""); if (text) { var pos = relativePos(event, cx.canvas); cx.font = Math.max(7, cx.lineWidth) + "px sans-serif"; cx.fillText(text, pos.x, pos.y); } };

, sans-serif , . – 7 , .

- – “”. , , .

tools.Spray = function(event, cx) { var radius = cx.lineWidth / 2; var area = radius * radius * Math.PI; var dotsPerTick = Math.ceil(area / 30); var currentPos = relativePos(event, cx.canvas); var spray = setInterval(function() { for (var i = 0; i < dotsPerTick; i++) { var offset = randomPointInRadius(radius); cx.fillRect(currentPos.x + offset.x, currentPos.y + offset.y, 1, 1); } }, 25); trackDrag(function(event) { currentPos = relativePos(event, cx.canvas); }, function() { clearInterval(spray); }); };

setInterval 25 , . trackDrag , currentPos , .

, , 30. randomPointInRadius.

function randomPointInRadius(radius) { for (;;) { var x = Math.random() * 2 - 1; var y = Math.random() * 2 - 1; if (x * x + y * y <= 1) return {x: x * radius, y: y * radius}; } }

(-1,-1) (1,1). , , 1. , , .

. , Math.sin Math.cos . . , , .

. .

<link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>


. .


Rectangle, (. fillRect 16) . , , , . , .

, , . , , ?

, position: absolute, 13. , . pageX pageY , left, top, width height.

<script> tools.Rectangle = function(event, cx) { // }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>


– , , . .

. toDataURL , URL . getImageData, width, height data. data 0 255, - red, green, blue alpha ().

, , ( – ), , .

function pixelAt(cx, x, y) { var data = cx.getImageData(x, y, 1, 1); console.log(data.data); } var canvas = document.createElement("canvas"); var cx = canvas.getContext("2d"); pixelAt(cx, 10, 10); // → [0, 0, 0, 0] cx.fillStyle = "red"; cx.fillRect(10, 10, 1, 1); pixelAt(cx, 10, 10); // → [255, 0, 0, 255]

getImageData x y, , .

, . color . , fillStyle strokeStyle , .

, , CSS, rgb(R, G, B), 15.

getImageData , toDataURL – , , . try/catch alert.

<script> tools["Pick color"] = function(event, cx) { // Your code here. }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>


, , . , , , - .

, . , , , ( ), , .

, , :



, , , .

getImageData . , , . 7, , . (x,y) (x + y × width) × 4

(), () .

, , , . . - , 9. , , , , .

. , . , , .

fillRect, - , , .

<script> tools["Flood fill"] = function(event, cx) { // }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>

 ,      .    ,     ,      .     ,   ,    .. 
 
      "mousedown"  ,   ,   .  , ,    "mousemove",      ,           . 
 
         .         fillStyle, strokeStyle,  lineWidth     . 
 
       .    file,       .   URL     . 
 
    .  save       .    ,       .   ,   . 
 
  DOM 
       30  DOM.   -  . 
 
      DOM  HTML.     HTML    –   DOM        ,    -   .       querySelector   ,     DOM  . 
 
      DOM      JavaScript,   .       DOM   JavaScript.      13,      DOM  .      ,    . 
 
   –    elt   13.        ,     ,  ,    ,      . 
 
 function elt(name, attributes) { var node = document.createElement(name); if (attributes) { for (var attr in attributes) if (attributes.hasOwnProperty(attr)) node.setAttribute(attr, attributes[attr]); } for (var i = 2; i < arguments.length; i++) { var child = arguments[i]; if (typeof child == "string") child = document.createTextNode(child); node.appendChild(child); } return node; } 
 
       ,       . 
 
  
    –  createPaint,      DOM,     .      ,    controls,           . 
 
 var controls = Object.create(null); function createPaint(parent) { var canvas = elt("canvas", {width: 500, height: 300}); var cx = canvas.getContext("2d"); var toolbar = elt("div", {class: "toolbar"}); for (var name in controls) toolbar.appendChild(controls[name](cx)); var panel = elt("div", {class: "picturepanel"}, canvas); parent.appendChild(elt("div", null, panel, toolbar)); } 
 
           ,    –   .        –    ,   (  fillStyle)    (  lineWidth). 
 
          ,      ,     . 
 
   
   ,    –  ,    .      controls,        ,           ,       .       ,          . 
 
 var tools = Object.create(null); controls.tool = function(cx) { var select = elt("select"); for (var name in tools) select.appendChild(elt("option", null, name)); cx.canvas.addEventListener("mousedown", function(event) { if (event.which == 1) { tools[select.value](event, cx); event.preventDefault(); } }); return elt("span", null, "Tool: ", select); }; 
 
   tool        ,    "mousedown"          ,    event  context.    preventDefault,          . 
 
    – ,     .   ,           .    13   getBoundingClientRect     .  ,   ,     .    clientX  clientY      ,                . 
 
 function relativePos(event, element) { var rect = element.getBoundingClientRect(); return {x: Math.floor(event.clientX - rect.left), y: Math.floor(event.clientY - rect.top)}; } 
 
       "mousemove",    .  trackDrag       . 
 
 function trackDrag(onMove, onEnd) { function end(event) { removeEventListener("mousemove", onMove); removeEventListener("mouseup", end); if (onEnd) onEnd(event); } addEventListener("mousemove", onMove); addEventListener("mouseup", end); } 
 
    .  – ,      "mousemove",   – ,     .      . 
 
           . 
 
 tools.Line = function(event, cx, onEnd) { cx.lineCap = "round"; var pos = relativePos(event, cx.canvas); trackDrag(function(event) { cx.beginPath(); cx.moveTo(pos.x, pos.y); pos = relativePos(event, cx.canvas); cx.lineTo(pos.x, pos.y); cx.stroke(); }, onEnd); }; 
 
      lineCap  “round”, -      ,   ,     .     ,      .     ,      ,     lineCap  . 
 
 ,    "mousemove",  ,   ,         ,      strokeStyle  lineWidth,     . 
 
  onEnd   ,  trackDrag.        ,        undefined,       .        ,  erase,      . 
 
 tools.Erase = function(event, cx) { cx.globalCompositeOperation = "destination-out"; tools.Line(event, cx, function() { cx.globalCompositeOperation = "source-over"; }); }; 
 
  globalCompositeOperation   ,        .  ,   "source-over",  ,  ,  ,   .   ,    ,     ,   . 
 
  “erase”  globalCompositeOperation  "destination-out",    ,     . 
 
         .          (     strokeStyle  lineWidth  ),   . ,   ,  . 
 
     
 ,              ,      . 
 
   18      .        .          ,            .    - .   - "date", "email", "url"  "number".      .      – “text”,     ,     ,       . ,   ,       ,       ,       . 
 
 controls.color = function(cx) { var input = elt("input", {type: "color"}); input.addEventListener("change", function() { cx.fillStyle = input.value; cx.strokeStyle = input.value; }); return elt("span", null, "Color: ", input); }; 
 
     color     fillStyle  strokeStyle    . 
 
      . 
 
 controls.brushSize = function(cx) { var select = elt("select"); var sizes = [1, 2, 3, 5, 8, 12, 25, 35, 50, 75, 100]; sizes.forEach(function(size) { select.appendChild(elt("option", {value: size}, size + " pixels")); }); select.addEventListener("change", function() { cx.lineWidth = select.value; }); return elt("span", null, "Brush size: ", select); }; 
 
       ,    ,    lineWidth    . 
 
  
  ,     ,      URL  .     http:  https:, URL      ,      .  URL  ,   HTML : 
 
 data:text/html,<h1 style="color:red">Hello!</h1> 
 
  URL    , , ,       .           ,  ,      - . 
 
       toDataURL,   URL  ,        .            .        URL   .       ,      href  ,            . 
 
 controls.save = function(cx) { var link = elt("a", {href: "/"}, "Save"); function update() { try { link.href = cx.canvas.toDataURL(); } catch (e) { if (e instanceof SecurityError) link.href = "javascript:alert(" + JSON.stringify("Can't save: " + e.toString()) + ")"; else throw e; } } link.addEventListener("mouseover", update); link.addEventListener("focus", update); return link; }; 
 
  ,          ,       ,      ,     . 
 
     ,      URL  ,    .       . 
 
           .     URL   ,      ,       (.  17),    ,    ,    . 
 
        (   ).        ,      . 
 
     ,  ,  ,    ,     «».  ,  URL  ,     «» .    ,     . 
 
     try/catch   update   .   «»,  toDataURL  ,   SecurityError.           URL   javascript:.     ,   ,     ,   . 
 
   
              URL.    ,      URL     . 
 
 function loadImageURL(cx, url) { var image = document.createElement("img"); image.addEventListener("load", function() { var color = cx.fillStyle, size = cx.lineWidth; cx.canvas.width = image.width; cx.canvas.height = image.height; cx.drawImage(image, 0, 0); cx.fillStyle = color; cx.strokeStyle = color; cx.lineWidth = size; }); image.src = url; } 
 
     ,    . -          (fillStyle  lineWidth),              . 
 
         FileReader   18.     readAsText        readAsDataURL –   ,   .   ,   ,  URL  ,     loadImageURL    . 
 
 controls.openFile = function(cx) { var input = elt("input", {type: "file"}); input.addEventListener("change", function() { if (input.files.length == 0) return; var reader = new FileReader(); reader.addEventListener("load", function() { loadImageURL(cx, reader.result); }); reader.readAsDataURL(input.files[0]); }); return elt("div", null, "Open file: ", input); }; 
 
    URL  .       ,       URL,        “change”.         ,     –    Enter,     load. 
 
 controls.openURL = function(cx) { var input = elt("input", {type: "text"}); var form = elt("form", null, "Open URL: ", input, elt("button", {type: "submit"}, "load")); form.addEventListener("submit", function(event) { event.preventDefault(); loadImageURL(cx, form.querySelector("input").value); }); return form; }; 
 
      ,   ,      . 
 
  
        ,    ,     . 
 
 tools.Text = function(event, cx) { var text = prompt("Text:", ""); if (text) { var pos = relativePos(event, cx.canvas); cx.font = Math.max(7, cx.lineWidth) + "px sans-serif"; cx.fillText(text, pos.x, pos.y); } }; 
 
          ,        sans-serif   ,    .   – 7 ,      . 
 
      - – “”.      ,    ,            . 
 
 tools.Spray = function(event, cx) { var radius = cx.lineWidth / 2; var area = radius * radius * Math.PI; var dotsPerTick = Math.ceil(area / 30); var currentPos = relativePos(event, cx.canvas); var spray = setInterval(function() { for (var i = 0; i < dotsPerTick; i++) { var offset = randomPointInRadius(radius); cx.fillRect(currentPos.x + offset.x, currentPos.y + offset.y, 1, 1); } }, 25); trackDrag(function(event) { currentPos = relativePos(event, cx.canvas); }, function() { clearInterval(spray); }); }; 
 
   setInterval      25 ,    .  trackDrag   ,  currentPos     ,       . 
 
  ,         ,           30.         randomPointInRadius. 
 
 function randomPointInRadius(radius) { for (;;) { var x = Math.random() * 2 - 1; var y = Math.random() * 2 - 1; if (x * x + y * y <= 1) return {x: x * radius, y: y * radius}; } } 
 
        (-1,-1)  (1,1).   ,  ,         1.    ,    ,   . 
 
      .       ,        Math.sin  Math.cos   .            .    ,    ,   . 
 
      .    . 
 
 <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body> 
 
  
        .    . 
 
  
   Rectangle,   (.  fillRect   16)  .      ,     ,    ,    . ,         . 
 
   ,  ,        .           ,       ,    ? 
 
   ,    position: absolute,      13.   ,      .  pageX  pageY          ,      left, top, width  height. 
 
 <script> tools.Rectangle = function(event, cx) { //   }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body> 
 
   
      –  ,        ,    .   . 
 
        .  toDataURL    ,       URL   .       getImageData,          width, height  data.   data     0  255,        - red, green, blue  alpha (). 
 
        ,  ,    (  –  ),   ,      . 
 
 function pixelAt(cx, x, y) { var data = cx.getImageData(x, y, 1, 1); console.log(data.data); } var canvas = document.createElement("canvas"); var cx = canvas.getContext("2d"); pixelAt(cx, 10, 10); // → [0, 0, 0, 0] cx.fillStyle = "red"; cx.fillRect(10, 10, 1, 1); pixelAt(cx, 10, 10); // → [255, 0, 0, 255] 
 
  getImageData     x  y,    ,      . 
 
     ,         .        color   .  ,  fillStyle  strokeStyle    ,   . 
 
 ,      ,   CSS,    rgb(R, G, B),      15. 
 
  getImageData    ,   toDataURL –   ,      ,    .   try/catch        alert. 
 
 <script> tools["Pick color"] = function(event, cx) { // Your code here. }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body> 
 
  
    ,  ,        . ,           ,   ,     -   . 
 
              ,    .       ,      ,      ,         (   ),    ,     . 
 
     , ,       : 
 
  
 
          ,   ,      ,   . 
 
    getImageData    .  ,       ,          .           7,  ,      .       (x,y)    (x + y × width) × 4 
 
      (),          () . 
 
            , ,   ,       .         .      -      ,    9.        ,    ,       ,    ,    . 
 
      .      ,       .  ,  ,    . 
 
       fillRect,   -  ,  ,     . 
 
 <script> tools["Flood fill"] = function(event, cx) { //   }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body> 

, . , , . , , ..

"mousedown" , , . , , "mousemove", , .

. fillStyle, strokeStyle, lineWidth .

. file, . URL .

. save . , . , .

DOM
30 DOM. - .

DOM HTML. HTML – DOM , - . querySelector , DOM .

DOM JavaScript, . DOM JavaScript. 13, DOM . , .

– elt 13. , , , , .

function elt(name, attributes) { var node = document.createElement(name); if (attributes) { for (var attr in attributes) if (attributes.hasOwnProperty(attr)) node.setAttribute(attr, attributes[attr]); } for (var i = 2; i < arguments.length; i++) { var child = arguments[i]; if (typeof child == "string") child = document.createTextNode(child); node.appendChild(child); } return node; }

, .


– createPaint, DOM, . , controls, .

var controls = Object.create(null); function createPaint(parent) { var canvas = elt("canvas", {width: 500, height: 300}); var cx = canvas.getContext("2d"); var toolbar = elt("div", {class: "toolbar"}); for (var name in controls) toolbar.appendChild(controls[name](cx)); var panel = elt("div", {class: "picturepanel"}, canvas); parent.appendChild(elt("div", null, panel, toolbar)); }

, – . – , ( fillStyle) ( lineWidth).

, , .


, – , . controls, , , . , .

var tools = Object.create(null); controls.tool = function(cx) { var select = elt("select"); for (var name in tools) select.appendChild(elt("option", null, name)); cx.canvas.addEventListener("mousedown", function(event) { if (event.which == 1) { tools[select.value](event, cx); event.preventDefault(); } }); return elt("span", null, "Tool: ", select); };

tool , "mousedown" , event context. preventDefault, .

– , . , . 13 getBoundingClientRect . , , . clientX clientY , .

function relativePos(event, element) { var rect = element.getBoundingClientRect(); return {x: Math.floor(event.clientX - rect.left), y: Math.floor(event.clientY - rect.top)}; }

"mousemove", . trackDrag .

function trackDrag(onMove, onEnd) { function end(event) { removeEventListener("mousemove", onMove); removeEventListener("mouseup", end); if (onEnd) onEnd(event); } addEventListener("mousemove", onMove); addEventListener("mouseup", end); }

. – , "mousemove", – , . .

.

tools.Line = function(event, cx, onEnd) { cx.lineCap = "round"; var pos = relativePos(event, cx.canvas); trackDrag(function(event) { cx.beginPath(); cx.moveTo(pos.x, pos.y); pos = relativePos(event, cx.canvas); cx.lineTo(pos.x, pos.y); cx.stroke(); }, onEnd); };

lineCap “round”, - , , . , . , , lineCap .

, "mousemove", , , , strokeStyle lineWidth, .

onEnd , trackDrag. , undefined, . , erase, .

tools.Erase = function(event, cx) { cx.globalCompositeOperation = "destination-out"; tools.Line(event, cx, function() { cx.globalCompositeOperation = "source-over"; }); };

globalCompositeOperation , . , "source-over", , , , . , , , .

“erase” globalCompositeOperation "destination-out", , .

. ( strokeStyle lineWidth ), . , , .


, , .

18 . . , . - . - "date", "email", "url" "number". . – “text”, , , . , , , , .

controls.color = function(cx) { var input = elt("input", {type: "color"}); input.addEventListener("change", function() { cx.fillStyle = input.value; cx.strokeStyle = input.value; }); return elt("span", null, "Color: ", input); };

color fillStyle strokeStyle .

.

controls.brushSize = function(cx) { var select = elt("select"); var sizes = [1, 2, 3, 5, 8, 12, 25, 35, 50, 75, 100]; sizes.forEach(function(size) { select.appendChild(elt("option", {value: size}, size + " pixels")); }); select.addEventListener("change", function() { cx.lineWidth = select.value; }); return elt("span", null, "Brush size: ", select); };

, , lineWidth .


, , URL . http: https:, URL , . URL , HTML :

data:text/html,<h1 style="color:red">Hello!</h1>

URL , , , . , , - .

toDataURL, URL , . . URL . , href , .

controls.save = function(cx) { var link = elt("a", {href: "/"}, "Save"); function update() { try { link.href = cx.canvas.toDataURL(); } catch (e) { if (e instanceof SecurityError) link.href = "javascript:alert(" + JSON.stringify("Can't save: " + e.toString()) + ")"; else throw e; } } link.addEventListener("mouseover", update); link.addEventListener("focus", update); return link; };

, , , , .

, URL , . .

. URL , , (. 17), , , .

( ). , .

, , , , «». , URL , «» . , .

try/catch update . «», toDataURL , SecurityError. URL javascript:. , , , .


URL. , URL .

function loadImageURL(cx, url) { var image = document.createElement("img"); image.addEventListener("load", function() { var color = cx.fillStyle, size = cx.lineWidth; cx.canvas.width = image.width; cx.canvas.height = image.height; cx.drawImage(image, 0, 0); cx.fillStyle = color; cx.strokeStyle = color; cx.lineWidth = size; }); image.src = url; }

, . - (fillStyle lineWidth), .

FileReader 18. readAsText readAsDataURL – , . , , URL , loadImageURL .

controls.openFile = function(cx) { var input = elt("input", {type: "file"}); input.addEventListener("change", function() { if (input.files.length == 0) return; var reader = new FileReader(); reader.addEventListener("load", function() { loadImageURL(cx, reader.result); }); reader.readAsDataURL(input.files[0]); }); return elt("div", null, "Open file: ", input); };

URL . , URL, “change”. , – Enter, load.

controls.openURL = function(cx) { var input = elt("input", {type: "text"}); var form = elt("form", null, "Open URL: ", input, elt("button", {type: "submit"}, "load")); form.addEventListener("submit", function(event) { event.preventDefault(); loadImageURL(cx, form.querySelector("input").value); }); return form; };

, , .


, , .

tools.Text = function(event, cx) { var text = prompt("Text:", ""); if (text) { var pos = relativePos(event, cx.canvas); cx.font = Math.max(7, cx.lineWidth) + "px sans-serif"; cx.fillText(text, pos.x, pos.y); } };

, sans-serif , . – 7 , .

- – “”. , , .

tools.Spray = function(event, cx) { var radius = cx.lineWidth / 2; var area = radius * radius * Math.PI; var dotsPerTick = Math.ceil(area / 30); var currentPos = relativePos(event, cx.canvas); var spray = setInterval(function() { for (var i = 0; i < dotsPerTick; i++) { var offset = randomPointInRadius(radius); cx.fillRect(currentPos.x + offset.x, currentPos.y + offset.y, 1, 1); } }, 25); trackDrag(function(event) { currentPos = relativePos(event, cx.canvas); }, function() { clearInterval(spray); }); };

setInterval 25 , . trackDrag , currentPos , .

, , 30. randomPointInRadius.

function randomPointInRadius(radius) { for (;;) { var x = Math.random() * 2 - 1; var y = Math.random() * 2 - 1; if (x * x + y * y <= 1) return {x: x * radius, y: y * radius}; } }

(-1,-1) (1,1). , , 1. , , .

. , Math.sin Math.cos . . , , .

. .

<link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>


. .


Rectangle, (. fillRect 16) . , , , . , .

, , . , , ?

, position: absolute, 13. , . pageX pageY , left, top, width height.

<script> tools.Rectangle = function(event, cx) { // }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>


– , , . .

. toDataURL , URL . getImageData, width, height data. data 0 255, - red, green, blue alpha ().

, , ( – ), , .

function pixelAt(cx, x, y) { var data = cx.getImageData(x, y, 1, 1); console.log(data.data); } var canvas = document.createElement("canvas"); var cx = canvas.getContext("2d"); pixelAt(cx, 10, 10); // → [0, 0, 0, 0] cx.fillStyle = "red"; cx.fillRect(10, 10, 1, 1); pixelAt(cx, 10, 10); // → [255, 0, 0, 255]

getImageData x y, , .

, . color . , fillStyle strokeStyle , .

, , CSS, rgb(R, G, B), 15.

getImageData , toDataURL – , , . try/catch alert.

<script> tools["Pick color"] = function(event, cx) { // Your code here. }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>


, , . , , , - .

, . , , , ( ), , .

, , :



, , , .

getImageData . , , . 7, , . (x,y) (x + y × width) × 4

(), () .

, , , . . - , 9. , , , , .

. , . , , .

fillRect, - , , .

<script> tools["Flood fill"] = function(event, cx) { // }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>

, . , , . , , ..

"mousedown" , , . , , "mousemove", , .

. fillStyle, strokeStyle, lineWidth .

. file, . URL .

. save . , . , .

DOM
30 DOM. - .

DOM HTML. HTML – DOM , - . querySelector , DOM .

DOM JavaScript, . DOM JavaScript. 13, DOM . , .

– elt 13. , , , , .

function elt(name, attributes) { var node = document.createElement(name); if (attributes) { for (var attr in attributes) if (attributes.hasOwnProperty(attr)) node.setAttribute(attr, attributes[attr]); } for (var i = 2; i < arguments.length; i++) { var child = arguments[i]; if (typeof child == "string") child = document.createTextNode(child); node.appendChild(child); } return node; }

, .


– createPaint, DOM, . , controls, .

var controls = Object.create(null); function createPaint(parent) { var canvas = elt("canvas", {width: 500, height: 300}); var cx = canvas.getContext("2d"); var toolbar = elt("div", {class: "toolbar"}); for (var name in controls) toolbar.appendChild(controls[name](cx)); var panel = elt("div", {class: "picturepanel"}, canvas); parent.appendChild(elt("div", null, panel, toolbar)); }

, – . – , ( fillStyle) ( lineWidth).

, , .


, – , . controls, , , . , .

var tools = Object.create(null); controls.tool = function(cx) { var select = elt("select"); for (var name in tools) select.appendChild(elt("option", null, name)); cx.canvas.addEventListener("mousedown", function(event) { if (event.which == 1) { tools[select.value](event, cx); event.preventDefault(); } }); return elt("span", null, "Tool: ", select); };

tool , "mousedown" , event context. preventDefault, .

– , . , . 13 getBoundingClientRect . , , . clientX clientY , .

function relativePos(event, element) { var rect = element.getBoundingClientRect(); return {x: Math.floor(event.clientX - rect.left), y: Math.floor(event.clientY - rect.top)}; }

"mousemove", . trackDrag .

function trackDrag(onMove, onEnd) { function end(event) { removeEventListener("mousemove", onMove); removeEventListener("mouseup", end); if (onEnd) onEnd(event); } addEventListener("mousemove", onMove); addEventListener("mouseup", end); }

. – , "mousemove", – , . .

.

tools.Line = function(event, cx, onEnd) { cx.lineCap = "round"; var pos = relativePos(event, cx.canvas); trackDrag(function(event) { cx.beginPath(); cx.moveTo(pos.x, pos.y); pos = relativePos(event, cx.canvas); cx.lineTo(pos.x, pos.y); cx.stroke(); }, onEnd); };

lineCap “round”, - , , . , . , , lineCap .

, "mousemove", , , , strokeStyle lineWidth, .

onEnd , trackDrag. , undefined, . , erase, .

tools.Erase = function(event, cx) { cx.globalCompositeOperation = "destination-out"; tools.Line(event, cx, function() { cx.globalCompositeOperation = "source-over"; }); };

globalCompositeOperation , . , "source-over", , , , . , , , .

“erase” globalCompositeOperation "destination-out", , .

. ( strokeStyle lineWidth ), . , , .


, , .

18 . . , . - . - "date", "email", "url" "number". . – “text”, , , . , , , , .

controls.color = function(cx) { var input = elt("input", {type: "color"}); input.addEventListener("change", function() { cx.fillStyle = input.value; cx.strokeStyle = input.value; }); return elt("span", null, "Color: ", input); };

color fillStyle strokeStyle .

.

controls.brushSize = function(cx) { var select = elt("select"); var sizes = [1, 2, 3, 5, 8, 12, 25, 35, 50, 75, 100]; sizes.forEach(function(size) { select.appendChild(elt("option", {value: size}, size + " pixels")); }); select.addEventListener("change", function() { cx.lineWidth = select.value; }); return elt("span", null, "Brush size: ", select); };

, , lineWidth .


, , URL . http: https:, URL , . URL , HTML :

data:text/html,<h1 style="color:red">Hello!</h1>

URL , , , . , , - .

toDataURL, URL , . . URL . , href , .

controls.save = function(cx) { var link = elt("a", {href: "/"}, "Save"); function update() { try { link.href = cx.canvas.toDataURL(); } catch (e) { if (e instanceof SecurityError) link.href = "javascript:alert(" + JSON.stringify("Can't save: " + e.toString()) + ")"; else throw e; } } link.addEventListener("mouseover", update); link.addEventListener("focus", update); return link; };

, , , , .

, URL , . .

. URL , , (. 17), , , .

( ). , .

, , , , «». , URL , «» . , .

try/catch update . «», toDataURL , SecurityError. URL javascript:. , , , .


URL. , URL .

function loadImageURL(cx, url) { var image = document.createElement("img"); image.addEventListener("load", function() { var color = cx.fillStyle, size = cx.lineWidth; cx.canvas.width = image.width; cx.canvas.height = image.height; cx.drawImage(image, 0, 0); cx.fillStyle = color; cx.strokeStyle = color; cx.lineWidth = size; }); image.src = url; }

, . - (fillStyle lineWidth), .

FileReader 18. readAsText readAsDataURL – , . , , URL , loadImageURL .

controls.openFile = function(cx) { var input = elt("input", {type: "file"}); input.addEventListener("change", function() { if (input.files.length == 0) return; var reader = new FileReader(); reader.addEventListener("load", function() { loadImageURL(cx, reader.result); }); reader.readAsDataURL(input.files[0]); }); return elt("div", null, "Open file: ", input); };

URL . , URL, “change”. , – Enter, load.

controls.openURL = function(cx) { var input = elt("input", {type: "text"}); var form = elt("form", null, "Open URL: ", input, elt("button", {type: "submit"}, "load")); form.addEventListener("submit", function(event) { event.preventDefault(); loadImageURL(cx, form.querySelector("input").value); }); return form; };

, , .


, , .

tools.Text = function(event, cx) { var text = prompt("Text:", ""); if (text) { var pos = relativePos(event, cx.canvas); cx.font = Math.max(7, cx.lineWidth) + "px sans-serif"; cx.fillText(text, pos.x, pos.y); } };

, sans-serif , . – 7 , .

- – “”. , , .

tools.Spray = function(event, cx) { var radius = cx.lineWidth / 2; var area = radius * radius * Math.PI; var dotsPerTick = Math.ceil(area / 30); var currentPos = relativePos(event, cx.canvas); var spray = setInterval(function() { for (var i = 0; i < dotsPerTick; i++) { var offset = randomPointInRadius(radius); cx.fillRect(currentPos.x + offset.x, currentPos.y + offset.y, 1, 1); } }, 25); trackDrag(function(event) { currentPos = relativePos(event, cx.canvas); }, function() { clearInterval(spray); }); };

setInterval 25 , . trackDrag , currentPos , .

, , 30. randomPointInRadius.

function randomPointInRadius(radius) { for (;;) { var x = Math.random() * 2 - 1; var y = Math.random() * 2 - 1; if (x * x + y * y <= 1) return {x: x * radius, y: y * radius}; } }

(-1,-1) (1,1). , , 1. , , .

. , Math.sin Math.cos . . , , .

. .

<link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>


. .


Rectangle, (. fillRect 16) . , , , . , .

, , . , , ?

, position: absolute, 13. , . pageX pageY , left, top, width height.

<script> tools.Rectangle = function(event, cx) { // }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>


– , , . .

. toDataURL , URL . getImageData, width, height data. data 0 255, - red, green, blue alpha ().

, , ( – ), , .

function pixelAt(cx, x, y) { var data = cx.getImageData(x, y, 1, 1); console.log(data.data); } var canvas = document.createElement("canvas"); var cx = canvas.getContext("2d"); pixelAt(cx, 10, 10); // → [0, 0, 0, 0] cx.fillStyle = "red"; cx.fillRect(10, 10, 1, 1); pixelAt(cx, 10, 10); // → [255, 0, 0, 255]

getImageData x y, , .

, . color . , fillStyle strokeStyle , .

, , CSS, rgb(R, G, B), 15.

getImageData , toDataURL – , , . try/catch alert.

<script> tools["Pick color"] = function(event, cx) { // Your code here. }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>


, , . , , , - .

, . , , , ( ), , .

, , :



, , , .

getImageData . , , . 7, , . (x,y) (x + y × width) × 4

(), () .

, , , . . - , 9. , , , , .

. , . , , .

fillRect, - , , .

<script> tools["Flood fill"] = function(event, cx) { // }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>

, . , , . , , ..

"mousedown" , , . , , "mousemove", , .

. fillStyle, strokeStyle, lineWidth .

. file, . URL .

. save . , . , .

DOM
30 DOM. - .

DOM HTML. HTML – DOM , - . querySelector , DOM .

DOM JavaScript, . DOM JavaScript. 13, DOM . , .

– elt 13. , , , , .

function elt(name, attributes) { var node = document.createElement(name); if (attributes) { for (var attr in attributes) if (attributes.hasOwnProperty(attr)) node.setAttribute(attr, attributes[attr]); } for (var i = 2; i < arguments.length; i++) { var child = arguments[i]; if (typeof child == "string") child = document.createTextNode(child); node.appendChild(child); } return node; }

, .


– createPaint, DOM, . , controls, .

var controls = Object.create(null); function createPaint(parent) { var canvas = elt("canvas", {width: 500, height: 300}); var cx = canvas.getContext("2d"); var toolbar = elt("div", {class: "toolbar"}); for (var name in controls) toolbar.appendChild(controls[name](cx)); var panel = elt("div", {class: "picturepanel"}, canvas); parent.appendChild(elt("div", null, panel, toolbar)); }

, – . – , ( fillStyle) ( lineWidth).

, , .


, – , . controls, , , . , .

var tools = Object.create(null); controls.tool = function(cx) { var select = elt("select"); for (var name in tools) select.appendChild(elt("option", null, name)); cx.canvas.addEventListener("mousedown", function(event) { if (event.which == 1) { tools[select.value](event, cx); event.preventDefault(); } }); return elt("span", null, "Tool: ", select); };

tool , "mousedown" , event context. preventDefault, .

– , . , . 13 getBoundingClientRect . , , . clientX clientY , .

function relativePos(event, element) { var rect = element.getBoundingClientRect(); return {x: Math.floor(event.clientX - rect.left), y: Math.floor(event.clientY - rect.top)}; }

"mousemove", . trackDrag .

function trackDrag(onMove, onEnd) { function end(event) { removeEventListener("mousemove", onMove); removeEventListener("mouseup", end); if (onEnd) onEnd(event); } addEventListener("mousemove", onMove); addEventListener("mouseup", end); }

. – , "mousemove", – , . .

.

tools.Line = function(event, cx, onEnd) { cx.lineCap = "round"; var pos = relativePos(event, cx.canvas); trackDrag(function(event) { cx.beginPath(); cx.moveTo(pos.x, pos.y); pos = relativePos(event, cx.canvas); cx.lineTo(pos.x, pos.y); cx.stroke(); }, onEnd); };

lineCap “round”, - , , . , . , , lineCap .

, "mousemove", , , , strokeStyle lineWidth, .

onEnd , trackDrag. , undefined, . , erase, .

tools.Erase = function(event, cx) { cx.globalCompositeOperation = "destination-out"; tools.Line(event, cx, function() { cx.globalCompositeOperation = "source-over"; }); };

globalCompositeOperation , . , "source-over", , , , . , , , .

“erase” globalCompositeOperation "destination-out", , .

. ( strokeStyle lineWidth ), . , , .


, , .

18 . . , . - . - "date", "email", "url" "number". . – “text”, , , . , , , , .

controls.color = function(cx) { var input = elt("input", {type: "color"}); input.addEventListener("change", function() { cx.fillStyle = input.value; cx.strokeStyle = input.value; }); return elt("span", null, "Color: ", input); };

color fillStyle strokeStyle .

.

controls.brushSize = function(cx) { var select = elt("select"); var sizes = [1, 2, 3, 5, 8, 12, 25, 35, 50, 75, 100]; sizes.forEach(function(size) { select.appendChild(elt("option", {value: size}, size + " pixels")); }); select.addEventListener("change", function() { cx.lineWidth = select.value; }); return elt("span", null, "Brush size: ", select); };

, , lineWidth .


, , URL . http: https:, URL , . URL , HTML :

data:text/html,<h1 style="color:red">Hello!</h1>

URL , , , . , , - .

toDataURL, URL , . . URL . , href , .

controls.save = function(cx) { var link = elt("a", {href: "/"}, "Save"); function update() { try { link.href = cx.canvas.toDataURL(); } catch (e) { if (e instanceof SecurityError) link.href = "javascript:alert(" + JSON.stringify("Can't save: " + e.toString()) + ")"; else throw e; } } link.addEventListener("mouseover", update); link.addEventListener("focus", update); return link; };

, , , , .

, URL , . .

. URL , , (. 17), , , .

( ). , .

, , , , «». , URL , «» . , .

try/catch update . «», toDataURL , SecurityError. URL javascript:. , , , .


URL. , URL .

function loadImageURL(cx, url) { var image = document.createElement("img"); image.addEventListener("load", function() { var color = cx.fillStyle, size = cx.lineWidth; cx.canvas.width = image.width; cx.canvas.height = image.height; cx.drawImage(image, 0, 0); cx.fillStyle = color; cx.strokeStyle = color; cx.lineWidth = size; }); image.src = url; }

, . - (fillStyle lineWidth), .

FileReader 18. readAsText readAsDataURL – , . , , URL , loadImageURL .

controls.openFile = function(cx) { var input = elt("input", {type: "file"}); input.addEventListener("change", function() { if (input.files.length == 0) return; var reader = new FileReader(); reader.addEventListener("load", function() { loadImageURL(cx, reader.result); }); reader.readAsDataURL(input.files[0]); }); return elt("div", null, "Open file: ", input); };

URL . , URL, “change”. , – Enter, load.

controls.openURL = function(cx) { var input = elt("input", {type: "text"}); var form = elt("form", null, "Open URL: ", input, elt("button", {type: "submit"}, "load")); form.addEventListener("submit", function(event) { event.preventDefault(); loadImageURL(cx, form.querySelector("input").value); }); return form; };

, , .


, , .

tools.Text = function(event, cx) { var text = prompt("Text:", ""); if (text) { var pos = relativePos(event, cx.canvas); cx.font = Math.max(7, cx.lineWidth) + "px sans-serif"; cx.fillText(text, pos.x, pos.y); } };

, sans-serif , . – 7 , .

- – “”. , , .

tools.Spray = function(event, cx) { var radius = cx.lineWidth / 2; var area = radius * radius * Math.PI; var dotsPerTick = Math.ceil(area / 30); var currentPos = relativePos(event, cx.canvas); var spray = setInterval(function() { for (var i = 0; i < dotsPerTick; i++) { var offset = randomPointInRadius(radius); cx.fillRect(currentPos.x + offset.x, currentPos.y + offset.y, 1, 1); } }, 25); trackDrag(function(event) { currentPos = relativePos(event, cx.canvas); }, function() { clearInterval(spray); }); };

setInterval 25 , . trackDrag , currentPos , .

, , 30. randomPointInRadius.

function randomPointInRadius(radius) { for (;;) { var x = Math.random() * 2 - 1; var y = Math.random() * 2 - 1; if (x * x + y * y <= 1) return {x: x * radius, y: y * radius}; } }

(-1,-1) (1,1). , , 1. , , .

. , Math.sin Math.cos . . , , .

. .

<link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>


. .


Rectangle, (. fillRect 16) . , , , . , .

, , . , , ?

, position: absolute, 13. , . pageX pageY , left, top, width height.

<script> tools.Rectangle = function(event, cx) { // }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>


– , , . .

. toDataURL , URL . getImageData, width, height data. data 0 255, - red, green, blue alpha ().

, , ( – ), , .

function pixelAt(cx, x, y) { var data = cx.getImageData(x, y, 1, 1); console.log(data.data); } var canvas = document.createElement("canvas"); var cx = canvas.getContext("2d"); pixelAt(cx, 10, 10); // → [0, 0, 0, 0] cx.fillStyle = "red"; cx.fillRect(10, 10, 1, 1); pixelAt(cx, 10, 10); // → [255, 0, 0, 255]

getImageData x y, , .

, . color . , fillStyle strokeStyle , .

, , CSS, rgb(R, G, B), 15.

getImageData , toDataURL – , , . try/catch alert.

<script> tools["Pick color"] = function(event, cx) { // Your code here. }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>


, , . , , , - .

, . , , , ( ), , .

, , :



, , , .

getImageData . , , . 7, , . (x,y) (x + y × width) × 4

(), () .

, , , . . - , 9. , , , , .

. , . , , .

fillRect, - , , .

<script> tools["Flood fill"] = function(event, cx) { // }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>

, . , , . , , ..

"mousedown" , , . , , "mousemove", , .

. fillStyle, strokeStyle, lineWidth .

. file, . URL .

. save . , . , .

DOM
30 DOM. - .

DOM HTML. HTML – DOM , - . querySelector , DOM .

DOM JavaScript, . DOM JavaScript. 13, DOM . , .

– elt 13. , , , , .

function elt(name, attributes) { var node = document.createElement(name); if (attributes) { for (var attr in attributes) if (attributes.hasOwnProperty(attr)) node.setAttribute(attr, attributes[attr]); } for (var i = 2; i < arguments.length; i++) { var child = arguments[i]; if (typeof child == "string") child = document.createTextNode(child); node.appendChild(child); } return node; }

, .


– createPaint, DOM, . , controls, .

var controls = Object.create(null); function createPaint(parent) { var canvas = elt("canvas", {width: 500, height: 300}); var cx = canvas.getContext("2d"); var toolbar = elt("div", {class: "toolbar"}); for (var name in controls) toolbar.appendChild(controls[name](cx)); var panel = elt("div", {class: "picturepanel"}, canvas); parent.appendChild(elt("div", null, panel, toolbar)); }

, – . – , ( fillStyle) ( lineWidth).

, , .


, – , . controls, , , . , .

var tools = Object.create(null); controls.tool = function(cx) { var select = elt("select"); for (var name in tools) select.appendChild(elt("option", null, name)); cx.canvas.addEventListener("mousedown", function(event) { if (event.which == 1) { tools[select.value](event, cx); event.preventDefault(); } }); return elt("span", null, "Tool: ", select); };

tool , "mousedown" , event context. preventDefault, .

– , . , . 13 getBoundingClientRect . , , . clientX clientY , .

function relativePos(event, element) { var rect = element.getBoundingClientRect(); return {x: Math.floor(event.clientX - rect.left), y: Math.floor(event.clientY - rect.top)}; }

"mousemove", . trackDrag .

function trackDrag(onMove, onEnd) { function end(event) { removeEventListener("mousemove", onMove); removeEventListener("mouseup", end); if (onEnd) onEnd(event); } addEventListener("mousemove", onMove); addEventListener("mouseup", end); }

. – , "mousemove", – , . .

.

tools.Line = function(event, cx, onEnd) { cx.lineCap = "round"; var pos = relativePos(event, cx.canvas); trackDrag(function(event) { cx.beginPath(); cx.moveTo(pos.x, pos.y); pos = relativePos(event, cx.canvas); cx.lineTo(pos.x, pos.y); cx.stroke(); }, onEnd); };

lineCap “round”, - , , . , . , , lineCap .

, "mousemove", , , , strokeStyle lineWidth, .

onEnd , trackDrag. , undefined, . , erase, .

tools.Erase = function(event, cx) { cx.globalCompositeOperation = "destination-out"; tools.Line(event, cx, function() { cx.globalCompositeOperation = "source-over"; }); };

globalCompositeOperation , . , "source-over", , , , . , , , .

“erase” globalCompositeOperation "destination-out", , .

. ( strokeStyle lineWidth ), . , , .


, , .

18 . . , . - . - "date", "email", "url" "number". . – “text”, , , . , , , , .

controls.color = function(cx) { var input = elt("input", {type: "color"}); input.addEventListener("change", function() { cx.fillStyle = input.value; cx.strokeStyle = input.value; }); return elt("span", null, "Color: ", input); };

color fillStyle strokeStyle .

.

controls.brushSize = function(cx) { var select = elt("select"); var sizes = [1, 2, 3, 5, 8, 12, 25, 35, 50, 75, 100]; sizes.forEach(function(size) { select.appendChild(elt("option", {value: size}, size + " pixels")); }); select.addEventListener("change", function() { cx.lineWidth = select.value; }); return elt("span", null, "Brush size: ", select); };

, , lineWidth .


, , URL . http: https:, URL , . URL , HTML :

data:text/html,<h1 style="color:red">Hello!</h1>

URL , , , . , , - .

toDataURL, URL , . . URL . , href , .

controls.save = function(cx) { var link = elt("a", {href: "/"}, "Save"); function update() { try { link.href = cx.canvas.toDataURL(); } catch (e) { if (e instanceof SecurityError) link.href = "javascript:alert(" + JSON.stringify("Can't save: " + e.toString()) + ")"; else throw e; } } link.addEventListener("mouseover", update); link.addEventListener("focus", update); return link; };

, , , , .

, URL , . .

. URL , , (. 17), , , .

( ). , .

, , , , «». , URL , «» . , .

try/catch update . «», toDataURL , SecurityError. URL javascript:. , , , .


URL. , URL .

function loadImageURL(cx, url) { var image = document.createElement("img"); image.addEventListener("load", function() { var color = cx.fillStyle, size = cx.lineWidth; cx.canvas.width = image.width; cx.canvas.height = image.height; cx.drawImage(image, 0, 0); cx.fillStyle = color; cx.strokeStyle = color; cx.lineWidth = size; }); image.src = url; }

, . - (fillStyle lineWidth), .

FileReader 18. readAsText readAsDataURL – , . , , URL , loadImageURL .

controls.openFile = function(cx) { var input = elt("input", {type: "file"}); input.addEventListener("change", function() { if (input.files.length == 0) return; var reader = new FileReader(); reader.addEventListener("load", function() { loadImageURL(cx, reader.result); }); reader.readAsDataURL(input.files[0]); }); return elt("div", null, "Open file: ", input); };

URL . , URL, “change”. , – Enter, load.

controls.openURL = function(cx) { var input = elt("input", {type: "text"}); var form = elt("form", null, "Open URL: ", input, elt("button", {type: "submit"}, "load")); form.addEventListener("submit", function(event) { event.preventDefault(); loadImageURL(cx, form.querySelector("input").value); }); return form; };

, , .


, , .

tools.Text = function(event, cx) { var text = prompt("Text:", ""); if (text) { var pos = relativePos(event, cx.canvas); cx.font = Math.max(7, cx.lineWidth) + "px sans-serif"; cx.fillText(text, pos.x, pos.y); } };

, sans-serif , . – 7 , .

- – “”. , , .

tools.Spray = function(event, cx) { var radius = cx.lineWidth / 2; var area = radius * radius * Math.PI; var dotsPerTick = Math.ceil(area / 30); var currentPos = relativePos(event, cx.canvas); var spray = setInterval(function() { for (var i = 0; i < dotsPerTick; i++) { var offset = randomPointInRadius(radius); cx.fillRect(currentPos.x + offset.x, currentPos.y + offset.y, 1, 1); } }, 25); trackDrag(function(event) { currentPos = relativePos(event, cx.canvas); }, function() { clearInterval(spray); }); };

setInterval 25 , . trackDrag , currentPos , .

, , 30. randomPointInRadius.

function randomPointInRadius(radius) { for (;;) { var x = Math.random() * 2 - 1; var y = Math.random() * 2 - 1; if (x * x + y * y <= 1) return {x: x * radius, y: y * radius}; } }

(-1,-1) (1,1). , , 1. , , .

. , Math.sin Math.cos . . , , .

. .

<link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>


. .


Rectangle, (. fillRect 16) . , , , . , .

, , . , , ?

, position: absolute, 13. , . pageX pageY , left, top, width height.

<script> tools.Rectangle = function(event, cx) { // }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>


– , , . .

. toDataURL , URL . getImageData, width, height data. data 0 255, - red, green, blue alpha ().

, , ( – ), , .

function pixelAt(cx, x, y) { var data = cx.getImageData(x, y, 1, 1); console.log(data.data); } var canvas = document.createElement("canvas"); var cx = canvas.getContext("2d"); pixelAt(cx, 10, 10); // → [0, 0, 0, 0] cx.fillStyle = "red"; cx.fillRect(10, 10, 1, 1); pixelAt(cx, 10, 10); // → [255, 0, 0, 255]

getImageData x y, , .

, . color . , fillStyle strokeStyle , .

, , CSS, rgb(R, G, B), 15.

getImageData , toDataURL – , , . try/catch alert.

<script> tools["Pick color"] = function(event, cx) { // Your code here. }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>


, , . , , , - .

, . , , , ( ), , .

, , :



, , , .

getImageData . , , . 7, , . (x,y) (x + y × width) × 4

(), () .

, , , . . - , 9. , , , , .

. , . , , .

fillRect, - , , .

<script> tools["Flood fill"] = function(event, cx) { // }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>

, . , , . , , ..

"mousedown" , , . , , "mousemove", , .

. fillStyle, strokeStyle, lineWidth .

. file, . URL .

. save . , . , .

DOM
30 DOM. - .

DOM HTML. HTML – DOM , - . querySelector , DOM .

DOM JavaScript, . DOM JavaScript. 13, DOM . , .

– elt 13. , , , , .

function elt(name, attributes) { var node = document.createElement(name); if (attributes) { for (var attr in attributes) if (attributes.hasOwnProperty(attr)) node.setAttribute(attr, attributes[attr]); } for (var i = 2; i < arguments.length; i++) { var child = arguments[i]; if (typeof child == "string") child = document.createTextNode(child); node.appendChild(child); } return node; }

, .


– createPaint, DOM, . , controls, .

var controls = Object.create(null); function createPaint(parent) { var canvas = elt("canvas", {width: 500, height: 300}); var cx = canvas.getContext("2d"); var toolbar = elt("div", {class: "toolbar"}); for (var name in controls) toolbar.appendChild(controls[name](cx)); var panel = elt("div", {class: "picturepanel"}, canvas); parent.appendChild(elt("div", null, panel, toolbar)); }

, – . – , ( fillStyle) ( lineWidth).

, , .


, – , . controls, , , . , .

var tools = Object.create(null); controls.tool = function(cx) { var select = elt("select"); for (var name in tools) select.appendChild(elt("option", null, name)); cx.canvas.addEventListener("mousedown", function(event) { if (event.which == 1) { tools[select.value](event, cx); event.preventDefault(); } }); return elt("span", null, "Tool: ", select); };

tool , "mousedown" , event context. preventDefault, .

– , . , . 13 getBoundingClientRect . , , . clientX clientY , .

function relativePos(event, element) { var rect = element.getBoundingClientRect(); return {x: Math.floor(event.clientX - rect.left), y: Math.floor(event.clientY - rect.top)}; }

"mousemove", . trackDrag .

function trackDrag(onMove, onEnd) { function end(event) { removeEventListener("mousemove", onMove); removeEventListener("mouseup", end); if (onEnd) onEnd(event); } addEventListener("mousemove", onMove); addEventListener("mouseup", end); }

. – , "mousemove", – , . .

.

tools.Line = function(event, cx, onEnd) { cx.lineCap = "round"; var pos = relativePos(event, cx.canvas); trackDrag(function(event) { cx.beginPath(); cx.moveTo(pos.x, pos.y); pos = relativePos(event, cx.canvas); cx.lineTo(pos.x, pos.y); cx.stroke(); }, onEnd); };

lineCap “round”, - , , . , . , , lineCap .

, "mousemove", , , , strokeStyle lineWidth, .

onEnd , trackDrag. , undefined, . , erase, .

tools.Erase = function(event, cx) { cx.globalCompositeOperation = "destination-out"; tools.Line(event, cx, function() { cx.globalCompositeOperation = "source-over"; }); };

globalCompositeOperation , . , "source-over", , , , . , , , .

“erase” globalCompositeOperation "destination-out", , .

. ( strokeStyle lineWidth ), . , , .


, , .

18 . . , . - . - "date", "email", "url" "number". . – “text”, , , . , , , , .

controls.color = function(cx) { var input = elt("input", {type: "color"}); input.addEventListener("change", function() { cx.fillStyle = input.value; cx.strokeStyle = input.value; }); return elt("span", null, "Color: ", input); };

color fillStyle strokeStyle .

.

controls.brushSize = function(cx) { var select = elt("select"); var sizes = [1, 2, 3, 5, 8, 12, 25, 35, 50, 75, 100]; sizes.forEach(function(size) { select.appendChild(elt("option", {value: size}, size + " pixels")); }); select.addEventListener("change", function() { cx.lineWidth = select.value; }); return elt("span", null, "Brush size: ", select); };

, , lineWidth .


, , URL . http: https:, URL , . URL , HTML :

data:text/html,<h1 style="color:red">Hello!</h1>

URL , , , . , , - .

toDataURL, URL , . . URL . , href , .

controls.save = function(cx) { var link = elt("a", {href: "/"}, "Save"); function update() { try { link.href = cx.canvas.toDataURL(); } catch (e) { if (e instanceof SecurityError) link.href = "javascript:alert(" + JSON.stringify("Can't save: " + e.toString()) + ")"; else throw e; } } link.addEventListener("mouseover", update); link.addEventListener("focus", update); return link; };

, , , , .

, URL , . .

. URL , , (. 17), , , .

( ). , .

, , , , «». , URL , «» . , .

try/catch update . «», toDataURL , SecurityError. URL javascript:. , , , .


URL. , URL .

function loadImageURL(cx, url) { var image = document.createElement("img"); image.addEventListener("load", function() { var color = cx.fillStyle, size = cx.lineWidth; cx.canvas.width = image.width; cx.canvas.height = image.height; cx.drawImage(image, 0, 0); cx.fillStyle = color; cx.strokeStyle = color; cx.lineWidth = size; }); image.src = url; }

, . - (fillStyle lineWidth), .

FileReader 18. readAsText readAsDataURL – , . , , URL , loadImageURL .

controls.openFile = function(cx) { var input = elt("input", {type: "file"}); input.addEventListener("change", function() { if (input.files.length == 0) return; var reader = new FileReader(); reader.addEventListener("load", function() { loadImageURL(cx, reader.result); }); reader.readAsDataURL(input.files[0]); }); return elt("div", null, "Open file: ", input); };

URL . , URL, “change”. , – Enter, load.

controls.openURL = function(cx) { var input = elt("input", {type: "text"}); var form = elt("form", null, "Open URL: ", input, elt("button", {type: "submit"}, "load")); form.addEventListener("submit", function(event) { event.preventDefault(); loadImageURL(cx, form.querySelector("input").value); }); return form; };

, , .


, , .

tools.Text = function(event, cx) { var text = prompt("Text:", ""); if (text) { var pos = relativePos(event, cx.canvas); cx.font = Math.max(7, cx.lineWidth) + "px sans-serif"; cx.fillText(text, pos.x, pos.y); } };

, sans-serif , . – 7 , .

- – “”. , , .

tools.Spray = function(event, cx) { var radius = cx.lineWidth / 2; var area = radius * radius * Math.PI; var dotsPerTick = Math.ceil(area / 30); var currentPos = relativePos(event, cx.canvas); var spray = setInterval(function() { for (var i = 0; i < dotsPerTick; i++) { var offset = randomPointInRadius(radius); cx.fillRect(currentPos.x + offset.x, currentPos.y + offset.y, 1, 1); } }, 25); trackDrag(function(event) { currentPos = relativePos(event, cx.canvas); }, function() { clearInterval(spray); }); };

setInterval 25 , . trackDrag , currentPos , .

, , 30. randomPointInRadius.

function randomPointInRadius(radius) { for (;;) { var x = Math.random() * 2 - 1; var y = Math.random() * 2 - 1; if (x * x + y * y <= 1) return {x: x * radius, y: y * radius}; } }

(-1,-1) (1,1). , , 1. , , .

. , Math.sin Math.cos . . , , .

. .

<link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>


. .


Rectangle, (. fillRect 16) . , , , . , .

, , . , , ?

, position: absolute, 13. , . pageX pageY , left, top, width height.

<script> tools.Rectangle = function(event, cx) { // }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>


– , , . .

. toDataURL , URL . getImageData, width, height data. data 0 255, - red, green, blue alpha ().

, , ( – ), , .

function pixelAt(cx, x, y) { var data = cx.getImageData(x, y, 1, 1); console.log(data.data); } var canvas = document.createElement("canvas"); var cx = canvas.getContext("2d"); pixelAt(cx, 10, 10); // → [0, 0, 0, 0] cx.fillStyle = "red"; cx.fillRect(10, 10, 1, 1); pixelAt(cx, 10, 10); // → [255, 0, 0, 255]

getImageData x y, , .

, . color . , fillStyle strokeStyle , .

, , CSS, rgb(R, G, B), 15.

getImageData , toDataURL – , , . try/catch alert.

<script> tools["Pick color"] = function(event, cx) { // Your code here. }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>


, , . , , , - .

, . , , , ( ), , .

, , :



, , , .

getImageData . , , . 7, , . (x,y) (x + y × width) × 4

(), () .

, , , . . - , 9. , , , , .

. , . , , .

fillRect, - , , .

<script> tools["Flood fill"] = function(event, cx) { // }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>

 ,      .    ,     ,      .     ,   ,    .. 
 
      "mousedown"  ,   ,   .  , ,    "mousemove",      ,           . 
 
         .         fillStyle, strokeStyle,  lineWidth     . 
 
       .    file,       .   URL     . 
 
    .  save       .    ,       .   ,   . 
 
  DOM 
       30  DOM.   -  . 
 
      DOM  HTML.     HTML    –   DOM        ,    -   .       querySelector   ,     DOM  . 
 
      DOM      JavaScript,   .       DOM   JavaScript.      13,      DOM  .      ,    . 
 
   –    elt   13.        ,     ,  ,    ,      . 
 
 function elt(name, attributes) { var node = document.createElement(name); if (attributes) { for (var attr in attributes) if (attributes.hasOwnProperty(attr)) node.setAttribute(attr, attributes[attr]); } for (var i = 2; i < arguments.length; i++) { var child = arguments[i]; if (typeof child == "string") child = document.createTextNode(child); node.appendChild(child); } return node; } 
 
       ,       . 
 
  
    –  createPaint,      DOM,     .      ,    controls,           . 
 
 var controls = Object.create(null); function createPaint(parent) { var canvas = elt("canvas", {width: 500, height: 300}); var cx = canvas.getContext("2d"); var toolbar = elt("div", {class: "toolbar"}); for (var name in controls) toolbar.appendChild(controls[name](cx)); var panel = elt("div", {class: "picturepanel"}, canvas); parent.appendChild(elt("div", null, panel, toolbar)); } 
 
           ,    –   .        –    ,   (  fillStyle)    (  lineWidth). 
 
          ,      ,     . 
 
   
   ,    –  ,    .      controls,        ,           ,       .       ,          . 
 
 var tools = Object.create(null); controls.tool = function(cx) { var select = elt("select"); for (var name in tools) select.appendChild(elt("option", null, name)); cx.canvas.addEventListener("mousedown", function(event) { if (event.which == 1) { tools[select.value](event, cx); event.preventDefault(); } }); return elt("span", null, "Tool: ", select); }; 
 
   tool        ,    "mousedown"          ,    event  context.    preventDefault,          . 
 
    – ,     .   ,           .    13   getBoundingClientRect     .  ,   ,     .    clientX  clientY      ,                . 
 
 function relativePos(event, element) { var rect = element.getBoundingClientRect(); return {x: Math.floor(event.clientX - rect.left), y: Math.floor(event.clientY - rect.top)}; } 
 
       "mousemove",    .  trackDrag       . 
 
 function trackDrag(onMove, onEnd) { function end(event) { removeEventListener("mousemove", onMove); removeEventListener("mouseup", end); if (onEnd) onEnd(event); } addEventListener("mousemove", onMove); addEventListener("mouseup", end); } 
 
    .  – ,      "mousemove",   – ,     .      . 
 
           . 
 
 tools.Line = function(event, cx, onEnd) { cx.lineCap = "round"; var pos = relativePos(event, cx.canvas); trackDrag(function(event) { cx.beginPath(); cx.moveTo(pos.x, pos.y); pos = relativePos(event, cx.canvas); cx.lineTo(pos.x, pos.y); cx.stroke(); }, onEnd); }; 
 
      lineCap  “round”, -      ,   ,     .     ,      .     ,      ,     lineCap  . 
 
 ,    "mousemove",  ,   ,         ,      strokeStyle  lineWidth,     . 
 
  onEnd   ,  trackDrag.        ,        undefined,       .        ,  erase,      . 
 
 tools.Erase = function(event, cx) { cx.globalCompositeOperation = "destination-out"; tools.Line(event, cx, function() { cx.globalCompositeOperation = "source-over"; }); }; 
 
  globalCompositeOperation   ,        .  ,   "source-over",  ,  ,  ,   .   ,    ,     ,   . 
 
  “erase”  globalCompositeOperation  "destination-out",    ,     . 
 
         .          (     strokeStyle  lineWidth  ),   . ,   ,  . 
 
     
 ,              ,      . 
 
   18      .        .          ,            .    - .   - "date", "email", "url"  "number".      .      – “text”,     ,     ,       . ,   ,       ,       ,       . 
 
 controls.color = function(cx) { var input = elt("input", {type: "color"}); input.addEventListener("change", function() { cx.fillStyle = input.value; cx.strokeStyle = input.value; }); return elt("span", null, "Color: ", input); }; 
 
     color     fillStyle  strokeStyle    . 
 
      . 
 
 controls.brushSize = function(cx) { var select = elt("select"); var sizes = [1, 2, 3, 5, 8, 12, 25, 35, 50, 75, 100]; sizes.forEach(function(size) { select.appendChild(elt("option", {value: size}, size + " pixels")); }); select.addEventListener("change", function() { cx.lineWidth = select.value; }); return elt("span", null, "Brush size: ", select); }; 
 
       ,    ,    lineWidth    . 
 
  
  ,     ,      URL  .     http:  https:, URL      ,      .  URL  ,   HTML : 
 
 data:text/html,<h1 style="color:red">Hello!</h1> 
 
  URL    , , ,       .           ,  ,      - . 
 
       toDataURL,   URL  ,        .            .        URL   .       ,      href  ,            . 
 
 controls.save = function(cx) { var link = elt("a", {href: "/"}, "Save"); function update() { try { link.href = cx.canvas.toDataURL(); } catch (e) { if (e instanceof SecurityError) link.href = "javascript:alert(" + JSON.stringify("Can't save: " + e.toString()) + ")"; else throw e; } } link.addEventListener("mouseover", update); link.addEventListener("focus", update); return link; }; 
 
  ,          ,       ,      ,     . 
 
     ,      URL  ,    .       . 
 
           .     URL   ,      ,       (.  17),    ,    ,    . 
 
        (   ).        ,      . 
 
     ,  ,  ,    ,     «».  ,  URL  ,     «» .    ,     . 
 
     try/catch   update   .   «»,  toDataURL  ,   SecurityError.           URL   javascript:.     ,   ,     ,   . 
 
   
              URL.    ,      URL     . 
 
 function loadImageURL(cx, url) { var image = document.createElement("img"); image.addEventListener("load", function() { var color = cx.fillStyle, size = cx.lineWidth; cx.canvas.width = image.width; cx.canvas.height = image.height; cx.drawImage(image, 0, 0); cx.fillStyle = color; cx.strokeStyle = color; cx.lineWidth = size; }); image.src = url; } 
 
     ,    . -          (fillStyle  lineWidth),              . 
 
         FileReader   18.     readAsText        readAsDataURL –   ,   .   ,   ,  URL  ,     loadImageURL    . 
 
 controls.openFile = function(cx) { var input = elt("input", {type: "file"}); input.addEventListener("change", function() { if (input.files.length == 0) return; var reader = new FileReader(); reader.addEventListener("load", function() { loadImageURL(cx, reader.result); }); reader.readAsDataURL(input.files[0]); }); return elt("div", null, "Open file: ", input); }; 
 
    URL  .       ,       URL,        “change”.         ,     –    Enter,     load. 
 
 controls.openURL = function(cx) { var input = elt("input", {type: "text"}); var form = elt("form", null, "Open URL: ", input, elt("button", {type: "submit"}, "load")); form.addEventListener("submit", function(event) { event.preventDefault(); loadImageURL(cx, form.querySelector("input").value); }); return form; }; 
 
      ,   ,      . 
 
  
        ,    ,     . 
 
 tools.Text = function(event, cx) { var text = prompt("Text:", ""); if (text) { var pos = relativePos(event, cx.canvas); cx.font = Math.max(7, cx.lineWidth) + "px sans-serif"; cx.fillText(text, pos.x, pos.y); } }; 
 
          ,        sans-serif   ,    .   – 7 ,      . 
 
      - – “”.      ,    ,            . 
 
 tools.Spray = function(event, cx) { var radius = cx.lineWidth / 2; var area = radius * radius * Math.PI; var dotsPerTick = Math.ceil(area / 30); var currentPos = relativePos(event, cx.canvas); var spray = setInterval(function() { for (var i = 0; i < dotsPerTick; i++) { var offset = randomPointInRadius(radius); cx.fillRect(currentPos.x + offset.x, currentPos.y + offset.y, 1, 1); } }, 25); trackDrag(function(event) { currentPos = relativePos(event, cx.canvas); }, function() { clearInterval(spray); }); }; 
 
   setInterval      25 ,    .  trackDrag   ,  currentPos     ,       . 
 
  ,         ,           30.         randomPointInRadius. 
 
 function randomPointInRadius(radius) { for (;;) { var x = Math.random() * 2 - 1; var y = Math.random() * 2 - 1; if (x * x + y * y <= 1) return {x: x * radius, y: y * radius}; } } 
 
        (-1,-1)  (1,1).   ,  ,         1.    ,    ,   . 
 
      .       ,        Math.sin  Math.cos   .            .    ,    ,   . 
 
      .    . 
 
 <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body> 
 
  
        .    . 
 
  
   Rectangle,   (.  fillRect   16)  .      ,     ,    ,    . ,         . 
 
   ,  ,        .           ,       ,    ? 
 
   ,    position: absolute,      13.   ,      .  pageX  pageY          ,      left, top, width  height. 
 
 <script> tools.Rectangle = function(event, cx) { //   }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body> 
 
   
      –  ,        ,    .   . 
 
        .  toDataURL    ,       URL   .       getImageData,          width, height  data.   data     0  255,        - red, green, blue  alpha (). 
 
        ,  ,    (  –  ),   ,      . 
 
 function pixelAt(cx, x, y) { var data = cx.getImageData(x, y, 1, 1); console.log(data.data); } var canvas = document.createElement("canvas"); var cx = canvas.getContext("2d"); pixelAt(cx, 10, 10); // → [0, 0, 0, 0] cx.fillStyle = "red"; cx.fillRect(10, 10, 1, 1); pixelAt(cx, 10, 10); // → [255, 0, 0, 255] 
 
  getImageData     x  y,    ,      . 
 
     ,         .        color   .  ,  fillStyle  strokeStyle    ,   . 
 
 ,      ,   CSS,    rgb(R, G, B),      15. 
 
  getImageData    ,   toDataURL –   ,      ,    .   try/catch        alert. 
 
 <script> tools["Pick color"] = function(event, cx) { // Your code here. }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body> 
 
  
    ,  ,        . ,           ,   ,     -   . 
 
              ,    .       ,      ,      ,         (   ),    ,     . 
 
     , ,       : 
 
  
 
          ,   ,      ,   . 
 
    getImageData    .  ,       ,          .           7,  ,      .       (x,y)    (x + y × width) × 4 
 
      (),          () . 
 
            , ,   ,       .         .      -      ,    9.        ,    ,       ,    ,    . 
 
      .      ,       .  ,  ,    . 
 
       fillRect,   -  ,  ,     . 
 
 <script> tools["Flood fill"] = function(event, cx) { //   }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body> 

, . , , . , , ..

"mousedown" , , . , , "mousemove", , .

. fillStyle, strokeStyle, lineWidth .

. file, . URL .

. save . , . , .

DOM
30 DOM. - .

DOM HTML. HTML – DOM , - . querySelector , DOM .

DOM JavaScript, . DOM JavaScript. 13, DOM . , .

– elt 13. , , , , .

function elt(name, attributes) { var node = document.createElement(name); if (attributes) { for (var attr in attributes) if (attributes.hasOwnProperty(attr)) node.setAttribute(attr, attributes[attr]); } for (var i = 2; i < arguments.length; i++) { var child = arguments[i]; if (typeof child == "string") child = document.createTextNode(child); node.appendChild(child); } return node; }

, .


– createPaint, DOM, . , controls, .

var controls = Object.create(null); function createPaint(parent) { var canvas = elt("canvas", {width: 500, height: 300}); var cx = canvas.getContext("2d"); var toolbar = elt("div", {class: "toolbar"}); for (var name in controls) toolbar.appendChild(controls[name](cx)); var panel = elt("div", {class: "picturepanel"}, canvas); parent.appendChild(elt("div", null, panel, toolbar)); }

, – . – , ( fillStyle) ( lineWidth).

, , .


, – , . controls, , , . , .

var tools = Object.create(null); controls.tool = function(cx) { var select = elt("select"); for (var name in tools) select.appendChild(elt("option", null, name)); cx.canvas.addEventListener("mousedown", function(event) { if (event.which == 1) { tools[select.value](event, cx); event.preventDefault(); } }); return elt("span", null, "Tool: ", select); };

tool , "mousedown" , event context. preventDefault, .

– , . , . 13 getBoundingClientRect . , , . clientX clientY , .

function relativePos(event, element) { var rect = element.getBoundingClientRect(); return {x: Math.floor(event.clientX - rect.left), y: Math.floor(event.clientY - rect.top)}; }

"mousemove", . trackDrag .

function trackDrag(onMove, onEnd) { function end(event) { removeEventListener("mousemove", onMove); removeEventListener("mouseup", end); if (onEnd) onEnd(event); } addEventListener("mousemove", onMove); addEventListener("mouseup", end); }

. – , "mousemove", – , . .

.

tools.Line = function(event, cx, onEnd) { cx.lineCap = "round"; var pos = relativePos(event, cx.canvas); trackDrag(function(event) { cx.beginPath(); cx.moveTo(pos.x, pos.y); pos = relativePos(event, cx.canvas); cx.lineTo(pos.x, pos.y); cx.stroke(); }, onEnd); };

lineCap “round”, - , , . , . , , lineCap .

, "mousemove", , , , strokeStyle lineWidth, .

onEnd , trackDrag. , undefined, . , erase, .

tools.Erase = function(event, cx) { cx.globalCompositeOperation = "destination-out"; tools.Line(event, cx, function() { cx.globalCompositeOperation = "source-over"; }); };

globalCompositeOperation , . , "source-over", , , , . , , , .

“erase” globalCompositeOperation "destination-out", , .

. ( strokeStyle lineWidth ), . , , .


, , .

18 . . , . - . - "date", "email", "url" "number". . – “text”, , , . , , , , .

controls.color = function(cx) { var input = elt("input", {type: "color"}); input.addEventListener("change", function() { cx.fillStyle = input.value; cx.strokeStyle = input.value; }); return elt("span", null, "Color: ", input); };

color fillStyle strokeStyle .

.

controls.brushSize = function(cx) { var select = elt("select"); var sizes = [1, 2, 3, 5, 8, 12, 25, 35, 50, 75, 100]; sizes.forEach(function(size) { select.appendChild(elt("option", {value: size}, size + " pixels")); }); select.addEventListener("change", function() { cx.lineWidth = select.value; }); return elt("span", null, "Brush size: ", select); };

, , lineWidth .


, , URL . http: https:, URL , . URL , HTML :

data:text/html,<h1 style="color:red">Hello!</h1>

URL , , , . , , - .

toDataURL, URL , . . URL . , href , .

controls.save = function(cx) { var link = elt("a", {href: "/"}, "Save"); function update() { try { link.href = cx.canvas.toDataURL(); } catch (e) { if (e instanceof SecurityError) link.href = "javascript:alert(" + JSON.stringify("Can't save: " + e.toString()) + ")"; else throw e; } } link.addEventListener("mouseover", update); link.addEventListener("focus", update); return link; };

, , , , .

, URL , . .

. URL , , (. 17), , , .

( ). , .

, , , , «». , URL , «» . , .

try/catch update . «», toDataURL , SecurityError. URL javascript:. , , , .


URL. , URL .

function loadImageURL(cx, url) { var image = document.createElement("img"); image.addEventListener("load", function() { var color = cx.fillStyle, size = cx.lineWidth; cx.canvas.width = image.width; cx.canvas.height = image.height; cx.drawImage(image, 0, 0); cx.fillStyle = color; cx.strokeStyle = color; cx.lineWidth = size; }); image.src = url; }

, . - (fillStyle lineWidth), .

FileReader 18. readAsText readAsDataURL – , . , , URL , loadImageURL .

controls.openFile = function(cx) { var input = elt("input", {type: "file"}); input.addEventListener("change", function() { if (input.files.length == 0) return; var reader = new FileReader(); reader.addEventListener("load", function() { loadImageURL(cx, reader.result); }); reader.readAsDataURL(input.files[0]); }); return elt("div", null, "Open file: ", input); };

URL . , URL, “change”. , – Enter, load.

controls.openURL = function(cx) { var input = elt("input", {type: "text"}); var form = elt("form", null, "Open URL: ", input, elt("button", {type: "submit"}, "load")); form.addEventListener("submit", function(event) { event.preventDefault(); loadImageURL(cx, form.querySelector("input").value); }); return form; };

, , .


, , .

tools.Text = function(event, cx) { var text = prompt("Text:", ""); if (text) { var pos = relativePos(event, cx.canvas); cx.font = Math.max(7, cx.lineWidth) + "px sans-serif"; cx.fillText(text, pos.x, pos.y); } };

, sans-serif , . – 7 , .

- – “”. , , .

tools.Spray = function(event, cx) { var radius = cx.lineWidth / 2; var area = radius * radius * Math.PI; var dotsPerTick = Math.ceil(area / 30); var currentPos = relativePos(event, cx.canvas); var spray = setInterval(function() { for (var i = 0; i < dotsPerTick; i++) { var offset = randomPointInRadius(radius); cx.fillRect(currentPos.x + offset.x, currentPos.y + offset.y, 1, 1); } }, 25); trackDrag(function(event) { currentPos = relativePos(event, cx.canvas); }, function() { clearInterval(spray); }); };

setInterval 25 , . trackDrag , currentPos , .

, , 30. randomPointInRadius.

function randomPointInRadius(radius) { for (;;) { var x = Math.random() * 2 - 1; var y = Math.random() * 2 - 1; if (x * x + y * y <= 1) return {x: x * radius, y: y * radius}; } }

(-1,-1) (1,1). , , 1. , , .

. , Math.sin Math.cos . . , , .

. .

<link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>


. .


Rectangle, (. fillRect 16) . , , , . , .

, , . , , ?

, position: absolute, 13. , . pageX pageY , left, top, width height.

<script> tools.Rectangle = function(event, cx) { // }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>


– , , . .

. toDataURL , URL . getImageData, width, height data. data 0 255, - red, green, blue alpha ().

, , ( – ), , .

function pixelAt(cx, x, y) { var data = cx.getImageData(x, y, 1, 1); console.log(data.data); } var canvas = document.createElement("canvas"); var cx = canvas.getContext("2d"); pixelAt(cx, 10, 10); // → [0, 0, 0, 0] cx.fillStyle = "red"; cx.fillRect(10, 10, 1, 1); pixelAt(cx, 10, 10); // → [255, 0, 0, 255]

getImageData x y, , .

, . color . , fillStyle strokeStyle , .

, , CSS, rgb(R, G, B), 15.

getImageData , toDataURL – , , . try/catch alert.

<script> tools["Pick color"] = function(event, cx) { // Your code here. }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>


, , . , , , - .

, . , , , ( ), , .

, , :



, , , .

getImageData . , , . 7, , . (x,y) (x + y × width) × 4

(), () .

, , , . . - , 9. , , , , .

. , . , , .

fillRect, - , , .

<script> tools["Flood fill"] = function(event, cx) { // }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>

, . , , . , , ..

"mousedown" , , . , , "mousemove", , .

. fillStyle, strokeStyle, lineWidth .

. file, . URL .

. save . , . , .

DOM
30 DOM. - .

DOM HTML. HTML – DOM , - . querySelector , DOM .

DOM JavaScript, . DOM JavaScript. 13, DOM . , .

– elt 13. , , , , .

function elt(name, attributes) { var node = document.createElement(name); if (attributes) { for (var attr in attributes) if (attributes.hasOwnProperty(attr)) node.setAttribute(attr, attributes[attr]); } for (var i = 2; i < arguments.length; i++) { var child = arguments[i]; if (typeof child == "string") child = document.createTextNode(child); node.appendChild(child); } return node; }

, .


– createPaint, DOM, . , controls, .

var controls = Object.create(null); function createPaint(parent) { var canvas = elt("canvas", {width: 500, height: 300}); var cx = canvas.getContext("2d"); var toolbar = elt("div", {class: "toolbar"}); for (var name in controls) toolbar.appendChild(controls[name](cx)); var panel = elt("div", {class: "picturepanel"}, canvas); parent.appendChild(elt("div", null, panel, toolbar)); }

, – . – , ( fillStyle) ( lineWidth).

, , .


, – , . controls, , , . , .

var tools = Object.create(null); controls.tool = function(cx) { var select = elt("select"); for (var name in tools) select.appendChild(elt("option", null, name)); cx.canvas.addEventListener("mousedown", function(event) { if (event.which == 1) { tools[select.value](event, cx); event.preventDefault(); } }); return elt("span", null, "Tool: ", select); };

tool , "mousedown" , event context. preventDefault, .

– , . , . 13 getBoundingClientRect . , , . clientX clientY , .

function relativePos(event, element) { var rect = element.getBoundingClientRect(); return {x: Math.floor(event.clientX - rect.left), y: Math.floor(event.clientY - rect.top)}; }

"mousemove", . trackDrag .

function trackDrag(onMove, onEnd) { function end(event) { removeEventListener("mousemove", onMove); removeEventListener("mouseup", end); if (onEnd) onEnd(event); } addEventListener("mousemove", onMove); addEventListener("mouseup", end); }

. – , "mousemove", – , . .

.

tools.Line = function(event, cx, onEnd) { cx.lineCap = "round"; var pos = relativePos(event, cx.canvas); trackDrag(function(event) { cx.beginPath(); cx.moveTo(pos.x, pos.y); pos = relativePos(event, cx.canvas); cx.lineTo(pos.x, pos.y); cx.stroke(); }, onEnd); };

lineCap “round”, - , , . , . , , lineCap .

, "mousemove", , , , strokeStyle lineWidth, .

onEnd , trackDrag. , undefined, . , erase, .

tools.Erase = function(event, cx) { cx.globalCompositeOperation = "destination-out"; tools.Line(event, cx, function() { cx.globalCompositeOperation = "source-over"; }); };

globalCompositeOperation , . , "source-over", , , , . , , , .

“erase” globalCompositeOperation "destination-out", , .

. ( strokeStyle lineWidth ), . , , .


, , .

18 . . , . - . - "date", "email", "url" "number". . – “text”, , , . , , , , .

controls.color = function(cx) { var input = elt("input", {type: "color"}); input.addEventListener("change", function() { cx.fillStyle = input.value; cx.strokeStyle = input.value; }); return elt("span", null, "Color: ", input); };

color fillStyle strokeStyle .

.

controls.brushSize = function(cx) { var select = elt("select"); var sizes = [1, 2, 3, 5, 8, 12, 25, 35, 50, 75, 100]; sizes.forEach(function(size) { select.appendChild(elt("option", {value: size}, size + " pixels")); }); select.addEventListener("change", function() { cx.lineWidth = select.value; }); return elt("span", null, "Brush size: ", select); };

, , lineWidth .


, , URL . http: https:, URL , . URL , HTML :

data:text/html,<h1 style="color:red">Hello!</h1>

URL , , , . , , - .

toDataURL, URL , . . URL . , href , .

controls.save = function(cx) { var link = elt("a", {href: "/"}, "Save"); function update() { try { link.href = cx.canvas.toDataURL(); } catch (e) { if (e instanceof SecurityError) link.href = "javascript:alert(" + JSON.stringify("Can't save: " + e.toString()) + ")"; else throw e; } } link.addEventListener("mouseover", update); link.addEventListener("focus", update); return link; };

, , , , .

, URL , . .

. URL , , (. 17), , , .

( ). , .

, , , , «». , URL , «» . , .

try/catch update . «», toDataURL , SecurityError. URL javascript:. , , , .


URL. , URL .

function loadImageURL(cx, url) { var image = document.createElement("img"); image.addEventListener("load", function() { var color = cx.fillStyle, size = cx.lineWidth; cx.canvas.width = image.width; cx.canvas.height = image.height; cx.drawImage(image, 0, 0); cx.fillStyle = color; cx.strokeStyle = color; cx.lineWidth = size; }); image.src = url; }

, . - (fillStyle lineWidth), .

FileReader 18. readAsText readAsDataURL – , . , , URL , loadImageURL .

controls.openFile = function(cx) { var input = elt("input", {type: "file"}); input.addEventListener("change", function() { if (input.files.length == 0) return; var reader = new FileReader(); reader.addEventListener("load", function() { loadImageURL(cx, reader.result); }); reader.readAsDataURL(input.files[0]); }); return elt("div", null, "Open file: ", input); };

URL . , URL, “change”. , – Enter, load.

controls.openURL = function(cx) { var input = elt("input", {type: "text"}); var form = elt("form", null, "Open URL: ", input, elt("button", {type: "submit"}, "load")); form.addEventListener("submit", function(event) { event.preventDefault(); loadImageURL(cx, form.querySelector("input").value); }); return form; };

, , .


, , .

tools.Text = function(event, cx) { var text = prompt("Text:", ""); if (text) { var pos = relativePos(event, cx.canvas); cx.font = Math.max(7, cx.lineWidth) + "px sans-serif"; cx.fillText(text, pos.x, pos.y); } };

, sans-serif , . – 7 , .

- – “”. , , .

tools.Spray = function(event, cx) { var radius = cx.lineWidth / 2; var area = radius * radius * Math.PI; var dotsPerTick = Math.ceil(area / 30); var currentPos = relativePos(event, cx.canvas); var spray = setInterval(function() { for (var i = 0; i < dotsPerTick; i++) { var offset = randomPointInRadius(radius); cx.fillRect(currentPos.x + offset.x, currentPos.y + offset.y, 1, 1); } }, 25); trackDrag(function(event) { currentPos = relativePos(event, cx.canvas); }, function() { clearInterval(spray); }); };

setInterval 25 , . trackDrag , currentPos , .

, , 30. randomPointInRadius.

function randomPointInRadius(radius) { for (;;) { var x = Math.random() * 2 - 1; var y = Math.random() * 2 - 1; if (x * x + y * y <= 1) return {x: x * radius, y: y * radius}; } }

(-1,-1) (1,1). , , 1. , , .

. , Math.sin Math.cos . . , , .

. .

<link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>


. .


Rectangle, (. fillRect 16) . , , , . , .

, , . , , ?

, position: absolute, 13. , . pageX pageY , left, top, width height.

<script> tools.Rectangle = function(event, cx) { // }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>


– , , . .

. toDataURL , URL . getImageData, width, height data. data 0 255, - red, green, blue alpha ().

, , ( – ), , .

function pixelAt(cx, x, y) { var data = cx.getImageData(x, y, 1, 1); console.log(data.data); } var canvas = document.createElement("canvas"); var cx = canvas.getContext("2d"); pixelAt(cx, 10, 10); // → [0, 0, 0, 0] cx.fillStyle = "red"; cx.fillRect(10, 10, 1, 1); pixelAt(cx, 10, 10); // → [255, 0, 0, 255]

getImageData x y, , .

, . color . , fillStyle strokeStyle , .

, , CSS, rgb(R, G, B), 15.

getImageData , toDataURL – , , . try/catch alert.

<script> tools["Pick color"] = function(event, cx) { // Your code here. }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>


, , . , , , - .

, . , , , ( ), , .

, , :



, , , .

getImageData . , , . 7, , . (x,y) (x + y × width) × 4

(), () .

, , , . . - , 9. , , , , .

. , . , , .

fillRect, - , , .

<script> tools["Flood fill"] = function(event, cx) { // }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>

, . , , . , , ..

"mousedown" , , . , , "mousemove", , .

. fillStyle, strokeStyle, lineWidth .

. file, . URL .

. save . , . , .

DOM
30 DOM. - .

DOM HTML. HTML – DOM , - . querySelector , DOM .

DOM JavaScript, . DOM JavaScript. 13, DOM . , .

– elt 13. , , , , .

function elt(name, attributes) { var node = document.createElement(name); if (attributes) { for (var attr in attributes) if (attributes.hasOwnProperty(attr)) node.setAttribute(attr, attributes[attr]); } for (var i = 2; i < arguments.length; i++) { var child = arguments[i]; if (typeof child == "string") child = document.createTextNode(child); node.appendChild(child); } return node; }

, .


– createPaint, DOM, . , controls, .

var controls = Object.create(null); function createPaint(parent) { var canvas = elt("canvas", {width: 500, height: 300}); var cx = canvas.getContext("2d"); var toolbar = elt("div", {class: "toolbar"}); for (var name in controls) toolbar.appendChild(controls[name](cx)); var panel = elt("div", {class: "picturepanel"}, canvas); parent.appendChild(elt("div", null, panel, toolbar)); }

, – . – , ( fillStyle) ( lineWidth).

, , .


, – , . controls, , , . , .

var tools = Object.create(null); controls.tool = function(cx) { var select = elt("select"); for (var name in tools) select.appendChild(elt("option", null, name)); cx.canvas.addEventListener("mousedown", function(event) { if (event.which == 1) { tools[select.value](event, cx); event.preventDefault(); } }); return elt("span", null, "Tool: ", select); };

tool , "mousedown" , event context. preventDefault, .

– , . , . 13 getBoundingClientRect . , , . clientX clientY , .

function relativePos(event, element) { var rect = element.getBoundingClientRect(); return {x: Math.floor(event.clientX - rect.left), y: Math.floor(event.clientY - rect.top)}; }

"mousemove", . trackDrag .

function trackDrag(onMove, onEnd) { function end(event) { removeEventListener("mousemove", onMove); removeEventListener("mouseup", end); if (onEnd) onEnd(event); } addEventListener("mousemove", onMove); addEventListener("mouseup", end); }

. – , "mousemove", – , . .

.

tools.Line = function(event, cx, onEnd) { cx.lineCap = "round"; var pos = relativePos(event, cx.canvas); trackDrag(function(event) { cx.beginPath(); cx.moveTo(pos.x, pos.y); pos = relativePos(event, cx.canvas); cx.lineTo(pos.x, pos.y); cx.stroke(); }, onEnd); };

lineCap “round”, - , , . , . , , lineCap .

, "mousemove", , , , strokeStyle lineWidth, .

onEnd , trackDrag. , undefined, . , erase, .

tools.Erase = function(event, cx) { cx.globalCompositeOperation = "destination-out"; tools.Line(event, cx, function() { cx.globalCompositeOperation = "source-over"; }); };

globalCompositeOperation , . , "source-over", , , , . , , , .

“erase” globalCompositeOperation "destination-out", , .

. ( strokeStyle lineWidth ), . , , .


, , .

18 . . , . - . - "date", "email", "url" "number". . – “text”, , , . , , , , .

controls.color = function(cx) { var input = elt("input", {type: "color"}); input.addEventListener("change", function() { cx.fillStyle = input.value; cx.strokeStyle = input.value; }); return elt("span", null, "Color: ", input); };

color fillStyle strokeStyle .

.

controls.brushSize = function(cx) { var select = elt("select"); var sizes = [1, 2, 3, 5, 8, 12, 25, 35, 50, 75, 100]; sizes.forEach(function(size) { select.appendChild(elt("option", {value: size}, size + " pixels")); }); select.addEventListener("change", function() { cx.lineWidth = select.value; }); return elt("span", null, "Brush size: ", select); };

, , lineWidth .


, , URL . http: https:, URL , . URL , HTML :

data:text/html,<h1 style="color:red">Hello!</h1>

URL , , , . , , - .

toDataURL, URL , . . URL . , href , .

controls.save = function(cx) { var link = elt("a", {href: "/"}, "Save"); function update() { try { link.href = cx.canvas.toDataURL(); } catch (e) { if (e instanceof SecurityError) link.href = "javascript:alert(" + JSON.stringify("Can't save: " + e.toString()) + ")"; else throw e; } } link.addEventListener("mouseover", update); link.addEventListener("focus", update); return link; };

, , , , .

, URL , . .

. URL , , (. 17), , , .

( ). , .

, , , , «». , URL , «» . , .

try/catch update . «», toDataURL , SecurityError. URL javascript:. , , , .


URL. , URL .

function loadImageURL(cx, url) { var image = document.createElement("img"); image.addEventListener("load", function() { var color = cx.fillStyle, size = cx.lineWidth; cx.canvas.width = image.width; cx.canvas.height = image.height; cx.drawImage(image, 0, 0); cx.fillStyle = color; cx.strokeStyle = color; cx.lineWidth = size; }); image.src = url; }

, . - (fillStyle lineWidth), .

FileReader 18. readAsText readAsDataURL – , . , , URL , loadImageURL .

controls.openFile = function(cx) { var input = elt("input", {type: "file"}); input.addEventListener("change", function() { if (input.files.length == 0) return; var reader = new FileReader(); reader.addEventListener("load", function() { loadImageURL(cx, reader.result); }); reader.readAsDataURL(input.files[0]); }); return elt("div", null, "Open file: ", input); };

URL . , URL, “change”. , – Enter, load.

controls.openURL = function(cx) { var input = elt("input", {type: "text"}); var form = elt("form", null, "Open URL: ", input, elt("button", {type: "submit"}, "load")); form.addEventListener("submit", function(event) { event.preventDefault(); loadImageURL(cx, form.querySelector("input").value); }); return form; };

, , .


, , .

tools.Text = function(event, cx) { var text = prompt("Text:", ""); if (text) { var pos = relativePos(event, cx.canvas); cx.font = Math.max(7, cx.lineWidth) + "px sans-serif"; cx.fillText(text, pos.x, pos.y); } };

, sans-serif , . – 7 , .

- – “”. , , .

tools.Spray = function(event, cx) { var radius = cx.lineWidth / 2; var area = radius * radius * Math.PI; var dotsPerTick = Math.ceil(area / 30); var currentPos = relativePos(event, cx.canvas); var spray = setInterval(function() { for (var i = 0; i < dotsPerTick; i++) { var offset = randomPointInRadius(radius); cx.fillRect(currentPos.x + offset.x, currentPos.y + offset.y, 1, 1); } }, 25); trackDrag(function(event) { currentPos = relativePos(event, cx.canvas); }, function() { clearInterval(spray); }); };

setInterval 25 , . trackDrag , currentPos , .

, , 30. randomPointInRadius.

function randomPointInRadius(radius) { for (;;) { var x = Math.random() * 2 - 1; var y = Math.random() * 2 - 1; if (x * x + y * y <= 1) return {x: x * radius, y: y * radius}; } }

(-1,-1) (1,1). , , 1. , , .

. , Math.sin Math.cos . . , , .

. .

<link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>


. .


Rectangle, (. fillRect 16) . , , , . , .

, , . , , ?

, position: absolute, 13. , . pageX pageY , left, top, width height.

<script> tools.Rectangle = function(event, cx) { // }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>


– , , . .

. toDataURL , URL . getImageData, width, height data. data 0 255, - red, green, blue alpha ().

, , ( – ), , .

function pixelAt(cx, x, y) { var data = cx.getImageData(x, y, 1, 1); console.log(data.data); } var canvas = document.createElement("canvas"); var cx = canvas.getContext("2d"); pixelAt(cx, 10, 10); // → [0, 0, 0, 0] cx.fillStyle = "red"; cx.fillRect(10, 10, 1, 1); pixelAt(cx, 10, 10); // → [255, 0, 0, 255]

getImageData x y, , .

, . color . , fillStyle strokeStyle , .

, , CSS, rgb(R, G, B), 15.

getImageData , toDataURL – , , . try/catch alert.

<script> tools["Pick color"] = function(event, cx) { // Your code here. }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>


, , . , , , - .

, . , , , ( ), , .

, , :



, , , .

getImageData . , , . 7, , . (x,y) (x + y × width) × 4

(), () .

, , , . . - , 9. , , , , .

. , . , , .

fillRect, - , , .

<script> tools["Flood fill"] = function(event, cx) { // }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>

 ,      .    ,     ,      .     ,   ,    .. 
 
      "mousedown"  ,   ,   .  , ,    "mousemove",      ,           . 
 
         .         fillStyle, strokeStyle,  lineWidth     . 
 
       .    file,       .   URL     . 
 
    .  save       .    ,       .   ,   . 
 
  DOM 
       30  DOM.   -  . 
 
      DOM  HTML.     HTML    –   DOM        ,    -   .       querySelector   ,     DOM  . 
 
      DOM      JavaScript,   .       DOM   JavaScript.      13,      DOM  .      ,    . 
 
   –    elt   13.        ,     ,  ,    ,      . 
 
 function elt(name, attributes) { var node = document.createElement(name); if (attributes) { for (var attr in attributes) if (attributes.hasOwnProperty(attr)) node.setAttribute(attr, attributes[attr]); } for (var i = 2; i < arguments.length; i++) { var child = arguments[i]; if (typeof child == "string") child = document.createTextNode(child); node.appendChild(child); } return node; } 
 
       ,       . 
 
  
    –  createPaint,      DOM,     .      ,    controls,           . 
 
 var controls = Object.create(null); function createPaint(parent) { var canvas = elt("canvas", {width: 500, height: 300}); var cx = canvas.getContext("2d"); var toolbar = elt("div", {class: "toolbar"}); for (var name in controls) toolbar.appendChild(controls[name](cx)); var panel = elt("div", {class: "picturepanel"}, canvas); parent.appendChild(elt("div", null, panel, toolbar)); } 
 
           ,    –   .        –    ,   (  fillStyle)    (  lineWidth). 
 
          ,      ,     . 
 
   
   ,    –  ,    .      controls,        ,           ,       .       ,          . 
 
 var tools = Object.create(null); controls.tool = function(cx) { var select = elt("select"); for (var name in tools) select.appendChild(elt("option", null, name)); cx.canvas.addEventListener("mousedown", function(event) { if (event.which == 1) { tools[select.value](event, cx); event.preventDefault(); } }); return elt("span", null, "Tool: ", select); }; 
 
   tool        ,    "mousedown"          ,    event  context.    preventDefault,          . 
 
    – ,     .   ,           .    13   getBoundingClientRect     .  ,   ,     .    clientX  clientY      ,                . 
 
 function relativePos(event, element) { var rect = element.getBoundingClientRect(); return {x: Math.floor(event.clientX - rect.left), y: Math.floor(event.clientY - rect.top)}; } 
 
       "mousemove",    .  trackDrag       . 
 
 function trackDrag(onMove, onEnd) { function end(event) { removeEventListener("mousemove", onMove); removeEventListener("mouseup", end); if (onEnd) onEnd(event); } addEventListener("mousemove", onMove); addEventListener("mouseup", end); } 
 
    .  – ,      "mousemove",   – ,     .      . 
 
           . 
 
 tools.Line = function(event, cx, onEnd) { cx.lineCap = "round"; var pos = relativePos(event, cx.canvas); trackDrag(function(event) { cx.beginPath(); cx.moveTo(pos.x, pos.y); pos = relativePos(event, cx.canvas); cx.lineTo(pos.x, pos.y); cx.stroke(); }, onEnd); }; 
 
      lineCap  “round”, -      ,   ,     .     ,      .     ,      ,     lineCap  . 
 
 ,    "mousemove",  ,   ,         ,      strokeStyle  lineWidth,     . 
 
  onEnd   ,  trackDrag.        ,        undefined,       .        ,  erase,      . 
 
 tools.Erase = function(event, cx) { cx.globalCompositeOperation = "destination-out"; tools.Line(event, cx, function() { cx.globalCompositeOperation = "source-over"; }); }; 
 
  globalCompositeOperation   ,        .  ,   "source-over",  ,  ,  ,   .   ,    ,     ,   . 
 
  “erase”  globalCompositeOperation  "destination-out",    ,     . 
 
         .          (     strokeStyle  lineWidth  ),   . ,   ,  . 
 
     
 ,              ,      . 
 
   18      .        .          ,            .    - .   - "date", "email", "url"  "number".      .      – “text”,     ,     ,       . ,   ,       ,       ,       . 
 
 controls.color = function(cx) { var input = elt("input", {type: "color"}); input.addEventListener("change", function() { cx.fillStyle = input.value; cx.strokeStyle = input.value; }); return elt("span", null, "Color: ", input); }; 
 
     color     fillStyle  strokeStyle    . 
 
      . 
 
 controls.brushSize = function(cx) { var select = elt("select"); var sizes = [1, 2, 3, 5, 8, 12, 25, 35, 50, 75, 100]; sizes.forEach(function(size) { select.appendChild(elt("option", {value: size}, size + " pixels")); }); select.addEventListener("change", function() { cx.lineWidth = select.value; }); return elt("span", null, "Brush size: ", select); }; 
 
       ,    ,    lineWidth    . 
 
  
  ,     ,      URL  .     http:  https:, URL      ,      .  URL  ,   HTML : 
 
 data:text/html,<h1 style="color:red">Hello!</h1> 
 
  URL    , , ,       .           ,  ,      - . 
 
       toDataURL,   URL  ,        .            .        URL   .       ,      href  ,            . 
 
 controls.save = function(cx) { var link = elt("a", {href: "/"}, "Save"); function update() { try { link.href = cx.canvas.toDataURL(); } catch (e) { if (e instanceof SecurityError) link.href = "javascript:alert(" + JSON.stringify("Can't save: " + e.toString()) + ")"; else throw e; } } link.addEventListener("mouseover", update); link.addEventListener("focus", update); return link; }; 
 
  ,          ,       ,      ,     . 
 
     ,      URL  ,    .       . 
 
           .     URL   ,      ,       (.  17),    ,    ,    . 
 
        (   ).        ,      . 
 
     ,  ,  ,    ,     «».  ,  URL  ,     «» .    ,     . 
 
     try/catch   update   .   «»,  toDataURL  ,   SecurityError.           URL   javascript:.     ,   ,     ,   . 
 
   
              URL.    ,      URL     . 
 
 function loadImageURL(cx, url) { var image = document.createElement("img"); image.addEventListener("load", function() { var color = cx.fillStyle, size = cx.lineWidth; cx.canvas.width = image.width; cx.canvas.height = image.height; cx.drawImage(image, 0, 0); cx.fillStyle = color; cx.strokeStyle = color; cx.lineWidth = size; }); image.src = url; } 
 
     ,    . -          (fillStyle  lineWidth),              . 
 
         FileReader   18.     readAsText        readAsDataURL –   ,   .   ,   ,  URL  ,     loadImageURL    . 
 
 controls.openFile = function(cx) { var input = elt("input", {type: "file"}); input.addEventListener("change", function() { if (input.files.length == 0) return; var reader = new FileReader(); reader.addEventListener("load", function() { loadImageURL(cx, reader.result); }); reader.readAsDataURL(input.files[0]); }); return elt("div", null, "Open file: ", input); }; 
 
    URL  .       ,       URL,        “change”.         ,     –    Enter,     load. 
 
 controls.openURL = function(cx) { var input = elt("input", {type: "text"}); var form = elt("form", null, "Open URL: ", input, elt("button", {type: "submit"}, "load")); form.addEventListener("submit", function(event) { event.preventDefault(); loadImageURL(cx, form.querySelector("input").value); }); return form; }; 
 
      ,   ,      . 
 
  
        ,    ,     . 
 
 tools.Text = function(event, cx) { var text = prompt("Text:", ""); if (text) { var pos = relativePos(event, cx.canvas); cx.font = Math.max(7, cx.lineWidth) + "px sans-serif"; cx.fillText(text, pos.x, pos.y); } }; 
 
          ,        sans-serif   ,    .   – 7 ,      . 
 
      - – “”.      ,    ,            . 
 
 tools.Spray = function(event, cx) { var radius = cx.lineWidth / 2; var area = radius * radius * Math.PI; var dotsPerTick = Math.ceil(area / 30); var currentPos = relativePos(event, cx.canvas); var spray = setInterval(function() { for (var i = 0; i < dotsPerTick; i++) { var offset = randomPointInRadius(radius); cx.fillRect(currentPos.x + offset.x, currentPos.y + offset.y, 1, 1); } }, 25); trackDrag(function(event) { currentPos = relativePos(event, cx.canvas); }, function() { clearInterval(spray); }); }; 
 
   setInterval      25 ,    .  trackDrag   ,  currentPos     ,       . 
 
  ,         ,           30.         randomPointInRadius. 
 
 function randomPointInRadius(radius) { for (;;) { var x = Math.random() * 2 - 1; var y = Math.random() * 2 - 1; if (x * x + y * y <= 1) return {x: x * radius, y: y * radius}; } } 
 
        (-1,-1)  (1,1).   ,  ,         1.    ,    ,   . 
 
      .       ,        Math.sin  Math.cos   .            .    ,    ,   . 
 
      .    . 
 
 <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body> 
 
  
        .    . 
 
  
   Rectangle,   (.  fillRect   16)  .      ,     ,    ,    . ,         . 
 
   ,  ,        .           ,       ,    ? 
 
   ,    position: absolute,      13.   ,      .  pageX  pageY          ,      left, top, width  height. 
 
 <script> tools.Rectangle = function(event, cx) { //   }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body> 
 
   
      –  ,        ,    .   . 
 
        .  toDataURL    ,       URL   .       getImageData,          width, height  data.   data     0  255,        - red, green, blue  alpha (). 
 
        ,  ,    (  –  ),   ,      . 
 
 function pixelAt(cx, x, y) { var data = cx.getImageData(x, y, 1, 1); console.log(data.data); } var canvas = document.createElement("canvas"); var cx = canvas.getContext("2d"); pixelAt(cx, 10, 10); // → [0, 0, 0, 0] cx.fillStyle = "red"; cx.fillRect(10, 10, 1, 1); pixelAt(cx, 10, 10); // → [255, 0, 0, 255] 
 
  getImageData     x  y,    ,      . 
 
     ,         .        color   .  ,  fillStyle  strokeStyle    ,   . 
 
 ,      ,   CSS,    rgb(R, G, B),      15. 
 
  getImageData    ,   toDataURL –   ,      ,    .   try/catch        alert. 
 
 <script> tools["Pick color"] = function(event, cx) { // Your code here. }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body> 
 
  
    ,  ,        . ,           ,   ,     -   . 
 
              ,    .       ,      ,      ,         (   ),    ,     . 
 
     , ,       : 
 
  
 
          ,   ,      ,   . 
 
    getImageData    .  ,       ,          .           7,  ,      .       (x,y)    (x + y × width) × 4 
 
      (),          () . 
 
            , ,   ,       .         .      -      ,    9.        ,    ,       ,    ,    . 
 
      .      ,       .  ,  ,    . 
 
       fillRect,   -  ,  ,     . 
 
 <script> tools["Flood fill"] = function(event, cx) { //   }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body> 

, . , , . , , ..

"mousedown" , , . , , "mousemove", , .

. fillStyle, strokeStyle, lineWidth .

. file, . URL .

. save . , . , .

DOM
30 DOM. - .

DOM HTML. HTML – DOM , - . querySelector , DOM .

DOM JavaScript, . DOM JavaScript. 13, DOM . , .

– elt 13. , , , , .

function elt(name, attributes) { var node = document.createElement(name); if (attributes) { for (var attr in attributes) if (attributes.hasOwnProperty(attr)) node.setAttribute(attr, attributes[attr]); } for (var i = 2; i < arguments.length; i++) { var child = arguments[i]; if (typeof child == "string") child = document.createTextNode(child); node.appendChild(child); } return node; }

, .


– createPaint, DOM, . , controls, .

var controls = Object.create(null); function createPaint(parent) { var canvas = elt("canvas", {width: 500, height: 300}); var cx = canvas.getContext("2d"); var toolbar = elt("div", {class: "toolbar"}); for (var name in controls) toolbar.appendChild(controls[name](cx)); var panel = elt("div", {class: "picturepanel"}, canvas); parent.appendChild(elt("div", null, panel, toolbar)); }

, – . – , ( fillStyle) ( lineWidth).

, , .


, – , . controls, , , . , .

var tools = Object.create(null); controls.tool = function(cx) { var select = elt("select"); for (var name in tools) select.appendChild(elt("option", null, name)); cx.canvas.addEventListener("mousedown", function(event) { if (event.which == 1) { tools[select.value](event, cx); event.preventDefault(); } }); return elt("span", null, "Tool: ", select); };

tool , "mousedown" , event context. preventDefault, .

– , . , . 13 getBoundingClientRect . , , . clientX clientY , .

function relativePos(event, element) { var rect = element.getBoundingClientRect(); return {x: Math.floor(event.clientX - rect.left), y: Math.floor(event.clientY - rect.top)}; }

"mousemove", . trackDrag .

function trackDrag(onMove, onEnd) { function end(event) { removeEventListener("mousemove", onMove); removeEventListener("mouseup", end); if (onEnd) onEnd(event); } addEventListener("mousemove", onMove); addEventListener("mouseup", end); }

. – , "mousemove", – , . .

.

tools.Line = function(event, cx, onEnd) { cx.lineCap = "round"; var pos = relativePos(event, cx.canvas); trackDrag(function(event) { cx.beginPath(); cx.moveTo(pos.x, pos.y); pos = relativePos(event, cx.canvas); cx.lineTo(pos.x, pos.y); cx.stroke(); }, onEnd); };

lineCap “round”, - , , . , . , , lineCap .

, "mousemove", , , , strokeStyle lineWidth, .

onEnd , trackDrag. , undefined, . , erase, .

tools.Erase = function(event, cx) { cx.globalCompositeOperation = "destination-out"; tools.Line(event, cx, function() { cx.globalCompositeOperation = "source-over"; }); };

globalCompositeOperation , . , "source-over", , , , . , , , .

“erase” globalCompositeOperation "destination-out", , .

. ( strokeStyle lineWidth ), . , , .


, , .

18 . . , . - . - "date", "email", "url" "number". . – “text”, , , . , , , , .

controls.color = function(cx) { var input = elt("input", {type: "color"}); input.addEventListener("change", function() { cx.fillStyle = input.value; cx.strokeStyle = input.value; }); return elt("span", null, "Color: ", input); };

color fillStyle strokeStyle .

.

controls.brushSize = function(cx) { var select = elt("select"); var sizes = [1, 2, 3, 5, 8, 12, 25, 35, 50, 75, 100]; sizes.forEach(function(size) { select.appendChild(elt("option", {value: size}, size + " pixels")); }); select.addEventListener("change", function() { cx.lineWidth = select.value; }); return elt("span", null, "Brush size: ", select); };

, , lineWidth .


, , URL . http: https:, URL , . URL , HTML :

data:text/html,<h1 style="color:red">Hello!</h1>

URL , , , . , , - .

toDataURL, URL , . . URL . , href , .

controls.save = function(cx) { var link = elt("a", {href: "/"}, "Save"); function update() { try { link.href = cx.canvas.toDataURL(); } catch (e) { if (e instanceof SecurityError) link.href = "javascript:alert(" + JSON.stringify("Can't save: " + e.toString()) + ")"; else throw e; } } link.addEventListener("mouseover", update); link.addEventListener("focus", update); return link; };

, , , , .

, URL , . .

. URL , , (. 17), , , .

( ). , .

, , , , «». , URL , «» . , .

try/catch update . «», toDataURL , SecurityError. URL javascript:. , , , .


URL. , URL .

function loadImageURL(cx, url) { var image = document.createElement("img"); image.addEventListener("load", function() { var color = cx.fillStyle, size = cx.lineWidth; cx.canvas.width = image.width; cx.canvas.height = image.height; cx.drawImage(image, 0, 0); cx.fillStyle = color; cx.strokeStyle = color; cx.lineWidth = size; }); image.src = url; }

, . - (fillStyle lineWidth), .

FileReader 18. readAsText readAsDataURL – , . , , URL , loadImageURL .

controls.openFile = function(cx) { var input = elt("input", {type: "file"}); input.addEventListener("change", function() { if (input.files.length == 0) return; var reader = new FileReader(); reader.addEventListener("load", function() { loadImageURL(cx, reader.result); }); reader.readAsDataURL(input.files[0]); }); return elt("div", null, "Open file: ", input); };

URL . , URL, “change”. , – Enter, load.

controls.openURL = function(cx) { var input = elt("input", {type: "text"}); var form = elt("form", null, "Open URL: ", input, elt("button", {type: "submit"}, "load")); form.addEventListener("submit", function(event) { event.preventDefault(); loadImageURL(cx, form.querySelector("input").value); }); return form; };

, , .


, , .

tools.Text = function(event, cx) { var text = prompt("Text:", ""); if (text) { var pos = relativePos(event, cx.canvas); cx.font = Math.max(7, cx.lineWidth) + "px sans-serif"; cx.fillText(text, pos.x, pos.y); } };

, sans-serif , . – 7 , .

- – “”. , , .

tools.Spray = function(event, cx) { var radius = cx.lineWidth / 2; var area = radius * radius * Math.PI; var dotsPerTick = Math.ceil(area / 30); var currentPos = relativePos(event, cx.canvas); var spray = setInterval(function() { for (var i = 0; i < dotsPerTick; i++) { var offset = randomPointInRadius(radius); cx.fillRect(currentPos.x + offset.x, currentPos.y + offset.y, 1, 1); } }, 25); trackDrag(function(event) { currentPos = relativePos(event, cx.canvas); }, function() { clearInterval(spray); }); };

setInterval 25 , . trackDrag , currentPos , .

, , 30. randomPointInRadius.

function randomPointInRadius(radius) { for (;;) { var x = Math.random() * 2 - 1; var y = Math.random() * 2 - 1; if (x * x + y * y <= 1) return {x: x * radius, y: y * radius}; } }

(-1,-1) (1,1). , , 1. , , .

. , Math.sin Math.cos . . , , .

. .

<link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>


. .


Rectangle, (. fillRect 16) . , , , . , .

, , . , , ?

, position: absolute, 13. , . pageX pageY , left, top, width height.

<script> tools.Rectangle = function(event, cx) { // }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>


– , , . .

. toDataURL , URL . getImageData, width, height data. data 0 255, - red, green, blue alpha ().

, , ( – ), , .

function pixelAt(cx, x, y) { var data = cx.getImageData(x, y, 1, 1); console.log(data.data); } var canvas = document.createElement("canvas"); var cx = canvas.getContext("2d"); pixelAt(cx, 10, 10); // → [0, 0, 0, 0] cx.fillStyle = "red"; cx.fillRect(10, 10, 1, 1); pixelAt(cx, 10, 10); // → [255, 0, 0, 255]

getImageData x y, , .

, . color . , fillStyle strokeStyle , .

, , CSS, rgb(R, G, B), 15.

getImageData , toDataURL – , , . try/catch alert.

<script> tools["Pick color"] = function(event, cx) { // Your code here. }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>


, , . , , , - .

, . , , , ( ), , .

, , :



, , , .

getImageData . , , . 7, , . (x,y) (x + y × width) × 4

(), () .

, , , . . - , 9. , , , , .

. , . , , .

fillRect, - , , .

<script> tools["Flood fill"] = function(event, cx) { // }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>

 ,      .    ,     ,      .     ,   ,    .. 
 
      "mousedown"  ,   ,   .  , ,    "mousemove",      ,           . 
 
         .         fillStyle, strokeStyle,  lineWidth     . 
 
       .    file,       .   URL     . 
 
    .  save       .    ,       .   ,   . 
 
  DOM 
       30  DOM.   -  . 
 
      DOM  HTML.     HTML    –   DOM        ,    -   .       querySelector   ,     DOM  . 
 
      DOM      JavaScript,   .       DOM   JavaScript.      13,      DOM  .      ,    . 
 
   –    elt   13.        ,     ,  ,    ,      . 
 
 function elt(name, attributes) { var node = document.createElement(name); if (attributes) { for (var attr in attributes) if (attributes.hasOwnProperty(attr)) node.setAttribute(attr, attributes[attr]); } for (var i = 2; i < arguments.length; i++) { var child = arguments[i]; if (typeof child == "string") child = document.createTextNode(child); node.appendChild(child); } return node; } 
 
       ,       . 
 
  
    –  createPaint,      DOM,     .      ,    controls,           . 
 
 var controls = Object.create(null); function createPaint(parent) { var canvas = elt("canvas", {width: 500, height: 300}); var cx = canvas.getContext("2d"); var toolbar = elt("div", {class: "toolbar"}); for (var name in controls) toolbar.appendChild(controls[name](cx)); var panel = elt("div", {class: "picturepanel"}, canvas); parent.appendChild(elt("div", null, panel, toolbar)); } 
 
           ,    –   .        –    ,   (  fillStyle)    (  lineWidth). 
 
          ,      ,     . 
 
   
   ,    –  ,    .      controls,        ,           ,       .       ,          . 
 
 var tools = Object.create(null); controls.tool = function(cx) { var select = elt("select"); for (var name in tools) select.appendChild(elt("option", null, name)); cx.canvas.addEventListener("mousedown", function(event) { if (event.which == 1) { tools[select.value](event, cx); event.preventDefault(); } }); return elt("span", null, "Tool: ", select); }; 
 
   tool        ,    "mousedown"          ,    event  context.    preventDefault,          . 
 
    – ,     .   ,           .    13   getBoundingClientRect     .  ,   ,     .    clientX  clientY      ,                . 
 
 function relativePos(event, element) { var rect = element.getBoundingClientRect(); return {x: Math.floor(event.clientX - rect.left), y: Math.floor(event.clientY - rect.top)}; } 
 
       "mousemove",    .  trackDrag       . 
 
 function trackDrag(onMove, onEnd) { function end(event) { removeEventListener("mousemove", onMove); removeEventListener("mouseup", end); if (onEnd) onEnd(event); } addEventListener("mousemove", onMove); addEventListener("mouseup", end); } 
 
    .  – ,      "mousemove",   – ,     .      . 
 
           . 
 
 tools.Line = function(event, cx, onEnd) { cx.lineCap = "round"; var pos = relativePos(event, cx.canvas); trackDrag(function(event) { cx.beginPath(); cx.moveTo(pos.x, pos.y); pos = relativePos(event, cx.canvas); cx.lineTo(pos.x, pos.y); cx.stroke(); }, onEnd); }; 
 
      lineCap  “round”, -      ,   ,     .     ,      .     ,      ,     lineCap  . 
 
 ,    "mousemove",  ,   ,         ,      strokeStyle  lineWidth,     . 
 
  onEnd   ,  trackDrag.        ,        undefined,       .        ,  erase,      . 
 
 tools.Erase = function(event, cx) { cx.globalCompositeOperation = "destination-out"; tools.Line(event, cx, function() { cx.globalCompositeOperation = "source-over"; }); }; 
 
  globalCompositeOperation   ,        .  ,   "source-over",  ,  ,  ,   .   ,    ,     ,   . 
 
  “erase”  globalCompositeOperation  "destination-out",    ,     . 
 
         .          (     strokeStyle  lineWidth  ),   . ,   ,  . 
 
     
 ,              ,      . 
 
   18      .        .          ,            .    - .   - "date", "email", "url"  "number".      .      – “text”,     ,     ,       . ,   ,       ,       ,       . 
 
 controls.color = function(cx) { var input = elt("input", {type: "color"}); input.addEventListener("change", function() { cx.fillStyle = input.value; cx.strokeStyle = input.value; }); return elt("span", null, "Color: ", input); }; 
 
     color     fillStyle  strokeStyle    . 
 
      . 
 
 controls.brushSize = function(cx) { var select = elt("select"); var sizes = [1, 2, 3, 5, 8, 12, 25, 35, 50, 75, 100]; sizes.forEach(function(size) { select.appendChild(elt("option", {value: size}, size + " pixels")); }); select.addEventListener("change", function() { cx.lineWidth = select.value; }); return elt("span", null, "Brush size: ", select); }; 
 
       ,    ,    lineWidth    . 
 
  
  ,     ,      URL  .     http:  https:, URL      ,      .  URL  ,   HTML : 
 
 data:text/html,<h1 style="color:red">Hello!</h1> 
 
  URL    , , ,       .           ,  ,      - . 
 
       toDataURL,   URL  ,        .            .        URL   .       ,      href  ,            . 
 
 controls.save = function(cx) { var link = elt("a", {href: "/"}, "Save"); function update() { try { link.href = cx.canvas.toDataURL(); } catch (e) { if (e instanceof SecurityError) link.href = "javascript:alert(" + JSON.stringify("Can't save: " + e.toString()) + ")"; else throw e; } } link.addEventListener("mouseover", update); link.addEventListener("focus", update); return link; }; 
 
  ,          ,       ,      ,     . 
 
     ,      URL  ,    .       . 
 
           .     URL   ,      ,       (.  17),    ,    ,    . 
 
        (   ).        ,      . 
 
     ,  ,  ,    ,     «».  ,  URL  ,     «» .    ,     . 
 
     try/catch   update   .   «»,  toDataURL  ,   SecurityError.           URL   javascript:.     ,   ,     ,   . 
 
   
              URL.    ,      URL     . 
 
 function loadImageURL(cx, url) { var image = document.createElement("img"); image.addEventListener("load", function() { var color = cx.fillStyle, size = cx.lineWidth; cx.canvas.width = image.width; cx.canvas.height = image.height; cx.drawImage(image, 0, 0); cx.fillStyle = color; cx.strokeStyle = color; cx.lineWidth = size; }); image.src = url; } 
 
     ,    . -          (fillStyle  lineWidth),              . 
 
         FileReader   18.     readAsText        readAsDataURL –   ,   .   ,   ,  URL  ,     loadImageURL    . 
 
 controls.openFile = function(cx) { var input = elt("input", {type: "file"}); input.addEventListener("change", function() { if (input.files.length == 0) return; var reader = new FileReader(); reader.addEventListener("load", function() { loadImageURL(cx, reader.result); }); reader.readAsDataURL(input.files[0]); }); return elt("div", null, "Open file: ", input); }; 
 
    URL  .       ,       URL,        “change”.         ,     –    Enter,     load. 
 
 controls.openURL = function(cx) { var input = elt("input", {type: "text"}); var form = elt("form", null, "Open URL: ", input, elt("button", {type: "submit"}, "load")); form.addEventListener("submit", function(event) { event.preventDefault(); loadImageURL(cx, form.querySelector("input").value); }); return form; }; 
 
      ,   ,      . 
 
  
        ,    ,     . 
 
 tools.Text = function(event, cx) { var text = prompt("Text:", ""); if (text) { var pos = relativePos(event, cx.canvas); cx.font = Math.max(7, cx.lineWidth) + "px sans-serif"; cx.fillText(text, pos.x, pos.y); } }; 
 
          ,        sans-serif   ,    .   – 7 ,      . 
 
      - – “”.      ,    ,            . 
 
 tools.Spray = function(event, cx) { var radius = cx.lineWidth / 2; var area = radius * radius * Math.PI; var dotsPerTick = Math.ceil(area / 30); var currentPos = relativePos(event, cx.canvas); var spray = setInterval(function() { for (var i = 0; i < dotsPerTick; i++) { var offset = randomPointInRadius(radius); cx.fillRect(currentPos.x + offset.x, currentPos.y + offset.y, 1, 1); } }, 25); trackDrag(function(event) { currentPos = relativePos(event, cx.canvas); }, function() { clearInterval(spray); }); }; 
 
   setInterval      25 ,    .  trackDrag   ,  currentPos     ,       . 
 
  ,         ,           30.         randomPointInRadius. 
 
 function randomPointInRadius(radius) { for (;;) { var x = Math.random() * 2 - 1; var y = Math.random() * 2 - 1; if (x * x + y * y <= 1) return {x: x * radius, y: y * radius}; } } 
 
        (-1,-1)  (1,1).   ,  ,         1.    ,    ,   . 
 
      .       ,        Math.sin  Math.cos   .            .    ,    ,   . 
 
      .    . 
 
 <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body> 
 
  
        .    . 
 
  
   Rectangle,   (.  fillRect   16)  .      ,     ,    ,    . ,         . 
 
   ,  ,        .           ,       ,    ? 
 
   ,    position: absolute,      13.   ,      .  pageX  pageY          ,      left, top, width  height. 
 
 <script> tools.Rectangle = function(event, cx) { //   }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body> 
 
   
      –  ,        ,    .   . 
 
        .  toDataURL    ,       URL   .       getImageData,          width, height  data.   data     0  255,        - red, green, blue  alpha (). 
 
        ,  ,    (  –  ),   ,      . 
 
 function pixelAt(cx, x, y) { var data = cx.getImageData(x, y, 1, 1); console.log(data.data); } var canvas = document.createElement("canvas"); var cx = canvas.getContext("2d"); pixelAt(cx, 10, 10); // → [0, 0, 0, 0] cx.fillStyle = "red"; cx.fillRect(10, 10, 1, 1); pixelAt(cx, 10, 10); // → [255, 0, 0, 255] 
 
  getImageData     x  y,    ,      . 
 
     ,         .        color   .  ,  fillStyle  strokeStyle    ,   . 
 
 ,      ,   CSS,    rgb(R, G, B),      15. 
 
  getImageData    ,   toDataURL –   ,      ,    .   try/catch        alert. 
 
 <script> tools["Pick color"] = function(event, cx) { // Your code here. }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body> 
 
  
    ,  ,        . ,           ,   ,     -   . 
 
              ,    .       ,      ,      ,         (   ),    ,     . 
 
     , ,       : 
 
  
 
          ,   ,      ,   . 
 
    getImageData    .  ,       ,          .           7,  ,      .       (x,y)    (x + y × width) × 4 
 
      (),          () . 
 
            , ,   ,       .         .      -      ,    9.        ,    ,       ,    ,    . 
 
      .      ,       .  ,  ,    . 
 
       fillRect,   -  ,  ,     . 
 
 <script> tools["Flood fill"] = function(event, cx) { //   }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body> 

, . , , . , , ..

"mousedown" , , . , , "mousemove", , .

. fillStyle, strokeStyle, lineWidth .

. file, . URL .

. save . , . , .

DOM
30 DOM. - .

DOM HTML. HTML – DOM , - . querySelector , DOM .

DOM JavaScript, . DOM JavaScript. 13, DOM . , .

– elt 13. , , , , .

function elt(name, attributes) { var node = document.createElement(name); if (attributes) { for (var attr in attributes) if (attributes.hasOwnProperty(attr)) node.setAttribute(attr, attributes[attr]); } for (var i = 2; i < arguments.length; i++) { var child = arguments[i]; if (typeof child == "string") child = document.createTextNode(child); node.appendChild(child); } return node; }

, .


– createPaint, DOM, . , controls, .

var controls = Object.create(null); function createPaint(parent) { var canvas = elt("canvas", {width: 500, height: 300}); var cx = canvas.getContext("2d"); var toolbar = elt("div", {class: "toolbar"}); for (var name in controls) toolbar.appendChild(controls[name](cx)); var panel = elt("div", {class: "picturepanel"}, canvas); parent.appendChild(elt("div", null, panel, toolbar)); }

, – . – , ( fillStyle) ( lineWidth).

, , .


, – , . controls, , , . , .

var tools = Object.create(null); controls.tool = function(cx) { var select = elt("select"); for (var name in tools) select.appendChild(elt("option", null, name)); cx.canvas.addEventListener("mousedown", function(event) { if (event.which == 1) { tools[select.value](event, cx); event.preventDefault(); } }); return elt("span", null, "Tool: ", select); };

tool , "mousedown" , event context. preventDefault, .

– , . , . 13 getBoundingClientRect . , , . clientX clientY , .

function relativePos(event, element) { var rect = element.getBoundingClientRect(); return {x: Math.floor(event.clientX - rect.left), y: Math.floor(event.clientY - rect.top)}; }

"mousemove", . trackDrag .

function trackDrag(onMove, onEnd) { function end(event) { removeEventListener("mousemove", onMove); removeEventListener("mouseup", end); if (onEnd) onEnd(event); } addEventListener("mousemove", onMove); addEventListener("mouseup", end); }

. – , "mousemove", – , . .

.

tools.Line = function(event, cx, onEnd) { cx.lineCap = "round"; var pos = relativePos(event, cx.canvas); trackDrag(function(event) { cx.beginPath(); cx.moveTo(pos.x, pos.y); pos = relativePos(event, cx.canvas); cx.lineTo(pos.x, pos.y); cx.stroke(); }, onEnd); };

lineCap “round”, - , , . , . , , lineCap .

, "mousemove", , , , strokeStyle lineWidth, .

onEnd , trackDrag. , undefined, . , erase, .

tools.Erase = function(event, cx) { cx.globalCompositeOperation = "destination-out"; tools.Line(event, cx, function() { cx.globalCompositeOperation = "source-over"; }); };

globalCompositeOperation , . , "source-over", , , , . , , , .

“erase” globalCompositeOperation "destination-out", , .

. ( strokeStyle lineWidth ), . , , .


, , .

18 . . , . - . - "date", "email", "url" "number". . – “text”, , , . , , , , .

controls.color = function(cx) { var input = elt("input", {type: "color"}); input.addEventListener("change", function() { cx.fillStyle = input.value; cx.strokeStyle = input.value; }); return elt("span", null, "Color: ", input); };

color fillStyle strokeStyle .

.

controls.brushSize = function(cx) { var select = elt("select"); var sizes = [1, 2, 3, 5, 8, 12, 25, 35, 50, 75, 100]; sizes.forEach(function(size) { select.appendChild(elt("option", {value: size}, size + " pixels")); }); select.addEventListener("change", function() { cx.lineWidth = select.value; }); return elt("span", null, "Brush size: ", select); };

, , lineWidth .


, , URL . http: https:, URL , . URL , HTML :

data:text/html,<h1 style="color:red">Hello!</h1>

URL , , , . , , - .

toDataURL, URL , . . URL . , href , .

controls.save = function(cx) { var link = elt("a", {href: "/"}, "Save"); function update() { try { link.href = cx.canvas.toDataURL(); } catch (e) { if (e instanceof SecurityError) link.href = "javascript:alert(" + JSON.stringify("Can't save: " + e.toString()) + ")"; else throw e; } } link.addEventListener("mouseover", update); link.addEventListener("focus", update); return link; };

, , , , .

, URL , . .

. URL , , (. 17), , , .

( ). , .

, , , , «». , URL , «» . , .

try/catch update . «», toDataURL , SecurityError. URL javascript:. , , , .


URL. , URL .

function loadImageURL(cx, url) { var image = document.createElement("img"); image.addEventListener("load", function() { var color = cx.fillStyle, size = cx.lineWidth; cx.canvas.width = image.width; cx.canvas.height = image.height; cx.drawImage(image, 0, 0); cx.fillStyle = color; cx.strokeStyle = color; cx.lineWidth = size; }); image.src = url; }

, . - (fillStyle lineWidth), .

FileReader 18. readAsText readAsDataURL – , . , , URL , loadImageURL .

controls.openFile = function(cx) { var input = elt("input", {type: "file"}); input.addEventListener("change", function() { if (input.files.length == 0) return; var reader = new FileReader(); reader.addEventListener("load", function() { loadImageURL(cx, reader.result); }); reader.readAsDataURL(input.files[0]); }); return elt("div", null, "Open file: ", input); };

URL . , URL, “change”. , – Enter, load.

controls.openURL = function(cx) { var input = elt("input", {type: "text"}); var form = elt("form", null, "Open URL: ", input, elt("button", {type: "submit"}, "load")); form.addEventListener("submit", function(event) { event.preventDefault(); loadImageURL(cx, form.querySelector("input").value); }); return form; };

, , .


, , .

tools.Text = function(event, cx) { var text = prompt("Text:", ""); if (text) { var pos = relativePos(event, cx.canvas); cx.font = Math.max(7, cx.lineWidth) + "px sans-serif"; cx.fillText(text, pos.x, pos.y); } };

, sans-serif , . – 7 , .

- – “”. , , .

tools.Spray = function(event, cx) { var radius = cx.lineWidth / 2; var area = radius * radius * Math.PI; var dotsPerTick = Math.ceil(area / 30); var currentPos = relativePos(event, cx.canvas); var spray = setInterval(function() { for (var i = 0; i < dotsPerTick; i++) { var offset = randomPointInRadius(radius); cx.fillRect(currentPos.x + offset.x, currentPos.y + offset.y, 1, 1); } }, 25); trackDrag(function(event) { currentPos = relativePos(event, cx.canvas); }, function() { clearInterval(spray); }); };

setInterval 25 , . trackDrag , currentPos , .

, , 30. randomPointInRadius.

function randomPointInRadius(radius) { for (;;) { var x = Math.random() * 2 - 1; var y = Math.random() * 2 - 1; if (x * x + y * y <= 1) return {x: x * radius, y: y * radius}; } }

(-1,-1) (1,1). , , 1. , , .

. , Math.sin Math.cos . . , , .

. .

<link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>


. .


Rectangle, (. fillRect 16) . , , , . , .

, , . , , ?

, position: absolute, 13. , . pageX pageY , left, top, width height.

<script> tools.Rectangle = function(event, cx) { // }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>


– , , . .

. toDataURL , URL . getImageData, width, height data. data 0 255, - red, green, blue alpha ().

, , ( – ), , .

function pixelAt(cx, x, y) { var data = cx.getImageData(x, y, 1, 1); console.log(data.data); } var canvas = document.createElement("canvas"); var cx = canvas.getContext("2d"); pixelAt(cx, 10, 10); // → [0, 0, 0, 0] cx.fillStyle = "red"; cx.fillRect(10, 10, 1, 1); pixelAt(cx, 10, 10); // → [255, 0, 0, 255]

getImageData x y, , .

, . color . , fillStyle strokeStyle , .

, , CSS, rgb(R, G, B), 15.

getImageData , toDataURL – , , . try/catch alert.

<script> tools["Pick color"] = function(event, cx) { // Your code here. }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>


, , . , , , - .

, . , , , ( ), , .

, , :



, , , .

getImageData . , , . 7, , . (x,y) (x + y × width) × 4

(), () .

, , , . . - , 9. , , , , .

. , . , , .

fillRect, - , , .

<script> tools["Flood fill"] = function(event, cx) { // }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>

, . , , . , , ..

"mousedown" , , . , , "mousemove", , .

. fillStyle, strokeStyle, lineWidth .

. file, . URL .

. save . , . , .

DOM
30 DOM. - .

DOM HTML. HTML – DOM , - . querySelector , DOM .

DOM JavaScript, . DOM JavaScript. 13, DOM . , .

– elt 13. , , , , .

function elt(name, attributes) { var node = document.createElement(name); if (attributes) { for (var attr in attributes) if (attributes.hasOwnProperty(attr)) node.setAttribute(attr, attributes[attr]); } for (var i = 2; i < arguments.length; i++) { var child = arguments[i]; if (typeof child == "string") child = document.createTextNode(child); node.appendChild(child); } return node; }

, .


– createPaint, DOM, . , controls, .

var controls = Object.create(null); function createPaint(parent) { var canvas = elt("canvas", {width: 500, height: 300}); var cx = canvas.getContext("2d"); var toolbar = elt("div", {class: "toolbar"}); for (var name in controls) toolbar.appendChild(controls[name](cx)); var panel = elt("div", {class: "picturepanel"}, canvas); parent.appendChild(elt("div", null, panel, toolbar)); }

, – . – , ( fillStyle) ( lineWidth).

, , .


, – , . controls, , , . , .

var tools = Object.create(null); controls.tool = function(cx) { var select = elt("select"); for (var name in tools) select.appendChild(elt("option", null, name)); cx.canvas.addEventListener("mousedown", function(event) { if (event.which == 1) { tools[select.value](event, cx); event.preventDefault(); } }); return elt("span", null, "Tool: ", select); };

tool , "mousedown" , event context. preventDefault, .

– , . , . 13 getBoundingClientRect . , , . clientX clientY , .

function relativePos(event, element) { var rect = element.getBoundingClientRect(); return {x: Math.floor(event.clientX - rect.left), y: Math.floor(event.clientY - rect.top)}; }

"mousemove", . trackDrag .

function trackDrag(onMove, onEnd) { function end(event) { removeEventListener("mousemove", onMove); removeEventListener("mouseup", end); if (onEnd) onEnd(event); } addEventListener("mousemove", onMove); addEventListener("mouseup", end); }

. – , "mousemove", – , . .

.

tools.Line = function(event, cx, onEnd) { cx.lineCap = "round"; var pos = relativePos(event, cx.canvas); trackDrag(function(event) { cx.beginPath(); cx.moveTo(pos.x, pos.y); pos = relativePos(event, cx.canvas); cx.lineTo(pos.x, pos.y); cx.stroke(); }, onEnd); };

lineCap “round”, - , , . , . , , lineCap .

, "mousemove", , , , strokeStyle lineWidth, .

onEnd , trackDrag. , undefined, . , erase, .

tools.Erase = function(event, cx) { cx.globalCompositeOperation = "destination-out"; tools.Line(event, cx, function() { cx.globalCompositeOperation = "source-over"; }); };

globalCompositeOperation , . , "source-over", , , , . , , , .

“erase” globalCompositeOperation "destination-out", , .

. ( strokeStyle lineWidth ), . , , .


, , .

18 . . , . - . - "date", "email", "url" "number". . – “text”, , , . , , , , .

controls.color = function(cx) { var input = elt("input", {type: "color"}); input.addEventListener("change", function() { cx.fillStyle = input.value; cx.strokeStyle = input.value; }); return elt("span", null, "Color: ", input); };

color fillStyle strokeStyle .

.

controls.brushSize = function(cx) { var select = elt("select"); var sizes = [1, 2, 3, 5, 8, 12, 25, 35, 50, 75, 100]; sizes.forEach(function(size) { select.appendChild(elt("option", {value: size}, size + " pixels")); }); select.addEventListener("change", function() { cx.lineWidth = select.value; }); return elt("span", null, "Brush size: ", select); };

, , lineWidth .


, , URL . http: https:, URL , . URL , HTML :

data:text/html,<h1 style="color:red">Hello!</h1>

URL , , , . , , - .

toDataURL, URL , . . URL . , href , .

controls.save = function(cx) { var link = elt("a", {href: "/"}, "Save"); function update() { try { link.href = cx.canvas.toDataURL(); } catch (e) { if (e instanceof SecurityError) link.href = "javascript:alert(" + JSON.stringify("Can't save: " + e.toString()) + ")"; else throw e; } } link.addEventListener("mouseover", update); link.addEventListener("focus", update); return link; };

, , , , .

, URL , . .

. URL , , (. 17), , , .

( ). , .

, , , , «». , URL , «» . , .

try/catch update . «», toDataURL , SecurityError. URL javascript:. , , , .


URL. , URL .

function loadImageURL(cx, url) { var image = document.createElement("img"); image.addEventListener("load", function() { var color = cx.fillStyle, size = cx.lineWidth; cx.canvas.width = image.width; cx.canvas.height = image.height; cx.drawImage(image, 0, 0); cx.fillStyle = color; cx.strokeStyle = color; cx.lineWidth = size; }); image.src = url; }

, . - (fillStyle lineWidth), .

FileReader 18. readAsText readAsDataURL – , . , , URL , loadImageURL .

controls.openFile = function(cx) { var input = elt("input", {type: "file"}); input.addEventListener("change", function() { if (input.files.length == 0) return; var reader = new FileReader(); reader.addEventListener("load", function() { loadImageURL(cx, reader.result); }); reader.readAsDataURL(input.files[0]); }); return elt("div", null, "Open file: ", input); };

URL . , URL, “change”. , – Enter, load.

controls.openURL = function(cx) { var input = elt("input", {type: "text"}); var form = elt("form", null, "Open URL: ", input, elt("button", {type: "submit"}, "load")); form.addEventListener("submit", function(event) { event.preventDefault(); loadImageURL(cx, form.querySelector("input").value); }); return form; };

, , .


, , .

tools.Text = function(event, cx) { var text = prompt("Text:", ""); if (text) { var pos = relativePos(event, cx.canvas); cx.font = Math.max(7, cx.lineWidth) + "px sans-serif"; cx.fillText(text, pos.x, pos.y); } };

, sans-serif , . – 7 , .

- – “”. , , .

tools.Spray = function(event, cx) { var radius = cx.lineWidth / 2; var area = radius * radius * Math.PI; var dotsPerTick = Math.ceil(area / 30); var currentPos = relativePos(event, cx.canvas); var spray = setInterval(function() { for (var i = 0; i < dotsPerTick; i++) { var offset = randomPointInRadius(radius); cx.fillRect(currentPos.x + offset.x, currentPos.y + offset.y, 1, 1); } }, 25); trackDrag(function(event) { currentPos = relativePos(event, cx.canvas); }, function() { clearInterval(spray); }); };

setInterval 25 , . trackDrag , currentPos , .

, , 30. randomPointInRadius.

function randomPointInRadius(radius) { for (;;) { var x = Math.random() * 2 - 1; var y = Math.random() * 2 - 1; if (x * x + y * y <= 1) return {x: x * radius, y: y * radius}; } }

(-1,-1) (1,1). , , 1. , , .

. , Math.sin Math.cos . . , , .

. .

<link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>


. .


Rectangle, (. fillRect 16) . , , , . , .

, , . , , ?

, position: absolute, 13. , . pageX pageY , left, top, width height.

<script> tools.Rectangle = function(event, cx) { // }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>


– , , . .

. toDataURL , URL . getImageData, width, height data. data 0 255, - red, green, blue alpha ().

, , ( – ), , .

function pixelAt(cx, x, y) { var data = cx.getImageData(x, y, 1, 1); console.log(data.data); } var canvas = document.createElement("canvas"); var cx = canvas.getContext("2d"); pixelAt(cx, 10, 10); // → [0, 0, 0, 0] cx.fillStyle = "red"; cx.fillRect(10, 10, 1, 1); pixelAt(cx, 10, 10); // → [255, 0, 0, 255]

getImageData x y, , .

, . color . , fillStyle strokeStyle , .

, , CSS, rgb(R, G, B), 15.

getImageData , toDataURL – , , . try/catch alert.

<script> tools["Pick color"] = function(event, cx) { // Your code here. }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>


, , . , , , - .

, . , , , ( ), , .

, , :



, , , .

getImageData . , , . 7, , . (x,y) (x + y × width) × 4

(), () .

, , , . . - , 9. , , , , .

. , . , , .

fillRect, - , , .

<script> tools["Flood fill"] = function(event, cx) { // }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>

, . , , . , , ..

"mousedown" , , . , , "mousemove", , .

. fillStyle, strokeStyle, lineWidth .

. file, . URL .

. save . , . , .

DOM
30 DOM. - .

DOM HTML. HTML – DOM , - . querySelector , DOM .

DOM JavaScript, . DOM JavaScript. 13, DOM . , .

– elt 13. , , , , .

function elt(name, attributes) { var node = document.createElement(name); if (attributes) { for (var attr in attributes) if (attributes.hasOwnProperty(attr)) node.setAttribute(attr, attributes[attr]); } for (var i = 2; i < arguments.length; i++) { var child = arguments[i]; if (typeof child == "string") child = document.createTextNode(child); node.appendChild(child); } return node; }

, .


– createPaint, DOM, . , controls, .

var controls = Object.create(null); function createPaint(parent) { var canvas = elt("canvas", {width: 500, height: 300}); var cx = canvas.getContext("2d"); var toolbar = elt("div", {class: "toolbar"}); for (var name in controls) toolbar.appendChild(controls[name](cx)); var panel = elt("div", {class: "picturepanel"}, canvas); parent.appendChild(elt("div", null, panel, toolbar)); }

, – . – , ( fillStyle) ( lineWidth).

, , .


, – , . controls, , , . , .

var tools = Object.create(null); controls.tool = function(cx) { var select = elt("select"); for (var name in tools) select.appendChild(elt("option", null, name)); cx.canvas.addEventListener("mousedown", function(event) { if (event.which == 1) { tools[select.value](event, cx); event.preventDefault(); } }); return elt("span", null, "Tool: ", select); };

tool , "mousedown" , event context. preventDefault, .

– , . , . 13 getBoundingClientRect . , , . clientX clientY , .

function relativePos(event, element) { var rect = element.getBoundingClientRect(); return {x: Math.floor(event.clientX - rect.left), y: Math.floor(event.clientY - rect.top)}; }

"mousemove", . trackDrag .

function trackDrag(onMove, onEnd) { function end(event) { removeEventListener("mousemove", onMove); removeEventListener("mouseup", end); if (onEnd) onEnd(event); } addEventListener("mousemove", onMove); addEventListener("mouseup", end); }

. – , "mousemove", – , . .

.

tools.Line = function(event, cx, onEnd) { cx.lineCap = "round"; var pos = relativePos(event, cx.canvas); trackDrag(function(event) { cx.beginPath(); cx.moveTo(pos.x, pos.y); pos = relativePos(event, cx.canvas); cx.lineTo(pos.x, pos.y); cx.stroke(); }, onEnd); };

lineCap “round”, - , , . , . , , lineCap .

, "mousemove", , , , strokeStyle lineWidth, .

onEnd , trackDrag. , undefined, . , erase, .

tools.Erase = function(event, cx) { cx.globalCompositeOperation = "destination-out"; tools.Line(event, cx, function() { cx.globalCompositeOperation = "source-over"; }); };

globalCompositeOperation , . , "source-over", , , , . , , , .

“erase” globalCompositeOperation "destination-out", , .

. ( strokeStyle lineWidth ), . , , .


, , .

18 . . , . - . - "date", "email", "url" "number". . – “text”, , , . , , , , .

controls.color = function(cx) { var input = elt("input", {type: "color"}); input.addEventListener("change", function() { cx.fillStyle = input.value; cx.strokeStyle = input.value; }); return elt("span", null, "Color: ", input); };

color fillStyle strokeStyle .

.

controls.brushSize = function(cx) { var select = elt("select"); var sizes = [1, 2, 3, 5, 8, 12, 25, 35, 50, 75, 100]; sizes.forEach(function(size) { select.appendChild(elt("option", {value: size}, size + " pixels")); }); select.addEventListener("change", function() { cx.lineWidth = select.value; }); return elt("span", null, "Brush size: ", select); };

, , lineWidth .


, , URL . http: https:, URL , . URL , HTML :

data:text/html,<h1 style="color:red">Hello!</h1>

URL , , , . , , - .

toDataURL, URL , . . URL . , href , .

controls.save = function(cx) { var link = elt("a", {href: "/"}, "Save"); function update() { try { link.href = cx.canvas.toDataURL(); } catch (e) { if (e instanceof SecurityError) link.href = "javascript:alert(" + JSON.stringify("Can't save: " + e.toString()) + ")"; else throw e; } } link.addEventListener("mouseover", update); link.addEventListener("focus", update); return link; };

, , , , .

, URL , . .

. URL , , (. 17), , , .

( ). , .

, , , , «». , URL , «» . , .

try/catch update . «», toDataURL , SecurityError. URL javascript:. , , , .


URL. , URL .

function loadImageURL(cx, url) { var image = document.createElement("img"); image.addEventListener("load", function() { var color = cx.fillStyle, size = cx.lineWidth; cx.canvas.width = image.width; cx.canvas.height = image.height; cx.drawImage(image, 0, 0); cx.fillStyle = color; cx.strokeStyle = color; cx.lineWidth = size; }); image.src = url; }

, . - (fillStyle lineWidth), .

FileReader 18. readAsText readAsDataURL – , . , , URL , loadImageURL .

controls.openFile = function(cx) { var input = elt("input", {type: "file"}); input.addEventListener("change", function() { if (input.files.length == 0) return; var reader = new FileReader(); reader.addEventListener("load", function() { loadImageURL(cx, reader.result); }); reader.readAsDataURL(input.files[0]); }); return elt("div", null, "Open file: ", input); };

URL . , URL, “change”. , – Enter, load.

controls.openURL = function(cx) { var input = elt("input", {type: "text"}); var form = elt("form", null, "Open URL: ", input, elt("button", {type: "submit"}, "load")); form.addEventListener("submit", function(event) { event.preventDefault(); loadImageURL(cx, form.querySelector("input").value); }); return form; };

, , .


, , .

tools.Text = function(event, cx) { var text = prompt("Text:", ""); if (text) { var pos = relativePos(event, cx.canvas); cx.font = Math.max(7, cx.lineWidth) + "px sans-serif"; cx.fillText(text, pos.x, pos.y); } };

, sans-serif , . – 7 , .

- – “”. , , .

tools.Spray = function(event, cx) { var radius = cx.lineWidth / 2; var area = radius * radius * Math.PI; var dotsPerTick = Math.ceil(area / 30); var currentPos = relativePos(event, cx.canvas); var spray = setInterval(function() { for (var i = 0; i < dotsPerTick; i++) { var offset = randomPointInRadius(radius); cx.fillRect(currentPos.x + offset.x, currentPos.y + offset.y, 1, 1); } }, 25); trackDrag(function(event) { currentPos = relativePos(event, cx.canvas); }, function() { clearInterval(spray); }); };

setInterval 25 , . trackDrag , currentPos , .

, , 30. randomPointInRadius.

function randomPointInRadius(radius) { for (;;) { var x = Math.random() * 2 - 1; var y = Math.random() * 2 - 1; if (x * x + y * y <= 1) return {x: x * radius, y: y * radius}; } }

(-1,-1) (1,1). , , 1. , , .

. , Math.sin Math.cos . . , , .

. .

<link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>


. .


Rectangle, (. fillRect 16) . , , , . , .

, , . , , ?

, position: absolute, 13. , . pageX pageY , left, top, width height.

<script> tools.Rectangle = function(event, cx) { // }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>


– , , . .

. toDataURL , URL . getImageData, width, height data. data 0 255, - red, green, blue alpha ().

, , ( – ), , .

function pixelAt(cx, x, y) { var data = cx.getImageData(x, y, 1, 1); console.log(data.data); } var canvas = document.createElement("canvas"); var cx = canvas.getContext("2d"); pixelAt(cx, 10, 10); // → [0, 0, 0, 0] cx.fillStyle = "red"; cx.fillRect(10, 10, 1, 1); pixelAt(cx, 10, 10); // → [255, 0, 0, 255]

getImageData x y, , .

, . color . , fillStyle strokeStyle , .

, , CSS, rgb(R, G, B), 15.

getImageData , toDataURL – , , . try/catch alert.

<script> tools["Pick color"] = function(event, cx) { // Your code here. }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>


, , . , , , - .

, . , , , ( ), , .

, , :



, , , .

getImageData . , , . 7, , . (x,y) (x + y × width) × 4

(), () .

, , , . . - , 9. , , , , .

. , . , , .

fillRect, - , , .

<script> tools["Flood fill"] = function(event, cx) { // }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>

 ,      .    ,     ,      .     ,   ,    .. 
 
      "mousedown"  ,   ,   .  , ,    "mousemove",      ,           . 
 
         .         fillStyle, strokeStyle,  lineWidth     . 
 
       .    file,       .   URL     . 
 
    .  save       .    ,       .   ,   . 
 
  DOM 
       30  DOM.   -  . 
 
      DOM  HTML.     HTML    –   DOM        ,    -   .       querySelector   ,     DOM  . 
 
      DOM      JavaScript,   .       DOM   JavaScript.      13,      DOM  .      ,    . 
 
   –    elt   13.        ,     ,  ,    ,      . 
 
 function elt(name, attributes) { var node = document.createElement(name); if (attributes) { for (var attr in attributes) if (attributes.hasOwnProperty(attr)) node.setAttribute(attr, attributes[attr]); } for (var i = 2; i < arguments.length; i++) { var child = arguments[i]; if (typeof child == "string") child = document.createTextNode(child); node.appendChild(child); } return node; } 
 
       ,       . 
 
  
    –  createPaint,      DOM,     .      ,    controls,           . 
 
 var controls = Object.create(null); function createPaint(parent) { var canvas = elt("canvas", {width: 500, height: 300}); var cx = canvas.getContext("2d"); var toolbar = elt("div", {class: "toolbar"}); for (var name in controls) toolbar.appendChild(controls[name](cx)); var panel = elt("div", {class: "picturepanel"}, canvas); parent.appendChild(elt("div", null, panel, toolbar)); } 
 
           ,    –   .        –    ,   (  fillStyle)    (  lineWidth). 
 
          ,      ,     . 
 
   
   ,    –  ,    .      controls,        ,           ,       .       ,          . 
 
 var tools = Object.create(null); controls.tool = function(cx) { var select = elt("select"); for (var name in tools) select.appendChild(elt("option", null, name)); cx.canvas.addEventListener("mousedown", function(event) { if (event.which == 1) { tools[select.value](event, cx); event.preventDefault(); } }); return elt("span", null, "Tool: ", select); }; 
 
   tool        ,    "mousedown"          ,    event  context.    preventDefault,          . 
 
    – ,     .   ,           .    13   getBoundingClientRect     .  ,   ,     .    clientX  clientY      ,                . 
 
 function relativePos(event, element) { var rect = element.getBoundingClientRect(); return {x: Math.floor(event.clientX - rect.left), y: Math.floor(event.clientY - rect.top)}; } 
 
       "mousemove",    .  trackDrag       . 
 
 function trackDrag(onMove, onEnd) { function end(event) { removeEventListener("mousemove", onMove); removeEventListener("mouseup", end); if (onEnd) onEnd(event); } addEventListener("mousemove", onMove); addEventListener("mouseup", end); } 
 
    .  – ,      "mousemove",   – ,     .      . 
 
           . 
 
 tools.Line = function(event, cx, onEnd) { cx.lineCap = "round"; var pos = relativePos(event, cx.canvas); trackDrag(function(event) { cx.beginPath(); cx.moveTo(pos.x, pos.y); pos = relativePos(event, cx.canvas); cx.lineTo(pos.x, pos.y); cx.stroke(); }, onEnd); }; 
 
      lineCap  “round”, -      ,   ,     .     ,      .     ,      ,     lineCap  . 
 
 ,    "mousemove",  ,   ,         ,      strokeStyle  lineWidth,     . 
 
  onEnd   ,  trackDrag.        ,        undefined,       .        ,  erase,      . 
 
 tools.Erase = function(event, cx) { cx.globalCompositeOperation = "destination-out"; tools.Line(event, cx, function() { cx.globalCompositeOperation = "source-over"; }); }; 
 
  globalCompositeOperation   ,        .  ,   "source-over",  ,  ,  ,   .   ,    ,     ,   . 
 
  “erase”  globalCompositeOperation  "destination-out",    ,     . 
 
         .          (     strokeStyle  lineWidth  ),   . ,   ,  . 
 
     
 ,              ,      . 
 
   18      .        .          ,            .    - .   - "date", "email", "url"  "number".      .      – “text”,     ,     ,       . ,   ,       ,       ,       . 
 
 controls.color = function(cx) { var input = elt("input", {type: "color"}); input.addEventListener("change", function() { cx.fillStyle = input.value; cx.strokeStyle = input.value; }); return elt("span", null, "Color: ", input); }; 
 
     color     fillStyle  strokeStyle    . 
 
      . 
 
 controls.brushSize = function(cx) { var select = elt("select"); var sizes = [1, 2, 3, 5, 8, 12, 25, 35, 50, 75, 100]; sizes.forEach(function(size) { select.appendChild(elt("option", {value: size}, size + " pixels")); }); select.addEventListener("change", function() { cx.lineWidth = select.value; }); return elt("span", null, "Brush size: ", select); }; 
 
       ,    ,    lineWidth    . 
 
  
  ,     ,      URL  .     http:  https:, URL      ,      .  URL  ,   HTML : 
 
 data:text/html,<h1 style="color:red">Hello!</h1> 
 
  URL    , , ,       .           ,  ,      - . 
 
       toDataURL,   URL  ,        .            .        URL   .       ,      href  ,            . 
 
 controls.save = function(cx) { var link = elt("a", {href: "/"}, "Save"); function update() { try { link.href = cx.canvas.toDataURL(); } catch (e) { if (e instanceof SecurityError) link.href = "javascript:alert(" + JSON.stringify("Can't save: " + e.toString()) + ")"; else throw e; } } link.addEventListener("mouseover", update); link.addEventListener("focus", update); return link; }; 
 
  ,          ,       ,      ,     . 
 
     ,      URL  ,    .       . 
 
           .     URL   ,      ,       (.  17),    ,    ,    . 
 
        (   ).        ,      . 
 
     ,  ,  ,    ,     «».  ,  URL  ,     «» .    ,     . 
 
     try/catch   update   .   «»,  toDataURL  ,   SecurityError.           URL   javascript:.     ,   ,     ,   . 
 
   
              URL.    ,      URL     . 
 
 function loadImageURL(cx, url) { var image = document.createElement("img"); image.addEventListener("load", function() { var color = cx.fillStyle, size = cx.lineWidth; cx.canvas.width = image.width; cx.canvas.height = image.height; cx.drawImage(image, 0, 0); cx.fillStyle = color; cx.strokeStyle = color; cx.lineWidth = size; }); image.src = url; } 
 
     ,    . -          (fillStyle  lineWidth),              . 
 
         FileReader   18.     readAsText        readAsDataURL –   ,   .   ,   ,  URL  ,     loadImageURL    . 
 
 controls.openFile = function(cx) { var input = elt("input", {type: "file"}); input.addEventListener("change", function() { if (input.files.length == 0) return; var reader = new FileReader(); reader.addEventListener("load", function() { loadImageURL(cx, reader.result); }); reader.readAsDataURL(input.files[0]); }); return elt("div", null, "Open file: ", input); }; 
 
    URL  .       ,       URL,        “change”.         ,     –    Enter,     load. 
 
 controls.openURL = function(cx) { var input = elt("input", {type: "text"}); var form = elt("form", null, "Open URL: ", input, elt("button", {type: "submit"}, "load")); form.addEventListener("submit", function(event) { event.preventDefault(); loadImageURL(cx, form.querySelector("input").value); }); return form; }; 
 
      ,   ,      . 
 
  
        ,    ,     . 
 
 tools.Text = function(event, cx) { var text = prompt("Text:", ""); if (text) { var pos = relativePos(event, cx.canvas); cx.font = Math.max(7, cx.lineWidth) + "px sans-serif"; cx.fillText(text, pos.x, pos.y); } }; 
 
          ,        sans-serif   ,    .   – 7 ,      . 
 
      - – “”.      ,    ,            . 
 
 tools.Spray = function(event, cx) { var radius = cx.lineWidth / 2; var area = radius * radius * Math.PI; var dotsPerTick = Math.ceil(area / 30); var currentPos = relativePos(event, cx.canvas); var spray = setInterval(function() { for (var i = 0; i < dotsPerTick; i++) { var offset = randomPointInRadius(radius); cx.fillRect(currentPos.x + offset.x, currentPos.y + offset.y, 1, 1); } }, 25); trackDrag(function(event) { currentPos = relativePos(event, cx.canvas); }, function() { clearInterval(spray); }); }; 
 
   setInterval      25 ,    .  trackDrag   ,  currentPos     ,       . 
 
  ,         ,           30.         randomPointInRadius. 
 
 function randomPointInRadius(radius) { for (;;) { var x = Math.random() * 2 - 1; var y = Math.random() * 2 - 1; if (x * x + y * y <= 1) return {x: x * radius, y: y * radius}; } } 
 
        (-1,-1)  (1,1).   ,  ,         1.    ,    ,   . 
 
      .       ,        Math.sin  Math.cos   .            .    ,    ,   . 
 
      .    . 
 
 <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body> 
 
  
        .    . 
 
  
   Rectangle,   (.  fillRect   16)  .      ,     ,    ,    . ,         . 
 
   ,  ,        .           ,       ,    ? 
 
   ,    position: absolute,      13.   ,      .  pageX  pageY          ,      left, top, width  height. 
 
 <script> tools.Rectangle = function(event, cx) { //   }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body> 
 
   
      –  ,        ,    .   . 
 
        .  toDataURL    ,       URL   .       getImageData,          width, height  data.   data     0  255,        - red, green, blue  alpha (). 
 
        ,  ,    (  –  ),   ,      . 
 
 function pixelAt(cx, x, y) { var data = cx.getImageData(x, y, 1, 1); console.log(data.data); } var canvas = document.createElement("canvas"); var cx = canvas.getContext("2d"); pixelAt(cx, 10, 10); // → [0, 0, 0, 0] cx.fillStyle = "red"; cx.fillRect(10, 10, 1, 1); pixelAt(cx, 10, 10); // → [255, 0, 0, 255] 
 
  getImageData     x  y,    ,      . 
 
     ,         .        color   .  ,  fillStyle  strokeStyle    ,   . 
 
 ,      ,   CSS,    rgb(R, G, B),      15. 
 
  getImageData    ,   toDataURL –   ,      ,    .   try/catch        alert. 
 
 <script> tools["Pick color"] = function(event, cx) { // Your code here. }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body> 
 
  
    ,  ,        . ,           ,   ,     -   . 
 
              ,    .       ,      ,      ,         (   ),    ,     . 
 
     , ,       : 
 
  
 
          ,   ,      ,   . 
 
    getImageData    .  ,       ,          .           7,  ,      .       (x,y)    (x + y × width) × 4 
 
      (),          () . 
 
            , ,   ,       .         .      -      ,    9.        ,    ,       ,    ,    . 
 
      .      ,       .  ,  ,    . 
 
       fillRect,   -  ,  ,     . 
 
 <script> tools["Flood fill"] = function(event, cx) { //   }; </script> <link rel="stylesheet" href="css/paint.css"> <body> <script>createPaint(document.body);</script> </body>