How to transfer mouse coordinates from canvas to database in django?

Question

Django

Hello!
I fight the third day, please, prompt. I can not solve the problem of passing coordinates from the canvas to the django database and back.
Here is such a drawing of schemes on django. For now, we are just drawing lines, but these lines must be saved in the database. That is, I draw, it should be immediately saved in the database:
canvas.js:

var ctx = canvas.getContext('2d');
var raf;
var running = false;
var mouseOldPos;
var mousePos;

var wallLine = {
  draw: function() {
    ctx.beginPath();
    ctx.moveTo(mouseOldPos.x, mouseOldPos.y);
    ctx.lineTo(mousePos.x, mousePos.y);
    ctx.stroke();
  }
};

function clear() {
  ctx.fillStyle = 'rgba(255, 255, 255, 1)';
  ctx.fillRect(0,0,canvas.width,canvas.height);
}

canvas.addEventListener('mousemove', function(e) {
  ctx.lineWidth = 10.0; 
  ctx.lineCap = 'square';
  if (running) {
    clear();
    mousePos = getMousePos(canvas, e);
    wallLine.draw();
  }
});

canvas.addEventListener('click', function(e) {
  if (!running) {
    mouseOldPos = getMousePos(canvas, e);
    running = true;

  } else {
    running = false;
  }

});

function getMousePos(canvas, e) {
  var rect = canvas.getBoundingClientRect();
  return {
      x: e.clientX - rect.left,
      y: e.clientY - rect.top
  };
}

plan_detail.html template:

{% extends "base_generic.html" %}

{% block content %}
  <h1>Name: {{ plan.name }}</h1>
  <strong>Architect:</strong> {{ plan.architect }}</p>
  <p><strong>Approved:</strong> {{ plan.approved }}</p>
  <p><strong>num_elements:</strong> {{ num_elements }}</p>
  <p><strong>Approve Date:</strong> {{ plan.approve_date }}</p>  
  {% if perms.catalog.can_edit_plan %}
      <a href="{% url }">Edit</a>  
  {% endif %}
  <canvas id="canvas" style="border: 1px solid" width="1000" height="700"></canvas>
  {% load static %}   
  <script type="text/javascript" src="{% static 'js/canvas.js' %}"></script>

  <script>
    var canvas = document.getElementById('canvas');
  </script>

{% endblock %}

As you can see above, I tried to link all this through the script on the page with the script in the file, but it did not work out.
Model in models.py for all lines of all circuits:

class Element(models.Model):
    """Element - it's wall or smth else on the axis. Between axises"""
    #axis_owner = models.ForeignKey(Axis, on_delete=models.SET_NULL, null=True, blank=True, related_name='axis_owner') # need for slanted axises???
    plan_id = models.UUIDField(null=True, blank=True)
    axis_id = models.IntegerField()
    x0 = models.IntegerField()
    y0 = models.IntegerField()
    x1 = models.IntegerField()
    y1 = models.IntegerField()
    # for explicitly specify alignment. By default alignment define automatically:
    
    ALIGN = (
        ('l', 'Left'),
        ('r', 'Right'),
        ('c', 'Center'),
        ('a', 'Auto'),
    )

    align = models.CharField(
        max_length=1,
        choices=ALIGN,
        blank=True,
        default='c',
        help_text='You can explicitly specify alignment option. Default = Auto',
    )

    def save(self, *args, **kwargs):
        super(Element, self).save(*args, **kwargs)

    def __str__(self):
        """String for representing the Model object."""
        return self.axis_id

line in urls.py:

path('plan/<uuid:pk>/', views.canvasData, name='plan-detail'),

Function in views.py:

def canvasData(request, pk):
    """View function for elements rendering on canvas"""
    context = {
        
    }
    return render(request, 'catalog/plan_detail.html', context=context)

Where pk is the pk of the scheme (plan_id in the Element class), each scheme has its own set of these same lines.
In the end, my thing should look something like this:

Answer 1

Thank you all, I solved the issue by watching this video https://youtu.be/9QNw5v6BUBE , although I don’t like video tutorials. While it works on the local, I don’t know how it will be on the combat one.