JSFiddle - React, Tailwind, and code Playground

HTML

<html>
    
    <head>
        <script type="text/javascript">
            function init(){
                canvas = document.getElementById('canvas1');
                ctx = canvas.getContext("2d");
             
            
                ctx.customDrawImage = function(image, x, y){
                    this.drawImage(image, x, y);
                    this.rect(x, y, image.width, image.height);
                }
                var img1 = new Image();
                img1.onload = function(){
                    var x = y = 0;
                    ctx.drawImage(img1, x, y);
                    console.log(ctx.isPointInPath(x + 1, y + 1));

                    x = 1.25 * img1.width;
                    ctx.customDrawImage(img1, x, y);
                    console.log(ctx.isPointInPath(x + 1, y + 1));
                }
            
                img1.src = "http://images4.wikia.nocookie.net/__cb20100607195347/deusex/en/images/3/32/Jccover.jpg";
                
            
            }

          

        </script>
    </head>
    <body onload="init();" bgcolor="yellow">
        <canvas id="canvas1" width="1500" height="1500"></canvas>
    </body>
    
</html>

JavaScript

function handleMouseDown(e) {
           
            // Put your mousedown stuff here
           console.log ("hellooo");
            
           
        }

 $("#canvas1").click(handleMouseDown);