xhackjp1/version1-1.html

## version1-1.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <canvas id="canvas" width="600" height="600"></canvas>
    <script>
      // canvas要素を取得
      const canvas = document.getElementById("canvas");
      // canvasを操作する機能を持った、オブジェクトを取り出す
      const ctx = canvas.getContext("2d");

      // Imageのインスタンス作成
      const img = new Image();
      img.src = "https://i.pinimg.com/474x/7b/bb/72/7bbb72400b75a8d91de85d0c354dff80.jpg";

      const icon = new Image();
      icon.src = "https://everydayicons.jp/wp/wp-content/themes/everydayicons/icons/thumbs/ei-child_face.png";

      img.onload = () => {
        ctx.drawImage(img, 0, 0);
        icon.onload = () => {
          // 画像の表示開始位置の x, y 座標と、表示サイズ width, hegiht
          ctx.drawImage(icon, 50, 40, 40, 40);
          ctx.drawImage(icon, 108, 60, 35, 35);
          ctx.drawImage(icon, 165, 54, 32, 32);
        };
      };
    </script>
  </body>
</html>

## version1-2.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <canvas id="canvas" width="600" height="600"></canvas>
    <script>
      // canvas要素を取得
      const canvas = document.getElementById("canvas");
      // canvasを操作する機能を持った、オブジェクトを取り出す
      const ctx = canvas.getContext("2d");

      // Imageのインスタンス作成
      const img = new Image();
      img.src = "https://i.pinimg.com/474x/7b/bb/72/7bbb72400b75a8d91de85d0c354dff80.jpg";

      const icon = new Image();
      icon.src = "https://everydayicons.jp/wp/wp-content/themes/everydayicons/icons/thumbs/ei-child_face.png";

      img.onload = () => {
        ctx.drawImage(img, 0, 0);
        icon.onload = () => {
          // 画像の表示開始位置の x, y 座標と、表示サイズ width, hegiht
          ctx.drawImage(icon, 50, 40, 40, 40);
          ctx.drawImage(icon, 108, 60, 35, 35);
          ctx.drawImage(icon, 165, 54, 32, 32);
        };
      };

      canvas.onclick = (event) => {
        // console.log(event)
        console.log({ x: event.clientX, y: event.clientY })
        ctx.drawImage(icon, event.clientX, event.clientY, 32, 32);
      }

      // 1. クリックした場所に画像を配置したい
      // 2. 配置する画像の種類を増やしたい

    </script>
  </body>
</html>

## version1-3.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <canvas id="canvas" width="600" height="600"></canvas>
    <script>
      // canvas要素を取得
      const canvas = document.getElementById("canvas");
      // canvasを操作する機能を持った、オブジェクトを取り出す
      const ctx = canvas.getContext("2d");

      // Imageのインスタンス作成
      const img = new Image();
      img.src = "https://i.pinimg.com/474x/7b/bb/72/7bbb72400b75a8d91de85d0c354dff80.jpg";

      const icon1 = new Image();
      icon1.src = "https://everydayicons.jp/wp/wp-content/themes/everydayicons/icons/thumbs/ei-child_face.png";

      const icon2 = new Image();
      icon2.src = "https://bsoza.com/wp/wp-content/uploads/images/icon/icon_animal_08_l.png";

      const icon3 = new Image();
      icon3.src = "https://nekoillust.com/wp-content/uploads/2018/03/3edb0a8530ee01b108eed4bc9ef2717c.png";

      const icon4 = new Image();
      icon4.src = "https://www.illust-ai.com/datas/00000463.png";

      img.onload = () => {
        ctx.drawImage(img, 0, 0);
      };

      canvas.onclick = (event) => {
        // canvasの右上と、ブラウザほ表示領域の差分を補正する
        // さらに、左上が頂点になっているため、真ん中にしたい場合は、
        // 表示する画像の 1/2幅 1/2高 の箇所に指定する為にさらに補正する
        var rect = event.target.getBoundingClientRect();
        mouseX = event.clientX - Math.floor(rect.left);
        mouseY = event.clientY - Math.floor(rect.top);
        const imageSize = 32
        ctx.drawImage(icon4, mouseX - imageSize/2, mouseY - imageSize/2, imageSize, imageSize);
      }

      // 1. クリックした場所に画像を配置したい
      // 2. 配置する画像の種類を増やしたい

    </script>
  </body>
</html>

