HTML/Javascript: zoom and interact on a canvas element

Question

I am a bioinformatician who recently discovered Javascript and I have a question about the canvas element.

Without going into the biological details, according to a set of genes entered by the user, I want to generate a visualization of the position of the genes on each chromosome, here an example of one of the chromosomes (it's still summary, there are not yet legends):

the little black lines represents each gene, but as you can see, this view is very global and we cannot clearly see the genes (which are in reality black rectangle)

I added an another canvas element, the green stroke rectangle, and I want that when the user click to zoom on this fictive rectangle, there is a zoom on this region, exactly like on this exemple: https://canvasjs.com/docs/charts/basics-of-creating-html5-chart/zooming-panning/

I don't know if it's possible with canvas elements, i tried to use contexte.scale(2,2) but it just enlarges the image, without zooming in on it

function zoom() {
    var path1 = new Path2D();
    path1.rect(20, 150, 1160, 150); 
    context.stroke(path1);
    canvas.addEventListener("click", function(e) {
    var r = canvas.getBoundingClientRect(),

      x = e.clientX - r.left,
      y = e.clientY - r.top;

    if (context.isPointInPath(path1, x, y)) {
        contexte.scale(2,2)
    ;
  };
})
}

path1 is the green rectangle, as you can see I'm far away to reproduce the exemple on the link (I wanted to try first with a simple click event)

I hope I have clearly expressed the problem

In my opinion this is not a proper zoom. In the canvasjs example they are using the data from the selected zone and rebuild the chart from scratch. — enxaneta
– enxaneta, Commented May 20, 2019 at 12:53

Davi · Accepted Answer · 2019-05-20 13:24:26Z

2

To "zoom into" the canvas, you can use the .setTransform method of the CanvasContext2D object. Below is some example code for illustration. Please note: This is just a minimal implementation, you have to adapt it to you needs. The relevant parts can be seen in the zoomInOut function.

var points = [10, 12, 13, 16, 23, 27, 28, 29, 35, 42, 60, 62, 73, 76, 83, 87, 88, 89, 105, 142];
var canvas = document.querySelector('#surface');
var ctx = canvas.getContext('2d');
var zoomed = false; // track zoomed state

function clear () {
  ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
}

function drawPoints () {
  clear(); // make sure to clear previously created elements
  points.forEach(function (x) {
    ctx.fillStyle = '#000';
    ctx.fillRect(x, 20, 1, 20);
  });
}

function zoomInOut () {
  if (!zoomed) { // not zoomed in?
    ctx.setTransform(2, 0, 0, 2, 0, 0);
  } else { 
    ctx.setTransform(1, 0, 0, 1, 0, 0);
  }
  zoomed = !zoomed;
  drawPoints();
}

canvas.addEventListener('click', zoomInOut);
drawPoints();

<canvas id="surface" width="400", height="200"></canvas>

answered May 20, 2019 at 13:24

Davi

4,2941 gold badge18 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Vincent Darbot Over a year ago

Thanks, it allowed me to move forward. if that could helps other people, I have use:

var zoomfactor = 2; context.setTransform(zoomfactor, 0, 0, zoomfactor, -(zoomfactor - 1) * (canvas.width/4), -(zoomfactor - 1) * (canvas.height/4));

to keep the element on the center of canvas. Now I have to find how to zoom without have larger lines

Collectives™ on Stack Overflow

HTML/Javascript: zoom and interact on a canvas element

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related