DrawImage рисует через раз, как исправить?

Question

[Kooper_pro]

Есть канвас
<canvas id="canvas_st"></canvas>
Функция js перерисовки, которая находится в блоке $(document).ready(function())

function resize_canvas(params,canvas) {
	var width=document.body.clientWidth; // ширина  
	var height=document.body.clientHeight; // высота
	var height_can=width/1.777777777777778; //ratio
	
	var ctx = canvas.getContext("2d");
	canvas.width = width;
	canvas.height = height_can;

	document.getElementById("canvas_st").style.width= width;
	document.getElementById("canvas_st").style.height= height_can;
	
	for (keys in params) {
          for (let i = 0; i < params[keys].length; i++) {
             img = new Image();
             img = document.createElement('img');
             img.src = params[keys][i];	
              ctx.drawImage(img, 0, 0, width, height_can);
  	    }
        }
}

Так же есть дефолтный массив картинок

var img_array = {
	img1: ["../base_img/test/default/img1.png"],
	img2: ["../base_img/test/default/img2.png"],
	img3: ["../base_img/test/default/img3.png"],
	img4: ["../base_img/test/default/img4.png"],
	img5: ["../base_img/test/default/img5.png"]
};

При загрузке страницы, прорисовываем массив картинок и при изменение размера, тоже

$(document).ready(function(){
	
       var canvas = document.getElementById("canvas_st");
        resize_canvas(img_array,canvas);
	
        window.onresize = function( event ) {
             resize_canvas(img_array,canvas);
        };
});

Функция клика на канвасе

canvas.addEventListener('mouseup', function (e) {
    	var x = e.pageX - e.target.offsetLeft,
       		y = e.pageY - e.target.offsetTop,
       		heght_img=$("#canvas_st").height();
		width_img=$("#canvas_st").width();

		y=(y*100)/heght_img;
		x=(x*100)/width_img;

		if (y>0 && y<20) {
			rewrite_array("img1","../base_img/test/cat1/sub1/2.png");
			resize_canvas(img_array,canvas);
		}
		if (y>20 && y<75 ) {
			rewrite_array("img2","../base_img/test/cat2/sub2/1.png");
			resize_canvas(img_array,canvas);
		}
		if (y>75 ) {
			rewrite_array("img3","../base_img/test/cat3/sub3/1.png");
			resize_canvas(img_array,canvas);
		}
	
	});

Функция перезаписи массива:

function rewrite_array(id_name,urls) {
	for (keys in img_array) {
		for (let i = 0; i < img_array[keys].length; i++) {
			if (keys==id_name) {
				img_array[keys][i]=urls;
			}
		}
	}
}

Проверял на IE, клики нормально отрисовываются, но на хроме, нет, при первом клике не отрисовывается, а вот при повторном уже отрисовывает, и это касается, все отрисовки. как исправить?

Comments

[twobomb]

Не отрисосывается потому что картинка не успевает загрузится, сначала загрузи все а потом рисуй, как вариант использовать такую функцию.

function loadResources(arr,func){//функция загрузки внешних ресурсов(картинок) arr - массив ссылок, func - функция которая вызовется после загрузки всех ресурсов
  var loadStatus = false;
    loadStatus = {count: arr.length, loaded: 0, percent: 0};//count - общее количество ресурсов, loaded - сколько загружено ресурсов, percent сколько загружено в процентах
    for(var i = 0; i < arr.length; i++){
      var tmp = new Image();
      tmp.src = arr[i];
      tmp.onload = function(){
        loadStatus.loaded++;
        loadStatus.percent = (loadStatus.loaded * 100)/loadStatus.count;
        if(loadStatus.loaded >= loadStatus.count)
          func();
      }	
     }
  return loadStatus;  
 }

[Kooper_pro]

twobomb, спасибо работает