I want to place a main bitmap on canvas (jpg,png) and I also want to upload a bitmap file that is going to perform as a mask of the main bitmap.
I would like to know if there is a way to check in Javascript if a bitmap image is a valid mask image? (Like the uploaded image)
I have created a codepen and upload a mask image. If you upload a mask image, you can see the changes on main bitmap on canvas, and if you upload a non mask image nothing will change. I need to validade the mask image by code in some way
`context.drawImage(bg, 0, 0, canvas.width, canvas.height);
maskInput.addEventListener('change', () => {
mask.src = URL.createObjectURL(maskInput.files[0]);
mask.onload = function() {
maskImage.setAttribute('src', mask.src)
isMaskValid(maskImage)
draw()
}
})
function isMaskValid(maskImage){
// todo
}
//You can check all code here
https://codepen.io/thaisdsilve/pen/zYaENbx`