Canvasを使ってお絵描きと画像の保存をしてみる【HTML5】

こんにちは、WEBの佐野です。
今回は、html5のCanvasを使ったお絵描とき出来るコンテンツを作成してみました。
実装機能は、線の太さ・色を変更・画像ダウンロードなどシンプルなものになっているので、ぜひこれを改良しながら面白いお絵描きコンテンツを作ってみてください！

完成形のサンプル
処理のポイント: 線の引き方; 色の変え方; 線の太さの変え方; 画像のダウンロード
最後に

完成形のサンプル

まずは今回の完成品になります。

See the Pen
WNexBQw by otwo (@otwo)
on CodePen.

要点のいくつかを後述しますが、コピペ用のコードはこちら。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>お絵描き DEMO/title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">/script>
<style>
  .option{
    width: 250px;
  }
  .color > a{
    display: inline-block;
    width: 20px;
    height: 20px;
  }
  .black{
    background-color: #000000;
  }
  .red{
    background-color: #ff0000;
  }
  .blue{
    background-color: #0000ff;
  }
</style>
</head>
<body>
  
  
    
      色：
      
      
      
    
    
      太さ：
      小
      中
      大
    
  
  
  ダウンロード
  

  <script>
    // canvas
    var cnvs = document.getElementById('canvas');
    var ctx = cnvs.getContext('2d');

    // 変数宣言
    const cnvWidth = 500;
    const cnvHeight = 500;
    var cnvColor = "255, 0, 0, 1";  // 線の色
    var cnvBold = 5;  // 線の太さ
    var clickFlg = 0;  // クリック中の判定 1:クリック開始 2:クリック中
    var bgColor = "rgb(255,255,255)";

    // canvasの背景色を設定(指定がない場合にjpeg保存すると背景が黒になる)
    setBgColor();

    // canvas上でのイベント
    $("#canvas").mousedown(function(){
      clickFlg = 1; // マウス押下開始
    }).mouseup(function(){
      clickFlg = 0; // マウス押下終了
    }).mousemove(function(e){
      // マウス移動処理
      if(!clickFlg) return false;
      draw(e.offsetX, e.offsetY);
    });

    // 描画処理
    function draw(x, y) {
      ctx.lineWidth = cnvBold;
      ctx.strokeStyle = 'rgba('+cnvColor+')';
      // 初回処理の判定
      if (clickFlg == "1") {
        clickFlg = "2";
        ctx.beginPath();
        ctx.lineCap = "round";  //　線を角丸にする
        ctx.moveTo(x, y);
      } else {
        ctx.lineTo(x, y);
      }
      ctx.stroke();
    };

    // 色の変更
    $(".color a").click(function(){
      cnvColor = $(this).data("color");
      return false;
    });

    // 線の太さ変更
    $(".bold a").click(function(){
      cnvBold = $(this).data("bold");
      return false;
    });

    // 描画クリア
    $("#clear").click(function(){
      ctx.clearRect(0,0,cnvWidth,cnvHeight);
      setBgColor();
    });

    // canvasを画像で保存
    $("#download").click(function(){
      canvas = document.getElementById('canvas');
      var base64 = canvas.toDataURL("image/jpeg");
      document.getElementById("download").href = base64;
    });

    function setBgColor(){
      // canvasの背景色を設定(指定がない場合にjpeg保存すると背景が黒になる)
      ctx.fillStyle = bgColor;
      ctx.fillRect(0,0,cnvWidth,cnvHeight);
    }
  </script>
</body>
</html>