## version1-4.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .iconList {
        border: 1px;
        border-style: solid;
      }
      img {
        width: 80px;
        height: 80px;
      }
    </style>
  </head>
  <body>
    <canvas id="canvas" width="1300" height="800"></canvas>
    <h3>アイコンを下記から選んでください</h3>
    <div class="iconList">
      <img onclick="changeIcon(1)" src="https://everydayicons.jp/wp/wp-content/themes/everydayicons/icons/thumbs/ei-child_face.png">
      <img onclick="changeIcon(2)" src="https://bsoza.com/wp/wp-content/uploads/images/icon/icon_animal_08_l.png">
      <img onclick="changeIcon(3)" src="https://nekoillust.com/wp-content/uploads/2018/03/3edb0a8530ee01b108eed4bc9ef2717c.png">
      <img onclick="changeIcon(4)" src="https://www.illust-ai.com/datas/00000463.png">
    </div>
    <script>
      // canvas要素を取得
      const canvas = document.getElementById("canvas");
      // canvasを操作する機能を持った、オブジェクトを取り出す
      const ctx = canvas.getContext("2d");

      // Imageのインスタンス作成
      const img = new Image();
      img.src = "https://pbs.twimg.com/media/C0rviejUcAAJ-tC.jpg";

      const icon1 = new Image();
      icon1.src = "https://everydayicons.jp/wp/wp-content/themes/everydayicons/icons/thumbs/ei-child_face.png";

      const icon2 = new Image();
      icon2.src = "https://bsoza.com/wp/wp-content/uploads/images/icon/icon_animal_08_l.png";

      const icon3 = new Image();
      icon3.src = "https://nekoillust.com/wp-content/uploads/2018/03/3edb0a8530ee01b108eed4bc9ef2717c.png";

      const icon4 = new Image();
      icon4.src = "https://www.illust-ai.com/datas/00000463.png";

      // 現在選択中のアイコン
      let currentIcon = icon1;

      function changeIcon(number){
        if(number === 1){
          currentIcon = icon1;
        }
        if(number === 2){
          currentIcon = icon2;
        }
        if(number === 3){
          currentIcon = icon3;
        }
        if(number === 4){
          currentIcon = icon4;
        }
      }

      img.onload = () => {
        ctx.drawImage(img, 0, 0);
      };

      canvas.onclick = (event) => {
        // canvasの右上と、ブラウザほ表示領域の差分を補正する
        // さらに、左上が頂点になっているため、真ん中にしたい場合は、
        // 表示する画像の 1/2幅 1/2高 の箇所に指定する為にさらに補正する
        var rect = event.target.getBoundingClientRect();
        mouseX = event.clientX - Math.floor(rect.left);
        mouseY = event.clientY - Math.floor(rect.top);
        const imageSize = 80 // 画像サイズ

        // 画像サイズの半分ずらすことで、クリック位置に画像の中心がくる
        ctx.drawImage(currentIcon, mouseX - imageSize/2, mouseY - imageSize/2, imageSize, imageSize);
      }

      // 1. クリックした場所に画像を配置したい => clear!!
      // 2. 配置する画像の種類を増やしたい

      // 余談 中級者向け
      // 3. 画像を配置した後に、少し調整したい時は・・・？

    </script>
  </body>
</html>

