左端を固定したHTMLキャンバススケール

Question

縮尺される要素を作成しようとしていますが、左端に貼り付ける必要があります。私はここのドキュメントを見ていた：

https://www.w3schools.com/tags/canvas_scale.asp

それは述べている：「位置決めも縮小されます、あなたが拡大した場合（2,2）;図面は二倍の左端と上端から配置されます。あなたが指定したキャンバスの

左上の位置から固定する方法についてのヒントはありますか？

Answer 1

スケーリング後にキャンバスの原点を左上隅に戻すにはctx.translateを使用できます。

var c=document.getElementById("myCanvas"); 
 
var ctx=c.getContext("2d"); 
 
ctx.strokeRect(5,5,25,15); 
 
ctx.scale(2,2); 
 
ctx.translate(-2.5, -2.5); 
 
ctx.strokeRect(5,5,25,15);

<canvas id="myCanvas"></canvas>