Canvasを使って手書きの署名機能を実装する

環境

ブラウザ：vivald・iOS safari

はじめに

ルート営業を行うクライアントから、タブレットの契約書に手書きで署名できる機能が欲しいと言われました。
アプリで作ろうか悩みましたが、試しにHTML５で実装したものを提案してみました。

デモ

ソース （2022/04/05 改定版）

戻る進むが機能しない不具合を修正しました。（2022/04/05）

IEで動作しない不具合を修正しました。（2018/10/25）

HTML

<canvas id="canvassample" width="500" height="300"></canvas>
<div style="padding:10px">
  <button type="button" onclick="clearCanvas()">リセット</button>
  <button type="button" onclick="prevCanvas()">戻る</button>
  <button type="button" onclick="nextCanvas()">進む</button>
</div>
<div style="padding:10px">
  <button type="button" onclick="chgImg()" value="1">画像変換</button>
</div>
<h2>画像出力<h2> 
<div id="img-box"><img id="newImg"></div>

Javascript

var canvas = document.getElementById('canvassample'),
    ctx = canvas.getContext('2d'),
    moveflg = 0,
    Xpoint,
    Ypoint;

//初期値（サイズ、色、アルファ値）の決定
var defSize = 7,
    defColor = "#555";

// キャンバスを白色に塗る
ctx.fillStyle = 'rgb(255,255,255)';

// ストレージの初期化
var myStorage = localStorage;
window.onload = initLocalStorage();

// PC対応
canvas.addEventListener('mousedown', startPoint, false);
canvas.addEventListener('mousemove', movePoint, false);
canvas.addEventListener('mouseup', endPoint, false);
// スマホ対応
canvas.addEventListener('touchstart', startPoint, false);
canvas.addEventListener('touchmove', movePoint, false);
canvas.addEventListener('touchend', endPoint, false);

function startPoint(e){
  e.preventDefault();
  ctx.beginPath();

  Xpoint = e.layerX;
  Ypoint = e.layerY;
  
  ctx.moveTo(Xpoint, Ypoint);
}

function movePoint(e){
  if(e.buttons === 1 || e.witch === 1 || e.type == 'touchmove'){
    Xpoint = e.layerX;
    Ypoint = e.layerY;
    moveflg = 1;
    
    ctx.lineTo(Xpoint, Ypoint);
    ctx.lineCap = "round";
    ctx.lineWidth = defSize * 2;
    ctx.strokeStyle = defColor;
    ctx.stroke();  
  }
}

function endPoint(e)
{
    if(moveflg === 0){
       ctx.lineTo(Xpoint-1, Ypoint-1);
       ctx.lineCap = "round";
       ctx.lineWidth = defSize * 2;
       ctx.strokeStyle = defColor;
       ctx.stroke();
       
    }
    moveflg = 0;
    setLocalStoreage();
}

function clearCanvas(){
    if(confirm('Canvasを初期化しますか？'))
    {
        initLocalStorage();
        temp = [];
        resetCanvas();
    }
}

function resetCanvas() {
    ctx.clearRect(0, 0, ctx.canvas.clientWidth, ctx.canvas.clientHeight);
    ctx.fillStyle = 'rgb(255,255,255)';
}

function chgImg()
{
    var png = canvas.toDataURL();
    document.getElementById("newImg").src = png;
}

function initLocalStorage(){
    myStorage.setItem("__log", JSON.stringify([]));
}
function setLocalStoreage(){
    var png = canvas.toDataURL();
    var logs = JSON.parse(myStorage.getItem("__log"));

    setTimeout(function(){
        logs.unshift({png:png});
        myStorage.setItem("__log", JSON.stringify(logs));
        temp = [];
    }, 0);
}

function prevCanvas(){
    var logs = JSON.parse(myStorage.getItem("__log"));

    if(logs.length > 0){
        temp.unshift(logs.shift());

        setTimeout(function(){
            myStorage.setItem("__log", JSON.stringify(logs));
            resetCanvas();
            draw(logs[0]['png']);
        }, 0);
    }
}

function nextCanvas(){
    var logs = JSON.parse(myStorage.getItem("__log"));

    if(temp.length > 0){
        logs.unshift(temp.shift());

        setTimeout(function(){
            myStorage.setItem("__log", JSON.stringify(logs));
            resetCanvas();
            draw(logs[0]['png']);
        }, 0);
    }
}

function draw(src) {
    var img = new Image();
    img.src = src;

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

CSS

canvas {
  border:3px solid #000;
}

関連記事

Canvasに入力したものを画像に変換するための(参考記事)↓

Canvasに入力した後に初期の状態に戻したい時の(参考記事)↓

Canvasにペイントのように「戻る」や「進む」ができるようにした(参考記事)↓