How to validate if HTML canvas is empty or not

Asked by At

I'm trying to validate if a HTML canvas is empty or not. Iv tried what this post mentioned How to check if a canvas is blank? , but with no luck.

I'm running on WordPress and using a plugin that lets the user design his own product. currently user cannot proceed to next stage (checkout) if the design is empty only if there is one stage on the product. in my case there are 2 stages front view of t-shirt and back side of t-shirt. so a user can fill one part and still be able to proceed to checkout without filling the next stage. I'v attached a video for better explanation and a link to the product editor. below is the code that if tried on my end (following the post ) to block the user from continuing, but my guess is that the canvas already has data inside and I'm not sure how can I validate it properly.

var canvas = document.getElementById('lumise-stage-front-canvas')
var btn = document.getElementById('lumise-cart-action')

// add event listener
btn.addEventListener('click',function(){
    if(canvas.toDataURL() == document.getElementById('empty').toDataURL()){
    alert('It is blank');
  }else{
    alert('Save it!');
  } 
});  

I'v tried this option as well by targeting the data-set attribute on the lumise-top-tools element. it worked, but I couldn't target the 2nd stage maybe because its hidden when the 1st stage is active

var x = document.getElementById('lumise-top-tools')
var btn = document.getElementById('lumise-cart-action');

// add event listener
btn.addEventListener('click', function(){
    if(x.dataset.view == 'standart'){alert('Empty Design')}
});

cheers to all,

Product editor

Explanation Video

0 Answers