## version1-5.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .iconList {
        border: 1px;
        border-style: solid;
      }
      img {
        width: 80px;
        height: 80px;
      }
    </style>
  </head>
  <body>
    <canvas id="canvas" width="1300" height="800"></canvas>
    <h3>アイコンを下記から選んでください</h3>
    <button onclick="cancel()">取り消し</button>
    <div class="iconList">
      <img onclick="changeIcon(1)" src="https://everydayicons.jp/wp/wp-content/themes/everydayicons/icons/thumbs/ei-child_face.png">
      <img onclick="changeIcon(2)" src="https://bsoza.com/wp/wp-content/uploads/images/icon/icon_animal_08_l.png">
      <img onclick="changeIcon(3)" src="https://nekoillust.com/wp-content/uploads/2018/03/3edb0a8530ee01b108eed4bc9ef2717c.png">
      <img onclick="changeIcon(4)" src="https://www.illust-ai.com/datas/00000463.png">
    </div>
    <script>
      // canvas要素を取得
      const canvas = document.getElementById("canvas");
      // canvasを操作する機能を持った、オブジェクトを取り出す
      const ctx = canvas.getContext("2d");
      // 履歴保存の変数
      const workRecord = []

      // Imageのインスタンス作成
      const img = new Image();
      img.src = "https://pbs.twimg.com/media/C0rviejUcAAJ-tC.jpg";

      const icon1 = new Image();
      icon1.src = "https://everydayicons.jp/wp/wp-content/themes/everydayicons/icons/thumbs/ei-child_face.png";

      const icon2 = new Image();
      icon2.src = "https://bsoza.com/wp/wp-content/uploads/images/icon/icon_animal_08_l.png";

      const icon3 = new Image();
      icon3.src = "https://nekoillust.com/wp-content/uploads/2018/03/3edb0a8530ee01b108eed4bc9ef2717c.png";

      const icon4 = new Image();
      icon4.src = "https://www.illust-ai.com/datas/00000463.png";

      // 現在選択中のアイコン
      let currentIcon = icon1;

      function changeIcon(number){
        if(number === 1){
          currentIcon = icon1;
        }
        if(number === 2){
          currentIcon = icon2;
        }
        if(number === 3){
          currentIcon = icon3;
        }
        if(number === 4){
          currentIcon = icon4;
        }
      }

      img.onload = () => {
        ctx.drawImage(img, 0, 0);
      };

      canvas.onclick = (event) => {
        // canvasの右上と、ブラウザほ表示領域の差分を補正する
        // さらに、左上が頂点になっているため、真ん中にしたい場合は、
        // 表示する画像の 1/2幅 1/2高 の箇所に指定する為にさらに補正する
        var rect = event.target.getBoundingClientRect();
        mouseX = event.clientX - Math.floor(rect.left);
        mouseY = event.clientY - Math.floor(rect.top);
        const imageSize = 80 // 画像サイズ

        // 画像サイズの半分ずらすことで、クリック位置に画像の中心がくる
        ctx.drawImage(currentIcon, mouseX - imageSize/2, mouseY - imageSize/2, imageSize, imageSize);
        // POINT1: 作業を記録しておく
        workRecord.push({
          currentIcon,
          x: mouseX - imageSize/2,
          y: mouseY - imageSize/2,
          w: imageSize,
          h: imageSize
        })
      }

      function cancel(){
        // 配列から、最後の作業を取り出す(削除する)
        workRecord.pop()
        ctx.drawImage(img, 0, 0);
        // POINT2: 直線の作業までやり直しちゃう
        for(let i=0;i<workRecord.length;i++){
          let item = workRecord[i]
          ctx.drawImage(item.currentIcon, item.x, item.y, item.w, item.h);
        }
      }

      // 1. クリックした場所に画像を配置したい => clear!!
      // 2. 配置する画像の種類を増やしたい

      // 余談 中級者向け
      // 3. 画像を配置した後に、少し調整したい時は・・・？

      // 作業を記録しておく
      // キャンセルした場合は、直前の作業をなかったことにしたい・・・

    </script>
  </body>
</html>

## version2-1.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <canvas id="canvas" onclick="moveText(event)" width="400" height="400"></canvas>
    <div>
      <input id="messageText1" type="text" placeholder="文字1" value="小">
    </div>
    <div>
      <input id="messageText2" type="text" placeholder="文字2" value="大">
    </div>
    <div>
      <button onclick="drawImage()">実行</button>
    </div>
		<script>
      const messageText1 = document.getElementById("messageText1")
      const messageText2 = document.getElementById("messageText2")

			// canvas要素を取得
      const canvas = document.getElementById("canvas")
			// canvasを操作する機能を持った、オブジェクトを取り出す
      const ctx = canvas.getContext("2d")
      const img1 = new Image()

      // srcプロパティに画像の取得先のパスをセットする
      function drawImage() {
        ctx.clearRect(0,0,400,400)
        let flg = false
        // 文字を埋め込む
        ctx.font = `20px sans-serif`
        for(let i=0; i<12;i++){
          for(let j=0; j<12;j++){
            if (Math.random() * 100 > 99 && !flg) {
              ctx.fillText(messageText1.value, 25 + 30 * i, 38 + 30 * j)
              flg = true
            } else {
              ctx.fillText(messageText2.value, 25 + 30 * i, 38 + 30 * j)
            }
          }
        }
      }

      drawImage()
		</script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Document</title>
	</head>
	<body>
	<canvas id="canvas" width="600" height="600"></canvas>
	<script>
	// canvas要素を取得
	const canvas = document.getElementById("canvas");
	// canvasを操作する機能を持った、オブジェクトを取り出す
	const ctx = canvas.getContext("2d");

	// Imageのインスタンス作成
	const img = new Image();
	img.src = "https://i.pinimg.com/474x/7b/bb/72/7bbb72400b75a8d91de85d0c354dff80.jpg";

	const icon = new Image();
	icon.src = "https://everydayicons.jp/wp/wp-content/themes/everydayicons/icons/thumbs/ei-child_face.png";

	img.onload = () => {
	ctx.drawImage(img, 0, 0);
	icon.onload = () => {
	// 画像の表示開始位置の x, y 座標と、表示サイズ width, hegiht
	ctx.drawImage(icon, 50, 40, 40, 40);
	ctx.drawImage(icon, 108, 60, 35, 35);
	ctx.drawImage(icon, 165, 54, 32, 32);
	};
	};
	</script>
	</body>
	</html>