Изменять изображение после загрузки с использованием холста HTML ⇐ Javascript

[Anonymous]

Я хочу нарисовать границу вокруг изображения после того, как оно загружается с использованием нового Image ()
Это работает, я вижу границу, но изменяет image.src внутри функции Onload снова нагрузку в бесконечном цикле. Но как я могу изменить изображение иначе?

Код: Выделить всё

let image = new Image();
image.onload = function () {
console.log("onload");
let canvas = document.createElement('canvas');
let ctx = canvas.getContext('2d');
ctx.drawImage(image, 0, 0);
ctx.strokeStyle = 'red';
ctx.lineWidth = 5;
ctx.strokeRect(0, 0, image.width, image.height);
image.src = canvas.toDataURL();
};
image.src = "https://placehold.co/600x400";
document.body.appendChild(image);

Подробнее здесь: https://stackoverflow.com/questions/797 ... tml-canvas