0

So, im doing a canvas that is deployed in front of an image. The image is in the background and because of it's size I need to put it inside an scrollable area.
Rendering the image inside the scroll it's not a problem and works fine. The problem comes when I do the same with the canvas.
Right now, the canvas width and height is calculated after loading the image.

img.onload = function () {
        if (img.complete) {
            self.canvas.height = img.height;
            self.canvas.width = img.width;

The canvas data is correctly calculated and can be seen inpecting the html but it doesn't work. It's like it doesn't has width or height. The CSS and HTML are very simple.

<div id="container" hidden>
 <img id="mapImage">
 <canvas id="mapCanvas">
 </canvas>
</div>

#container {
 max-height: 75vh;
 max-width: 100vw;
 overflow: scroll;
}

#mapCanvas {
 border: 1px solid #000000;
}

I saw a post solving a problem like this but without the image. What is what I'm missing?
Thanks in advice.

Erik
  • 159
  • 2
  • 11
  • You may scale image(while adding) as per your canvas width & height instead of scrolling. – Richardson. M Sep 17 '19 at 12:26
  • I don't want to scale the image because it will affect to it's quality. The image in the scroll works fine. What I want is the canvas in front of the image and all inside the scroll (which is only a css property). – Erik Sep 17 '19 at 17:17

0 Answers0