How To Center A Canvas On Top Of A Background Image

I have an image that I want to use as a document background, and place on top of it a canvas element. The reason is that the background is large (2048x1024) and if I place it insid

Solution 1:

Solution with absolute positions:

#container {
  border: 2px solid red;
  width: 350px; height: 250px;
  position: relative;
  padding: 10px;
}
#container.img1 {
  position: absolute;
  width: 350px; height: 250px;
}
#container#canvas {
  position: absolute;
  outline: 2px solid black;
  top: 10px; left: 60px;
}

<divid="container"><imageclass="img1"src="https://placeholdit.imgix.net/~text?txtsize=63&bg=FF6347&txtclr=ffffff&txt=Image-1&w=350&h=250"id="back"/><canvasid="canvas"width="250"height="250">No Canvas support!</canvas></div>

You can also achieve this without absolute positions using margin: 0 auto, or display: inline-block and text-align:center, or with flex positions, or with transform: translate(...)

Ex:

#container {
  border: 2px solid red;
  width: 350px; height: 250px;
  position: relative;
  padding: 10px;
}
#container.img1 {
  display: block;
  width: 350px; height: 250px;
}
#container#canvas {
  outline: 2px solid black;
  transform: translate(50px, -250px);
}