如何使用画布在图像背景上绘制？

Question

我的代码有什么问题。我试图在画布上加载图像背景，然后在图像画布上绘制几个矩形。我的图像没有显示在画布上，或者它完全覆盖了我的矩形。
我已经关注了这个SO 问题，但它仍然发生了。

//Initialize a new Box, add it, and invalidate the canvas
function addRect(x, y, w, h, fill) {
  var rect = new Box;
  rect.x = x;
  rect.y = y;
  rect.w = w
  rect.h = h;
  rect.fill = fill;
  boxes.push(rect);
  invalidate();
}

// holds all our rectangles
var boxes = []; 

// initialize our canvas, add a ghost canvas, set draw loop
// then add everything we want to intially exist on the canvas
function drawbackground(canvas,ctx,onload){
  var img = new Image();
  img.onload = function(){
    // canvas.width = img.width;
    // canvas.height = img.height;
    ctx.drawImage(img);
    //addRect(200, 200, 200, 200, '#FFC02B');
    onload(canvas,ctx);
  };
  img.src = "https://cdnimages.opentip.com/full/VLL/VLL-LET-G.jpg";
}

function init() {
  // canvas = fill_canvas();
  canvas = document.getElementById('canvas');
  HEIGHT = canvas.height;
  WIDTH = canvas.width;
  ctx = canvas.getContext('2d');
  ghostcanvas = document.createElement('canvas');
  ghostcanvas.height = HEIGHT;
  ghostcanvas.width = WIDTH;
  gctx = ghostcanvas.getContext('2d');


  // make draw() fire every INTERVAL milliseconds
  setInterval(draw, INTERVAL);

  // set our events. Up and down are for dragging,
  // double click is for making new boxes
  canvas.onmousedown = myDown;
  canvas.onmouseup = myUp;
  canvas.ondblclick = myDblClick;

  // add custom initialization here:
  drawbackground(canvas,ctx);
  //context.globalCompositeOperation = 'destination-atop';
  // add an orange rectangle
  addRect(200, 200, 200, 200, '#FFC02B');

  // add a smaller blue rectangle
  addRect(25, 90, 250, 150  , '#2BB8FF');
}

//wipes the canvas context
function clear(c) {
  c.clearRect(0, 0, WIDTH, HEIGHT);
}
...

Answer 1

由于图像总是异步加载，并且您在调用 reductionground() 后同步绘制矩形，您将获得一个只有图像的画布。

你需要创建一个函数，它将作为第三个参数传递给reakgroundground，并在这个函数中调用addRect而不是detailground

PS： 您的代码应该抛出异常，因为

onload(canvas,ctx);

将尝试调用 undefined 作为函数