<canvas id="canvas" width="550" height="70" onclick="startCanvasAnimation();"></canvas>
<script>
	(function(){

        // グローバル関数
        window.startCanvasAnimation = startAnimate;

        var canvas = document.getElementById("canvas");
        var context = canvas.getContext("2d");
        var intervalId = null;
        var currentLeft = 0;
        var img = new Image();
        img.onload = function() {
            // 描画
            draw(0);
        }
        img.src = "img/chara.png"

        // アニメーション開始
        function startAnimate() {
            currentLeft = 0;
            draw(currentLeft);
            if (intervalId){
                clearInterval(intervalId);
            }
            intervalId = setInterval(onAnimate, 1000 / 60);
        };

        // アニメーション中
        function onAnimate() {
            currentLeft += 5;
            if (500 < currentLeft) {
                clearInterval(intervalId);
                completeAnimate();
            } else {
                draw(currentLeft);
            }
        };

        // アニメーション終了
        function completeAnimate() {
            currentLeft = 0;
            draw(currentLeft);
        };

        // 描画
        function draw(x) {
            // 描画をクリアー
            context.clearRect(0,0, context.canvas.width, context.canvas.height);
            // 画像の描画
            context.drawImage(img, x, 0);
        }

    })();
</script>