「プログラミングとはデジタルデータの処理であることを骨の髄まで理解する」

MDN ドキュメンテーションのサイトがあります

HTML/CSS/JavaScriptの全てが書いてあります

「チュートリアル」をやると非常に有効です

https://developer.mozilla.org/ja/docs/Web/API/Canvas_API

https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps

Google Chrome の デベロッパーツール

使い方の確認・説明

Twitter

#xhack勉強会

テンプレートHTML

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>

  </body>
</html>

DOM(Document Object Model)

要するに、JavaScriptでHTMLを変更する、書き換えることができる機能

Canvasのサンプルコード

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <canvas id="canvas"></canvas>
    <script type="text/javascript">
      const canvas = document.getElementById('canvas');
      const ctx = canvas.getContext('2d');
      ctx.fillStyle = 'green';
      ctx.fillRect(10, 10, 150, 100);
    </script>
  </body>
</html>

画像ファイルの読み込みJS