Clearing Canvas after submission

Question

I created a small form where a user can add notes and sign on a Canvas. I'm having a problem clearing the canvas after submission can't get it to work. all other parts work just fine.

The idea is to clear both the text field and the canvas at submission.

Now i juts need to type more text for Stack-overflow let me post this questions

<form method="post" enctype="multipart/form-data" id="notes">
  <div class="modal-body">
    <div class="row">
      <div class="col-md-12 col-sm-12">
        <div class="col-md-12 col-sm-12 ">
          <label class=" control-label">Notes: </label>
          <textarea name="notes" style="width:100%" rows="5"></textarea>
        </div>
      </div>
    </div>
    <input type="hidden" id="e_sign" name="e_sign">
    <div class="row">
      <div class="col-md-12">
        <h5> E-Signature (If required) </h5>
      </div>
    </div>
    <div class="row">
      <div class="col-md-12" style="align:center;">
        <canvas
          style="box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.2), 0 10px 20px 0 rgba(0, 0, 0, 0.19); border:2px"
          id="sig-canvas"
          width="550"
          height="250"
          style="background: white; align:center;">
        </canvas>
        <br>
        <div class="row">
          <div class="col-md-12"></div>
        </div>
      </div>
    </div>
  </div>
  <div class="modal-footer">
    <input type="submit" class="btn btn-primary" value="Save">
  </div>
</form>

AND

$(document).ready(function(e) {

  $("#notes").on('submit', (function(e) {

    e.preventDefault();
    var canvas = document.getElementById("sig-canvas");

    image = canvas.toDataURL("image/png", 1);
    $("#e_sign").val(image);
    console.log(image);
    var url = "<?php echo base_url("medication / add_notes / ");?>"
    $.ajax({
      url: url,
      type: "POST",
      data: new FormData(this),
      contentType: false,
      cache: false,
      processData: false,
      success: function(data) {
        $('#note_count').val();
        $('#myModal78').modal('hide');

        swal("Done!", "Notes Successfully Added.", "success");
        $("#notes")[0].reset();
        $("#e_sign")[1].reset();
      },
    });
  }));
});

Google this: `javascript clear canvas`. It's much faster to research the problem you are asking then ask it on Stackoverflow. — Ibu, Feb 15 '18 at 02:18
This is the first result: [How to clear the canvas for redrawing](https://stackoverflow.com/questions/2142535/how-to-clear-the-canvas-for-redrawing) — Ibu, Feb 15 '18 at 02:34

score 0 · Answer 1 · answered Feb 15 '18 at 02:59

0

Try the following snippet, worked just fine here:

var canvas = document.getElementById('canvas');
canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height);

answered Feb 15 '18 at 02:59

Maciej21592

114
1
13

Clearing Canvas after submission

1 Answers1