JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="myCanvas"></canvas>
<div class="container">
    
<h2>Add a design</h2>

    <form id="design" enctype="multipart/form-data" method="post">
        <input type="hidden" name="csrfmiddlewaretoken" value="qrGJSSQADxYItnN0TKUUPJA3JExfaFaP" />
        <input id="id_hidden_preview_field" name="hidden_preview_field" type="hidden" />
        <!--<input type='submit' value='Save' />-->
        <button id="gif">Save</button>
    </form>
</div>

JavaScript

/* Some drawing on canvas */
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World", 10, 50);

/* Get the needed elements from the DOM */
var form = document.getElementById('design'),
    saveButton = document.getElementById('gif'),
    hiddenField = document.getElementById('id_hidden_preview_field');

/* Add click listener on save button click */
saveButton.addEventListener('click', createBlob, false);

/* The click handler function */
function createBlob() {
    var imageblob = canvas.toDataURL('image/jpeg', 0.5);

    hiddenField.value = imageblob; // Here we put the imageurl blob into the hidden_preview_field.

    // Here we submit the form with the 
    form.submit();
}