お絵かきできるSNSを作りたい！9

function saveCanvas(){
    var src1_img = new Image();
    var src2_img = new Image();
    src1_img.src = $("#canvas")[0].toDataURL();
    src1_img.addEventListener('load', function() {
        src2_img.src = $("#canvas2")[0].toDataURL();
        src2_img.addEventListener('load', function() {
            var dst_canvas = document.createElement('canvas');
            dst_canvas.width = 800;
            dst_canvas.height = 600;
            dst_canvas.getContext("2d").drawImage(src1_img, 0, 0, 800, 600);
            dst_canvas.getContext("2d").drawImage(src2_img, 0, 0, 800, 600);

            var imageType = "image/png";
            var fileName = "download.png";
            // base64エンコードされたデータを取得 「data:image/png;base64,iVBORw0k～」
            var base64 = dst_canvas.toDataURL(imageType);
            // base64データをblobに変換
            var blob = Base64toBlob(base64);
            // blobデータをa要素を使ってダウンロード
            saveBlob(blob, fileName);
        }, false);
    }, false);
}

// Base64データをBlobデータに変換
function Base64toBlob(base64){
    // カンマで分割して以下のようにデータを分ける
    // tmp[0] : データ形式（data:image/png;base64）
    // tmp[1] : base64データ（iVBORw0k～）
    var tmp = base64.split(',');
    // base64データの文字列をデコード
    var data = atob(tmp[1]);
    // tmp[0]の文字列（data:image/png;base64）からコンテンツタイプ（image/png）部分を取得
    var mime = tmp[0].split(':')[1].split(';')[0];
    //  1文字ごとにUTF-16コードを表す 0から65535 の整数を取得
    var buf = new Uint8Array(data.length);
    for (var i = 0; i < data.length; i++) {
        buf[i] = data.charCodeAt(i);
    }
    // blobデータを作成
    var blob = new Blob([buf], { type: mime });
    return blob;
}

// 画像のダウンロード
function saveBlob(blob, fileName){
    var url = (window.URL || window.webkitURL);
    // ダウンロード用のURL作成
    var dataUrl = url.createObjectURL(blob);
    // イベント作成
    var event = document.createEvent("MouseEvents");
    event.initMouseEvent("click", true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
    // a要素を作成
    var a = document.createElementNS("http://www.w3.org/1999/xhtml", "a");
    // ダウンロード用のURLセット
    a.href = dataUrl;
    // ファイル名セット
    a.download = fileName;
    // イベントの発火
    a.dispatchEvent(event);
}

var blFullscreen = true;
function doFullscreen(){
    var elem = document.getElementById("screen");
    if (blFullscreen){
        if (elem.requestFullscreen) {
          elem.requestFullscreen();
        } else if (elem.webkitRequestFullScreen) {
          elem.webkitRequestFullScreen();
        } else if (elem.mozRequestFullScreen) {
          elem.mozRequestFullScreen();
        } else if (elem.msRequestFullscreen) {
          elem.msRequestFullscreen();
        }
        blFullscreen = false;
    } else {
        if (document.webkitCancelFullScreen) {
            document.webkitCancelFullScreen();
        } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
        } else if (document.msExitFullscreen) {
            document.msExitFullscreen();
        } else if(document.cancelFullScreen) {
            document.cancelFullScreen();
        } else if(document.exitFullscreen) {
            document.exitFullscreen();
        }
        blFullscreen = true;
    }
}

var blReflect = true;
function doReflect(){
    if (blReflect){
        $("#canvas").css('transform', 'scale(-1, 1)');
        $("#canvas2").css('transform', 'scale(-1, 1)');
        blReflect = false;
    } else {
        $("#canvas").css('transform', 'scale(1, 1)');
        $("#canvas2").css('transform', 'scale(1, 1)');
        blReflect = true;
    }
}

        if (blReflect) {
            ox=event.clientX-event.target.getBoundingClientRect().left;
        } else {
            ox=$("#canvas").width() + (parseInt($("body").css('padding-left')) * 2) - event.clientX-event.target.getBoundingClientRect().left;
        }

function doClear(){
    if(confirm('本当にいいんですね？')){
        ct.clearRect(0, 0, $("#canvas").width(), $("#canvas").height());
        ct2.clearRect(0, 0, $("#canvas2").width(), $("#canvas2").height());
    }
}