不同的HTML画布坐标

Question

我将2个参考尺寸的html画布绘制为绘图

1. 第一张画布=宽度：400px，高度：200px
2. 第二画布=宽度：200像素，高度：100像素

现在，当我在第一个html画布中绘制时，我将该坐标（x1，y1，x2，y2）发送到第二个画布。

当第一个画布坐标在第二个画布中发送时，它不在与第一个画布相同的位置绘制。

可以在不更改画布宽度和高度的情况下使第一个画布坐标等于第二个画布坐标。

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(); 

当用户在画布1中沉浸时，我将该坐标发送到两个画布。但在第二个画布中，绘图位置与画布1不在同一位置。注意：画布1和2具有不同的宽度和高度。

我需要在不改变两个画布的宽度高度的情况下对其进行处理。

Answer 1

我希望我做出了正确的假设来回答您的问题。我创建了两个大小不同的两个不同的画布。坐标仅适合较大的第一个画布。