サッカーアプリを作りたいと思っています。

前提・実現したいこと

サッカーのアプリを作りたいと思っています。
具体的にはホワイトボードなどで行う戦術分析をアプリで行えるようにしたいです。
アニメーション機能を用いたいと思っています。
ただし、決められた動きをするアニメーションではなく、自分の指で動かした通りに動くアニメーションを作りたいと思っています。わかりにくいかと思います。すみません。
座標を取得してそれを保存し（データベースで？）、再生すれば良いのかと思いますが分かりません。
アニメーションの再生は再生ボタンを押すと再生するようにしたいです。

発生している問題・エラーメッセージ

指で要素を動かすことには成功しました。
しかし、求めているアニメーションが作れません。


### 該当のソースコード
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: content: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
    <script src="components/loader.js"></script>
    <link rel="stylesheet" href="components/loader.css">
    <link rel="stylesheet" href="css/style.css">
      <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
  </head>
  <style>
      #canvas {
        background: #666;
      }
    </style>
      <table border="0" bgcolor="black"width="100%" height="100%">
         <tr>
                <td class="droppable-elem" align="left" >
                <div class="draggable-elem" style="width:30px; height:30px;border-radius:50%;background-color: blue">
                <div class="draggable-elem" style="width:30px; height:30px;border-radius:50%;background-color: blue"></div>
                <td class="droppable-elem" align="left" >
                <div class="draggable-elem" style="width:30px; height:30px;border-radius:50%;background-color: red">
                <div class="draggable-elem" style="width:30px; height:30px;border-radius:50%;background-color: red"></div>
                </td>

                <td bgcolor="black" align="right">
                <form>
                <INPUT type="button" onClick='history.back();' value="戻る">
                </form>
                </td>
        </tr>
        </table>
      <body onLoad="init()">
        <div id="canvas-container">
        <canvas id="canvas" style="background-color:green;"width="100%" height="100%"></canvas>
        </div>
  <script>
 //画面サイズ
      var theCanvas = document.getElementById('canvas');
function canvas_resize(){
  var windowInnerWidth=window.innerWidth;
  var windowInnerHeight=window.innerHeight;
  theCanvas.setAttribute('width',windowInnerWidth);
  theCanvas.setAttribute('height',windowInnerHeight);
}
window.addEventListener('resize',canvas_resize,false);
canvas_resize();
//サッカーコート
var container = document.getElementById("canvas-container");
var canvas = document.getElementById("canvas");
var context = canvas.getContext('2d');

//親要素のサイズをCanvasに指定
canvas.width = container.clientWidth;
canvas.height = container.clientHeight;

function init() {

  // オブジェクトを描画
  drawRect();
}

function drawRect() {
    //色を指定する
  context.strokeStyle = 'rgb(255,255,255)'; //枠線の色は白
  context.fillStyle = 'rgb(00,00,255)';

context.strokeRect(canvas.width/2.5, canvas.height/13.5,canvas.width/4.5, canvas.height/18.5);
context.strokeRect(canvas.width/3.65, canvas.height/13.4,canvas.width/2.1, canvas.height/9);
context.strokeRect(canvas.width/2.155, canvas.height/16.5,canvas.width/11, canvas.height/70);
context.strokeRect(canvas.width/11, canvas.height/2.142,canvas.width/1.17, 0);
context.strokeRect(canvas.width/11, canvas.height/13.5,canvas.width/1.17, canvas.height/1.241);
context.strokeRect(canvas.width/3.65, canvas.height/1.3,canvas.width/2.1, canvas.height/9);
context.strokeRect(canvas.width/2.5, canvas.height/1.195,canvas.width/4.5, canvas.height/23);
context.strokeRect(canvas.width/2.155, canvas.height/1.135,canvas.width/11, canvas.height/70);
//円弧
context.beginPath();
context.arc(canvas.width/1.94, canvas.height/5.4,canvas.width/10,Math.PI*1,Math.PI*2,true);
context.stroke();
context.closePath();

context.beginPath();
context.arc(canvas.width/1.94, canvas.height/1.3,canvas.width/10,Math.PI*1,Math.PI*2,false);
context.stroke();
context.closePath();
//円
context.beginPath();
context.arc(canvas.width/1.95, canvas.height/2.13,canvas.width/7,0,Math.PI*2,true);
context.stroke();
context.closePath();
}

//タッチ
        function touchStartEvent(event) {
            // タッチによる画面スクロールを止める
            event.preventDefault();
        }

        function touchMoveEvent(event) {
            event.preventDefault();

            // ドラッグ中のアイテムをカーソルの位置に追従
            var draggedElem = event.target;
            var touch = event.changedTouches[0];
            event.target.style.position = "fixed";
            event.target.style.top = (touch.pageY - window.pageYOffset - draggedElem.offsetHeight / 2) + "px";
            event.target.style.left = (touch.pageX - window.pageXOffset - draggedElem.offsetWidth / 2) + "px";
        }

        function touchEndEvent(event) {
            event.preventDefault();

            // ドロップした位置にあるドロップ可能なエレメントに親子付けする
            var touch = event.changedTouches[0];
            // スクロール分を加味した座標に存在するエレメントを新しい親とする
            var newParentElem = document.elementFromPoint(touch.pageX - window.pageXOffset, touch.pageY - window.pageYOffset);
            if (newParentElem.className == "droppable-elem") {
                newParentElem.appendChild(droppedElem);
            }
        }

        {
            // ドラッグ可能アイテムへのタッチイベントの設定
            var draggableItems = $(".draggable-elem");
            for (var i = 0; i < draggableItems.length; ++i) {
                var item = draggableItems[i];
                item.addEventListener('touchstart', touchStartEvent, false);
                item.addEventListener('touchmove', touchMoveEvent, false);
                item.addEventListener('touchend', touchEndEvent, false);
            }
        }
    </script>
    </div>
</body>
</html>

```ここに言語名を入力
html,javascript,css

### 試したこと

決められた動きをするアニメーションは作れましたが、求めているものと違うため断念しました。


### 補足情報（FW/ツールのバージョンなど）
monacaを使ってアプリを作ろうと思っています。
お金がかからないやり方を教えて欲しいです。
よろしくお願いします。