EN
JavaScript - translate drawing on canvas
0 points
In this article, we would like to show you how to translate drawing on canvas using JavaScript.
Quick solution:
xxxxxxxxxx1
var canvas = document.querySelector('#my-canvas');2
var context = canvas.getContext('2d');3
context.translate(50, -60);4
// draw something
In this example, we use translate() method that moves the canvas and its origin x and y units by given value.
xxxxxxxxxx1
2
<html>3
<head>4
<style>5
6
#my-canvas { border: 1px solid gray; }7
8
</style>9
</head>10
<body>11
<canvas id="my-canvas" width="300" height="200"></canvas>12
<script>13
14
var canvas = document.querySelector('#my-canvas');15
var context = canvas.getContext('2d');16
17
function drawSquare(x, y, side, color) {18
context.beginPath();19
context.rect(x, y, side, side); // rect(x, y, width, height)20
context.strokeStyle = color;21
context.stroke();22
}23
24
drawSquare(50, 80, 100, 'green');25
26
context.translate(50, -60);27
drawSquare(50, 80, 100, 'red');28
29
</script>30
</body>31
</html>result:
