Different html canvas coordinates

问题

i made 2 deference size html canvas to drawing

First canvas = width : 400px,height:200px
Second canvas = width : 200px,height :100px

Now when i drawing in first html canvas i send that coordinates(x1,y1,x2,y2) to second canvas.

When first canvas coordinates send in second canvas it's not drawing in same place as first canvas.

is there way to equal first canvas coordinates to second one without changing canvas width and height .

ctx.beginPath(); 
ctx.lineWidth = 5; 
ctx.lineCap = 'round'; 
ctx.strokeStyle = "red"; 
ctx.moveTo(coord.x, coord.y); 
ctx.lineTo(ncoord.x , ncoord.y); 
ctx.stroke(); 


//SECOUND CANVAS
ctx2.beginPath(); 
ctx2.lineWidth = 5; 
ctx2.lineCap = 'round'; 
ctx2.strokeStyle = "red"; 
ctx2.moveTo(coord.x, coord.y); 
ctx2.lineTo(ncoord.x , ncoord.y); 
ctx2.stroke();

when user drwaing in canvas 1 i send that coordinates to both canvas. but in second canvas not drawing in same place as canvas 1. Note : canvas 1 and 2 have deferent width and height.

I need to slove this without changing width height of the both canvas.

回答1:

I hope I have made the right assumptions to answer your question. I created two different canvases of two different sizes. The coordinates only fit on the first, bigger, canvas.

You can transform the 'big' coordinates to 'small' coordinates by dividing the width or height of the bigger smaller canvases by the bigger canvases. For example, the height of the big canvas is 200 but the height of the smaller one is 100. If you divide 100 / 200 you get 0.5. The 'small' coordinates should be half as high as the original ones. See for yourself below:

//just for testing purposes
var coord = {
  x: 320,
  y: 125
};
var ncoord = {
  x: 220,
  y: 90
};

function drawBig() {
  var canvas = document.getElementById("canvas1");
  var ctx = canvas.getContext("2d");
  ctx.beginPath();
  ctx.lineWidth = 5;
  ctx.lineCap = 'round';
  ctx.strokeStyle = "red";
  ctx.moveTo(coord.x, coord.y);
  ctx.lineTo(ncoord.x, ncoord.y);
  ctx.stroke();

}

function drawSmall() {
  let bigCanvas = document.getElementById("canvas1");
  let smallCanvas = document.getElementById("canvas2");

  //Devide the dimensions of the big and small canvas in order to get the magnification factor:
  let widthDimension = smallCanvas.width / bigCanvas.width;
  let heightDimension = smallCanvas.height / bigCanvas.height

  var ctx2 = smallCanvas.getContext("2d");
  ctx2.beginPath();
  ctx2.lineWidth = 5;
  ctx2.lineCap = 'round';
  ctx2.strokeStyle = "red";

  //Transform the original coordinates to the right dimensions:
  ctx2.moveTo(coord.x * widthDimension, coord.y * heightDimension);
  ctx2.lineTo(ncoord.x * widthDimension, ncoord.y * heightDimension);
  ctx2.stroke();

}

canvas {
  border: 1px solid black;
}

<canvas id="canvas1" width="400" height="200"></canvas>
<hr>
<canvas id="canvas2" width="200" height="100"></canvas>


<button onclick="drawBig()">draw big canvas</button>
<button onclick="drawSmall()">draw small canvas</button>

Hope this helps! If not, please comment

来源：https://stackoverflow.com/questions/62339928/different-html-canvas-coordinates

标签

javascript

html

canvas

html5-canvas

drawing