Reducing the bit depth of a JPEG image saved from a HTML Canvas

Question

I have a HTML canvas that you insert which image you want and arrange them accordingly. The end goal of the canvas is to save that canvas as a JPEG image to be used elsewhere. The problem is I need the bit depth of the canvas to be under 24, and currently the Canvas only saves at 32. I have not been able to find many current questions or articles on the subject, so I was wondering if anyone had an idea on the best way to go about doing so? Thank you so much for your assistance!

<a href id="save" download="canvas.jpeg" target="_blank">Save</a>
<canvas class="canvas2" id="canvas2" width ="800" height="500">Your browser does not support the      HTML Canvas tag.</canvas>

<script>
 var canvas = new fabric.Canvas('canvas2', {
    backgroundColor: 'white' }) ;
    var lastPos = {x: 50, y: 250} 

var saveButton = document.getElementById('download');
          save.onclick = function(e) {
            var dataUrl = canvas.toDataURL('image/jpeg'); 
            save.href = dataUrl;
        }
</script>