Multiple ajax requests with swal alerts

Question

in my Django project, I have an announcement page that users use. On this page I am posting a screenshot of the div to slack using the html2canvas plugin. Here I am sending a request to a python function with an ajax request. I want to add one more request to this javascript function but I am getting an error. What I want to do is;

• First Request: I will ask the user a question as "Are you sure" with Swal alert. If he approves, it will create a JIRA Issue with an ajax request;

• If firs request request is successful, I will send the jira id that I sended on the cookie to the input.
• If firs request fails, I will inform you that it failed with swal alert and hide the relevant entry in the form. (in order not to be empty)

• Second Request: I will take screenshot of div with html2canvas and i will send the screenshot information I got from html2canvas to python with ajax and will inform you that the process is completed with Swal alert.

Error "Uncaught ReferenceError: canvas is not defined";

Here is my codes;

function slack() {
    swal({
      title: "Sure?",
      text: "Announcement will be shared on Slack!",
      icon: "warning",
      buttons: true,
      dangerMode: true,
    })
      .then((willDelete) => {
        if (willDelete) {

          $.ajax({
            type: "POST",
            beforeSend: function () {
              swal({
                title: "Sending...",
                icon: "{% static '/images/loading.gif' %}",
                showConfirmButton: false,
                allowOutsideClick: false
              })
            },
            url: "{% url 'createissue' %}",
            data: {
              "summary": summary,
              csrfmiddlewaretoken: '{{ csrf_token }}'
            },
            success: function (html) {
              console.log("Issue creation successful!")
            },
            error: function (jqXHR, exception) {
              swal({
                title: "Error Received While Creating System Incident, Will Send Without Creating Incident!",
                icon: "warning",
              }),
                document.getElementById("incident").style.display = "none"
            }
          }).done(function () {
            var incidentno = getCookie('incidentno')
            document.getElementById("dincidentno").value = incidentno;
            document.cookie = "incidentno=; max-age=- (any digit); path=/;";
            html2canvas(document.getElementById("main"), {
              letterRendering: 1,
              allowTaint: true,
              useCORS: true,
            })
            document.getElementById("result").src = canvas.toDataURL("image/png", 0.5);
            var img = canvas.toDataURL();
            $.ajax({
              type: "POST",
              beforeSend: function () {
                swal({
                  title: "Sending...",
                  icon: "{% static '/images/loading.gif' %}",
                  showConfirmButton: false,
                  allowOutsideClick: false
                })
              },
              url: "{% url 'sendtoslackproblem' %}",
              data: {
                "imageData": img,
                csrfmiddlewaretoken: '{{ csrf_token }}'
              }
            })
          });
          swal({
            title: "Announcement Shared on Slack!",
            icon: "success",
          })
        } else {
          swal("Transaction Canceled!", {
            icon: "error",
          });
        }
      });
  }

Answer 1

Syntax seems incorrect. It should be something like:

html2canvas(document.getElementById("main"), {
              letterRendering: 1,
              allowTaint: true,
              useCORS: true,
            }).then(function(canvas){
 document.getElementById("result").src = canvas.toDataURL("image/png", 0.5);
            var img = canvas.toDataURL();
            $.ajax({
              type: "POST",
              beforeSend: function () {
                swal({
                  title: "Sending...",
                  icon: "{% static '/images/loading.gif' %}",
                  showConfirmButton: false,
                  allowOutsideClick: false
                })
              },
              url: "{% url 'sendtoslackproblem' %}",
              data: {
                "imageData": img,
                csrfmiddlewaretoken: '{{ csrf_token }}'
              }
            })
          });
          swal({
            title: "Announcement Shared on Slack!",
            icon: "success",
          })
})