JSFiddle - React, Tailwind, and code Playground

HTML

<br><canvas id="myCanvas1" width="578" height="200"></canvas>
<img id="foto1" alt="img" width="100px" heith="auto" src="http://taswar.zeytinsoft.com/wp-content/uploads/2014/05/jquery-logo.png">

JavaScript

$(document).ready(function(){
// foi criado esta função porque o onload estava a dar erro
init(1);
});

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) {
            /*
            não é necessário
            position_x = parseInt(width) / 2;
            position_y = parseInt(height) / 2;

            position_x = parseInt(position_x) - 20;
            position_y = parseInt(position_y) - 17;
			*/
            context.beginPath();
            /*
            é aqui que estás a colocar o tamanho fixo
            context.rect(position_x, position_y, 39, 34);
            */
            context.rect(0, 0, width, height);
            context.lineWidth = 1;
            context.strokeStyle = '#00FF00';
            context.stroke();
        }