Как подать в рельсы форму рисунков на холсте

Question

Я работаю над модальной формой в приложении для рельсов и хочу сохранить рисунки на холсте, чтобы видеть их, когда я открываю представление шоу.

Вот часть моей формы:

<%= image_tag "body.png", id: "body" %>
<canvas id="myCanvas" width="570" height="570" style="border:1px solid #d3d3d3;"></canvas> 

А вот мои функции JavaScript, чтобы перетащить красный заполненный круг

<script type="text/javascript">

  Draw();

  function Draw() {
  var img = document.getElementById("body");
  var cnvs = document.getElementById("myCanvas");
  cnvs.style.position = "absolute";
  cnvs.style.left = img.offsetLeft + "px";
  cnvs.style.top = img.offsetTop + "px";
}

$("#myCanvas").click(function(e){
     getPosition(e); 
});

var pointSize = 10;

function getPosition(event){
     var rect = myCanvas.getBoundingClientRect();
     var x = event.clientX - rect.left;
     var y = event.clientY - rect.top;

     drawCoordinates(x,y);
}

function drawCoordinates(x,y){  
    var ctx = document.getElementById("myCanvas").getContext("2d");


    ctx.fillStyle = "#ff2626"; 

    ctx.beginPath();
    ctx.arc(x, y, pointSize, 0, Math.PI * 2, true);
    ctx.fill();

}


</script>

Когда я нажимаю на холст, я вижу круг, но как только я щелкаю по нижней части сохранения, все исчезает. Поэтому я ищу способ хранить че круг в моих рельсах db