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

Question

What is wrong with my code.I am trying to load the image background on a canvas and then draw few rectangles on the image canvas.my image is not showing up on the canvas or either is it being completely overwritten my rectangles.
I have followed this SO question, but still, it happens.

//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

As the Image loads always asynchronously, and you draw your rects synchronously after drawbackground() call, you will get a canvas with only image on it.

You need to create function which will pe passed as third argument to drawbackground, and call addRect in this function instead of drawbackground

PS: Your code should throw an exception because

onload(canvas,ctx);

will try to call undefined as a function