Javascriptとcanvasを使ってドラッグ&ドロップでアイコンを指定範囲内で自由に動かせるようにしたい

Javascriptとcanvasを使ってドラッグ&ドロップで複数のアイコンを別々に指定範囲内で動かせるようなものを作成したいです。

下記のサイトを参考にして四角形をドラッグ&ドロップで動かせるようにしました。
https://itecnote.com/tecnote/javascript-drag-and-drop-multiple-objects-in-html5-canvas/

サッカーのフォーメーションを自分で作るような仕様にしたいです。
下の画像のように四角形は並べて、自由にドラッグ&ドロップで動かせるようにしたのですが、この四角形をアイコン画像に置き換えたいです。
イメージ説明

コードを書いてみたのですが、思ったように動かず、エラーが出ています

Javascript

window.onload=function(){
const path = require('path');
console.log(path);
const board = document.getElementById("board");
const ctx=board.getContext("2d");
const chara = new Image();
chara.src="/images/uni.jpg";
chara.onload = ()=>{
    ctx.drawImage(chara,0,0,100,100)

var BB=board.getBoundingClientRect();
var offsetX=BB.left;
var offsetY=BB.top;
var WIDTH = board.width;
var HEIGHT = board.height;
var dragok = false;
var startX;
var startY;

canvas.onmousedown = myDown;
canvas.onmouseup = myUp;
canvas.onmousemove = myMove;

function clear() {
ctx.clearRect(0, 0, WIDTH, HEIGHT);
}

function draw() {
clear();
ctx.fillStyle = "#FAF7F8";
chara(0,0,WIDTH,HEIGHT);
// redraw each rects in the rects[] array
for(var i=0;i<charas.length;i++){
    var r=charas[i];
    ctx.fillStyle=r.fill;
    chara(r.x,r.y,r.width,r.height);
    console.log("い");
}
}
};
function myDown(e){


e.preventDefault();
e.stopPropagation();

var mx=parseInt(e.clientX-offsetX);
var my=parseInt(e.clientY-offsetY);

dragok=false;
for(var i=0;i<charas.length;i++){
    var r=charas[i];
    if(mx>r.x && mx<r.x+r.width && my>r.y && my<r.y+r.height){

        dragok=true;
        r.isDragging=true;
    }
}
startX=mx;
startY=my;
}

function myUp(e){

e.preventDefault();
e.stopPropagation();

dragok = false;
for(var i=0;i<charas.length;i++){
    charas[i].isDragging=false;
}
}

function myMove(e){
if (dragok){

    e.preventDefault();
    e.stopPropagation();

    var mx=parseInt(e.clientX-offsetX);
    var my=parseInt(e.clientY-offsetY);

    var dx=mx-startX;
    var dy=my-startY;

    for(var i=0;i<charas.length;i++){
        var r=charas[i];
        if(r.isDragging){
            r.x+=dx;
            r.y+=dy;
        }
    }

    draw();

    startX=mx;
    startY=my;

}
}
};