How to draw behind an image in canvas?

@muriel.schmidt 

To draw behind an image in a canvas, you can use the following steps:

1. Load the image onto the canvas using the drawImage() method. This will place the image on top of the canvas.
2. To draw behind the image, you will need to use the globalCompositeOperation property of the canvas context. Set the value of this property to 'destination-over' before drawing any shapes or objects behind the image.
3. Draw the shapes or objects that you want to appear behind the image using the desired colors and styles.
4. Remember to reset the value of globalCompositeOperation back to its default value of 'source-over' if you plan to draw additional shapes or objects on top of the image.

Here's a simple example code snippet to illustrate how to draw behind an image in canvas:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

const img = new Image();
img.src = 'image.jpg';
img.onload = function() {
  ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

  // Draw behind the image
  ctx.globalCompositeOperation = 'destination-over';
  
  // Draw a rectangle behind the image
  ctx.fillStyle = 'blue';
  ctx.fillRect(50, 50, 100, 100);

  // Reset globalCompositeOperation to default value
  ctx.globalCompositeOperation = 'source-over';
};

In this example, the image is loaded onto the canvas and then a blue rectangle is drawn behind the image using the 'destination-over' value for globalCompositeOperation. This allows the rectangle to appear behind the image on the canvas.