Onclick on Canvas

Question

I have an image and on top of it is drawn a canvas. I need that when I click on the image it opens to normal size with the canvas design. For now I click on the image and just open it, the canvas does not appear. That’s because I do not have onClick and do not know how to put.

This is the code I have to draw the canvas and open the image. But I need another way to open the image with the canvas drawn on top of it.

    <div class="img_lau_a">
                                    <a href="http://cdn.smokeshot.com.br/imagens/<?= $l->fot_caminho ?>" target="_blank" class="pull-left" href="javascript:void(0);" style="padding-right: 10px;">
                                        <p id="<?= $l->fot_nivel ?>" class="num_lau" style="position: absolute; left: 23px; color: <?= $color ?>; font-size: 60px; z-index: 1000"><b><?= $l->fot_nivel ?> </b></p>
                                        <div id="contentCanvas<?= $key ?>">
                                            <img id="foto<?= $key ?>" class="img_lau" style="max-width: 320px; border-left: 50px <?= $cor ?> solid; position: relative;" alt="img" src="http://cdn.smokeshot.com.br/imagens/<?= $l->fot_caminho ?>" onload='init(<?= $key ?>);'>
                                        </div>
                                    </a>
                                </div>

<script type="text/javascript">
    function init(i) {
        var img = document.getElementById("foto" + i);
        var cs = getComputedStyle(img);
        var width = parseInt(cs.getPropertyValue('width'));
        var height = parseInt(cs.getPropertyValue('height'));
        $('#contentCanvas' + i).html('<canvas id="myCanvas' + i + '" width="' + width + '" height="' + height + '" >');
        drawImg(img, cs, width, height, i);
    }
    function drawImg(img, cs, width, height, i) {
        var myCanvas = 'myCanvas' + i;
        var canvas = document.getElementById(myCanvas);
        var c = document.getElementById(myCanvas);
        var ctx = c.getContext("2d");
        var context = canvas.getContext('2d');
        ctx.drawImage(img, 0, 0, width, height);
        drawRetangle(context, width, height);
    }
    function drawRetangle(context, width, height) {
        position_x = parseInt(width) / 2;
        position_y = parseInt(height) / 2;

        position_x = parseInt(position_x) - 20;
        position_y = parseInt(position_y) - 17;

        context.beginPath();
        context.rect(position_x, position_y, 39, 34);
        context.lineWidth = 1;
        context.strokeStyle = '#00FF00';
        context.stroke();
    }
</script>

Answer 1

You can dynamically put onClick with . setAttribute( "onClick", "Function( " + parameters + ")" ), if the function parameters are dynamic and . setAttribute( "onClick", "Function( parameters )" ) in the case of static.

var a = document.getElementById( id );
    a.setAttribute( "onClick", "Função( parametros )" );

or you can tbm put as an addeventlistener.

<script>
var b = document.getElementById( id );
    b.addEventListener( "click", addAgain );

//função com exemplo diferente que é chamada na função acima 
function addAgain()
{
    var c = document.getElementById( id );
        c.addEventListener( "click", function(){
        document.getElementById( id2 ).innerHTML = "Hello World";
    });
}
</script>

Answer 2

A lot of people want to use the canvas so things don’t leak and consequently increase the window, create scrollbar or keep sliding on their finger. if your problem is this(maybe you want to create a game) you can use a div with the following css properties:

<div style="position:absolute;left:0px;top:0px;width:100vw;height:100vh;overflown:hidden;">
<img src="player.jpeg" onclick="sumir()">
</div>

the overflown makes anything that is outside the div stay hidden!!!