adding image inside html canvas using javascript not working-CodePudding

i am trying to create an image canvas where user can zoom into the image, the code which i got from here enter link description here, now i tried to add image inside it and i did the following code:

function draw(scale, translatePos) {
  var canvas = document.getElementById("myCanvas");
  var context = canvas.getContext("2d");
  make_base(context);
}

function make_base(context) {
  var base_image = new Image();
  base_image.src = 'https://www.gstatic.com/webp/gallery3/1.sm.png';
  base_image.onload = function() {
    context.drawImage(base_image, 0, 0);
  }
}

window.onload = function() {
  var canvas = document.getElementById("myCanvas");

  var translatePos = {
    x: canvas.width / 2,
    y: canvas.height / 2
  };

  var scale = 1.0;
  var scaleMultiplier = 0.8;
  var startDragOffset = {};
  var mouseDown = false;

  // add button event listeners
  document.getElementById("plus").addEventListener("click", function() {
    scale /= scaleMultiplier;
    draw(scale, translatePos);
  }, false);

  document.getElementById("minus").addEventListener("click", function() {
    scale *= scaleMultiplier;
    draw(scale, translatePos);
  }, false);

  // add event listeners to handle screen drag
  canvas.addEventListener("mousedown", function(evt) {
    mouseDown = true;
    startDragOffset.x = evt.clientX - translatePos.x;
    startDragOffset.y = evt.clientY - translatePos.y;
  });

  canvas.addEventListener("mouseup", function(evt) {
    mouseDown = false;
  });

  canvas.addEventListener("mouseover", function(evt) {
    mouseDown = false;
  });

  canvas.addEventListener("mouseout", function(evt) {
    mouseDown = false;
  });

  canvas.addEventListener("mousemove", function(evt) {
    if (mouseDown) {
      translatePos.x = evt.clientX - startDragOffset.x;
      translatePos.y = evt.clientY - startDragOffset.y;
      draw(scale, translatePos);
    }
  });

  draw(scale, translatePos);
};



jQuery(document).ready(function() {
  $("#wrapper").mouseover(function(e) {
    $('#status').html(e.pageX   ', '   e.pageY);
  });
})

body {
  margin: 0px;
  padding: 0px;
}

#wrapper {
  position: relative;
  border: 1px solid #9C9898;
  width: 578px;
  height: 200px;
}

#buttonWrapper {
  position: absolute;
  width: 30px;
  top: 2px;
  right: 2px;
}

input[type="button"] {
  padding: 5px;
  width: 30px;
  margin: 0px 0px 2px 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<body onmousedown="return false;">
  <div id="wrapper">
    <canvas id="myCanvas" width="578" height="200">
  </canvas>
    <div id="buttonWrapper">
      <input type="button" id="plus" value=" "><input type="button" id="minus" value="-">
    </div>
  </div>
  <h2 id="status">
    0, 0
  </h2>
</body>

however the image is not getting displayed inside the canvas, can anyone please tell me what could be wrong in here, thanks in advance

CodePudding user response：

Your draw function never actually draws to the canvas. You get the canvas and context in the first 2 lines, but you need to call drawImage with the image to actually add it to the canvas itself.

I suspect you want to be calling make_base inside it like so:

function draw(scale, translatePos) {
  var canvas = document.getElementById("myCanvas");
  var context = canvas.getContext("2d");
  make_base();
}

You also need to have the context in the same scope as you use it. At the moment, the variable context only exists inside the draw function and not the make_base function, so you can't access it from inside make_base.

You can pass it as a variable like so:

function draw(scale, translatePos) {
  var canvas = document.getElementById("myCanvas");
  var context = canvas.getContext("2d");
  make_base(context);
}

function make_base(context) {
  var base_image = new Image();
  base_image.src = 'a2.jpg';
  base_image.onload = function() {
    context.drawImage(base_image, 0, 0);
  }
}

Every time you want to change anything on an HTML canvas you need to call draw functions to change what's there.