var canvas = document.getElementById("poster");
var windowWidth = $(window).width();
var windowHeight = $(window).height();
console.log(windowWidth, windowHeight)
canvas.width = windowWidth * 0.76;
canvas.height = canvas.width * 1.6;
canvas.style.marginLeft = windowWidth * 0.12 + "px";
canvas.style.marginTop = windowHeight * 0.07 + "px";
var ctx = canvas.getContext("2d");
var ratio = getPixelRatio(ctx);
// {width,x,y}
var postionArr = [
{width: 0.86, x: 0.07, y: 0},
{width: 0.88, x: 0.06, y: 0.33},
{width: 0.76, x: 0.12, y: 0.335},
{width: 0.72, x: 0.14, y: 0.34},
{width: 0.6, x: 0.02, y: 1.2},
{width: 0.2, x: 0.68, y: 1.21}];
$(".poster-p").each(function (index, item) {
var img = new Image();
img.src = $(item).attr("src");
img.onload = function () {
ctx.drawImage(img, $("-sharpposter").width() * postionArr[index].x * ratio, $("-sharpposter").width() * postionArr[index].y * ratio, $("-sharpposter").width() * postionArr[index].width * ratio, $("-sharpposter").width() * postionArr[index].width * ($(item).height() / $(item).width()) * ratio);
};
}); now this order of normal drawing levels should be correct. The loading completion order should be different
so the larger files are finally drawn at the top, not in the order of cycles
the smaller picture can be drawn in a normal order