Canvas HTML5画布缩放设置

我正在尝试设置一个画布，这样我就可以使用真实世界的维度在上面绘制。我希望无论屏幕DPI或分辨率如何，

lineTo

和绘图命令都以mm为单位

你到底是怎么设置的？在我的屏幕上，当我检查

ctx

对象时，10mm字体转换为38px，但在我的手机上是另一个大小

var c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；
c、 高度=100；
c、 宽度=200；
//画一个10毫米的正方形
ctx.beginPath（）；
ctx.moveTo（10,10）；
ctx.lineTo（10,20）；
ctx.lineTo（20,20）；
ctx.lineTo（20,10）；
ctx.lineTo（10,10）；
ctx.stroke（）；
ctx.font=“10mm Arial”；
ctx.fillText（“文本”，10,75）

如果您知道像素的宽度和高度，这很简单。不幸的是，没有自动方法知道像素的大小。最好的办法是询问用户使用的是什么品牌和型号的显示器，然后从预定义列表中查找分辨率。或者忽略显示大小（人们总是放大或缩小），只使用固定的DPI，以便在打印时可以选择以真实尺寸打印。我的问题是我将[x，y]坐标传递到另一个画布上，该画布使用React动态设置，我无法访问其属性。其所有输入坐标均以毫米为单位。当我在画布上渲染文本并尝试在文本周围传递边界框（例如，在下一个画布上）时，它们的缩放比例不匹配。这可能是的重复。目前的挑战是，我们无法访问DPI信息——我想部分原因是由于安全方面，如减少指纹等。但它迫使我们预先定义已知设备的列表（或根据其他元数据猜测哪个设备）。@K3N，当我意识到ctx.font将任何文本大小转换为px时，我施了一些魔法。我输入一个1mm的文本并解析ctx.font以获取px值，并将其用作刻度值。这是一个古怪的想法，似乎真的管用。由于我不担心在画布上显示的大小，我只需要将文本对象转换为px/mm，然后传递给屏幕画布上已经校准的应用程序。