canvasでお絵かきアプリ

デモ：http://mo49.tokyo/qiita/20160505/

スマホ対応。
色、サイズ、絵文字の変更、消しゴム、デバイスを傾けると全消去機能つき。

<canvas style="background: #f3f3f3" id="canvas"></canvas>
<div id="container">
    <ul>
        <li><input id="btn-color" type="color"></li>
        <li id="btn-eraser" class="btn btn-color" data-color=""><i class="fa fa-eraser" aria-hidden="true"></i></li>
    </ul>
    <ul>
        <li class="btn btn-size" data-size="1">1</li>
        <li class="btn btn-size" data-size="5">5</li>
        <li class="btn btn-size" data-size="10">10</li>
    </ul>
    <ul>
        <li class="btn btn-emoji" data-emoji=""></li>
        <li class="btn btn-emoji" data-emoji="⭐️">⭐️</li>
        <li class="btn btn-emoji" data-emoji="🍀">🍀</li>
        <li class="btn btn-emoji" data-emoji="😊">😊</li>
    </ul>
</div>

var old_x = 0;
var old_y = 0;
var x;
var y;
var globalCompositeOperation  = 'source-over';
var selectColor = '#000';
var selectSize = 1;
var selectEmoji = '';

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext('2d');

window.onload = function() {
    canvas.height = canvas.width = 300;
    canvas.addEventListener("touchstart", touchStart, false);
    canvas.addEventListener("touchmove", touchMove, false);
    canvas.addEventListener("orientationchange", canvasDelete, true);
}

function touchStart(e) {
    old_x = e.touches[0].pageX;
    old_y = e.touches[0].pageY;
}

function touchMove(e) {
    e.preventDefault();

    x = e.touches[0].pageX;
    y = e.touches[0].pageY;

    drawLine(old_x, old_y, x, y);
    old_x = x;
    old_y = y;
}

function drawLine(x1, y1, x2, y2) {
    ctx.globalCompositeOperation = globalCompositeOperation;
    ctx.strokeStyle = selectColor;
    ctx.beginPath();
    ctx.lineJoin = "round";
    ctx.lineCap = "round";
    ctx.lineWidth = selectSize;
    ctx.moveTo(x1, y1);
    ctx.lineTo(x2, y2);
    ctx.fillStyle = selectColor;
    ctx.font = "20px sans";
    ctx.fillText(selectEmoji, x2-30, y2);
    ctx.closePath();
    ctx.stroke();
}

// 左に傾けると消去
function canvasDelete(e) {
    if (window.orientation >= 90) { // 左に90度 右なら-90度
        var alert = confirm("消去しますか？");
        if (alert == false) {return;}
        var ctx = canvas.getContext('2d');
        ctx.clearRect(0, 0, canvas.width, canvas.height);
    }
}

// 色の変更
$('#btn-color').on('change', function(){
    selectColor = $(this).val();
});

// 消しゴム
var flag_eraser = true;
$("#btn-eraser").on('click', function(){
    if ( flag_eraser ) {
        globalCompositeOperation = 'destination-out';
        flag_eraser = false;
    } else {
        globalCompositeOperation = 'source-over';
        flag_eraser = true; 
    }
});

// サイズの変更
$('.btn-size').on('touchstart', function(){
    selectSize = $(this).data('size');
});

// 絵文字の変更
$('.btn-emoji').on('touchstart', function(){
    selectEmoji = $(this).data('emoji');
});

globalCompositeOperation プロパティ