08->09 JavaScript 変更

1. canvas.js
1.1 canvasの初期化

before:

var	canvas	=	document.getElementById("canvas");

after:

root = {
        // context
        "ctx":null,
        "canvas":null,

        // canvasの初期化
        "init":function () {
                this.canvas = document.getElementById('canvas');
                this.ctx = this.canvas.getContext('2d');
        },

1.2 マウス押下開始、マウス押下終了
before:

        canvas.onmousedown = function(e){
                // マウス押下開始
                root.drawStart(e.offsetX, e.offsetY, cnvBold, cnvColor);
                canvas.addEventListener("mousemove" , _mouseMove, false);
        }
        canvas.onmouseup = function(){
                // マウス押下終了
                canvas.removeEventListener("mousemove" , _mouseMove, false);
        }

after:

        root.canvas.onmousedown = function(e){
                // マウス押下開始
                root.drawStart(e.offsetX, e.offsetY, cnvBold, cnvColor);
                root.canvas.addEventListener("mousemove" , _mouseMove, false);
        }
        root.canvas.onmouseup = function(){
                // マウス押下終了
                root.canvas.removeEventListener("mousemove" , _mouseMove, false);
        }

1.3 canvasを画像で保存
before:


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

after:

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

1.4 canvasの初期化
before:


        // ccanvasの初期化
        "init":function () {
                var cnvs = document.getElementById('canvas');
                this.ctx = cnvs.getContext('2d');
        },

after:


        // ccanvasの初期化
        "init":function () {
                this.canvas = document.getElementById('canvas');
                this.ctx = this.canvas.getContext('2d');
        },