CODEWITHSUNDEEP
javascripthtml5-canvas
Virat
Virat

Reputation: 129

Image Rendered inside the canvas disappears when I draw Bounding Boxes?

I'm trying to draw Bounding Boxes on the Image Rendered on a canvas. But as soon as I draw the Bounding Boxes, the Image disappears. Can anyone help me fix this, with reference to my following code:

<body>
    <canvas id="canvas1" width="300" height="300"></canvas>

    <script>
        var canv = document.getElementById('canvas1'),
            ctx = canv.getContext('2d'),
            rect = {},
            drag = false;

        function draw() {
            ctx.strokeRect(rect.startX, rect.startY, rect.w, rect.h);
        }

        function mouseDown(e) {
            rect.startX = e.pageX - this.offsetLeft;
            rect.startY = e.pageY - this.offsetTop;
            drag = true;
        }

        function mouseUp() {
            drag = false;
        }

        function mouseMove(e) {
            if (drag) {
                rect.w = (e.pageX - this.offsetLeft) - rect.startX;
                rect.h = (e.pageY - this.offsetTop) - rect.startY ;
                ctx.clearRect(0, 0, canv.width, canv.height);
                draw();
            }
        }

        function init() {
            canv.addEventListener('mousedown', mouseDown, false);
            canv.addEventListener('mouseup', mouseUp, false);
            canv.addEventListener('mousemove', mouseMove, false);
        }

        function loadImage(canvas, context){
            var img = new Image();
            img.onload = function(){
                context.drawImage(img, 0, 0, img.width, img.height,
                                       0, 0, canvas.width, canvas.height );
            };
            img.src = "./Pics/img3.png";
        }

        init();
        loadImage(canv, ctx);

    </script>
</body>

NOTE: I am rendering Images that have dimensions(width & height) larger than that of the canvas

Upvotes: 0

Views: 1255

Answers (1)

Kaiido
Kaiido

Reputation: 136627

That's what your code is asking to do,

ctx.clearRect(0, 0, canv.width, canv.height); // This clears the canvas
draw();

To avoid this, you'll have to call again ctx.drawImage() from your draw() method.

But the best will probably be to wait for your Image has loaded before starting anything of your app, this way, img.onload will be responsible of telling when the assets are ready, and you will be able to use that image since the initialization of your drawing app.

var canv = document.getElementById('canvas1'),
  ctx = canv.getContext('2d'),
  rect = {},
  drag = false,
  img = loadImage(init); // pass the init function as a callback

function loadImage(cb)  {
  var img = new Image();
  img.onload = cb;
  img.src = "https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png";
  return img;
}

function draw() {
  ctx.clearRect(0, 0, canv.width, canv.height); // clear
  ctx.drawImage(img, -200, -100); // draw bg
  drawRect(); // draw rect
}

function drawRect() {
  ctx.strokeRect(rect.startX, rect.startY, rect.w, rect.h);
}

function mouseDown(e) {
  rect.startX = e.pageX - this.offsetLeft;
  rect.startY = e.pageY - this.offsetTop;
  drag = true;
}

function mouseUp() {
  drag = false;
}

function mouseMove(e) {
  if (drag) {
    rect.w = (e.pageX - this.offsetLeft) - rect.startX;
    rect.h = (e.pageY - this.offsetTop) - rect.startY;
    draw();
  }
}

function init() {
  canv.addEventListener('mousedown', mouseDown, false);
  canv.addEventListener('mouseup', mouseUp, false);
  canv.addEventListener('mousemove', mouseMove, false);
  draw();
}
<canvas id="canvas1" width="300" height="300"></canvas>

Upvotes: 1

Related Questions