De acuerdo con la documentación de MDN, el método translate() "mueve el lienzo y su origen", pero el siguiente código no mueve el borde del lienzo. Si el método translate() mueve el lienzo, ¿no debería moverse también el borde?
<!DOCTYPE html> <head> <title>Temp</title> <style> canvas { border: 1px solid black; } body { margin: 0; } </style> </head> <body> <canvas id="myCanvas"></canvas> <script> const canvas = document.getElementById("myCanvas") canvas.width = 300; canvas.height = 300; const ctx = canvas.getContext("2d"); ctx.translate(canvas.width / 2, canvas.height / 2); </script> </body> </html>No entiendo muy bien lo que estás tratando de hacer. Si desea compensar su canva, ¿por qué no simplemente hacer esto?
document.getElementById("myCanvas").style.transform = "translate(50%, 50%)";