According to MDN documentation translate() method "moves the canvas and its origin" but the below code does not move the border of the canvas. If the translate() method moves the canvas shouldn't the border move as well?
<!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>