Check if canvas is not empty

Question

I have 3 signature boxes on a page and I'm trying to check if they are empty/blank.

I tried $('#input_5_9').val() == '' but it doesn't detect anything. When I interact with the canvas nothing changes in the HTML.

The HTML for the canvas is:

<canvas id="input_5_9" width="300" height="180" style="border-width: 2px; border-style: dashed; border-color: rgb(221, 221, 221); background-color: rgb(255, 255, 255); cursor: url(&quot;https://website.com/super_signature/pen.cur&quot;), pointer; width: 300px; height: 180px;"></canvas>

https://stackoverflow.com/questions/2925130/jquery-equivalent-of-getting-the-context-of-a-canvas — Andres Paul, Jun 30 '21 at 08:37
When the signature is placed in to the `canvas` what does the HTML look like? Is a `path` or some other element appended to the `canvas`? I would assume you just need to use the `:empty` selector — Rory McCrossan, Jun 30 '21 at 08:41

score 0 · Accepted Answer · answered Jun 30 '21 at 09:08

If you want to check number of nested object in canvas, you can use $('#input_5_9').children().length to check is empty or not.

if($('#input_5_9').children().length == 0)
  console.log("canvas is empty");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<canvas id="input_5_9" width="300" height="180" style="border-width: 2px; border-style: dashed; border-color: rgb(221, 221, 221);
background-color: rgb(255, 255, 255); 
cursor: url(&quot;https://website.com/super_signature/pen.cur&quot;), pointer; width: 300px; height: 180px;">
    </canvas>

Check if canvas is not empty

1 Answers1