Javascript translate() method

A 2D drawing context's translate() method is used. The canvas and its origin are moved by x and y units using the translate(x,y) method.

Otherhand, The drawing position (0,0) on the canvas is remapped by the translate() method. The value is included in the x- and y-coordinate parameters when a method like fillRect() is called after translate().

Syntax

The syntax of the translate() method is demonstrated by the following:

Syntax explanation

x represents the horizontal distance by which we want to move the canvas's origin. If x is positive, the origin shifts to the left; if x is negative, it shifts to the right.
Y stands for the vertical distance that we wish to shift the canvas's origin by. When y is positive or negative, the origin shifts accordingly.
The canvas's origin (0,0) is, by default, located in the left corner of the canvas.
The entire coordinate system is moved by adding a translation transformation, and its new origin is located at (x,y).

Use of the javascript translate.

The translate() function is quite helpful. Consider drawing two objects, one of which is the translation of the other.

We can accomplish the drawing of the first object and translate it. After, we can draw the second thing on the canvas.

We must determine the second object's new coordinates if the translation transformation is not used.

Examples

The examples display the drawing format in the required position using the translate() method.

Example 1: the following example shows the basic translate () method for the square on the canvas. The canvas shows light grey color, and orange colors square translate the position. The single square's value is translated using the javascript method.

<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<title> JavaScript translate() method </title>
</head>
<body>
<h3> JavaScript translate() method </h3>
<canvas id = "canvas_data" height = "200" width = "300" style = "background-color:lightgrey;">
</canvas>
<script>
function draw_line() {
const canvas_var = document.querySelector('#canvas_data');
if (!canvas_var.getContext) {
return;
}
const ct_var = canvas_var.getContext('2d');
// set square's color
  ct_var.fillStyle = 'yellow';
  // set rectangle's height, width, and other dimensions
    ct_var.fillRect(100, 80, 50, 50);
    // translate
    ct_var.translate(120, 110);
    // draw the second square
    ct_var.fillStyle = 'orange';
     // set square height, width, and other dimensions
    ct_var.fillRect(0, 0, 50, 50);
ct_var.stroke();
}
draw_line();
</script>
</body>
</html>

Output

The image shows the two squares with the required style and position.

Example 2: the following example shows the multiple translate () method for the multiple squares on the canvas. Here, we use multiple methods for the different squares to display in the user-required form.

<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<title> JavaScript translate() method </title>
</head>
<body>
<h3> Multiple JavaScript translate() method </h3>
<canvas id = "canvas_data" height = "200" width = "300" style = "background-color:lightgrey;">
</canvas>
<script>
function draw_line() {
const canvas_var = document.querySelector('#canvas_data');
if (!canvas_var.getContext) {
return;
}
const ct_var = canvas_var.getContext('2d');
//translate yellow square
ct_var.translate(60, 5);
// set square's color
  ct_var.fillStyle = 'yellow'; 
  // set rectangle's height, width, and other dimensions
    ct_var.fillRect(100, 80, 50, 50);
    //translate the orange cube
   ct_var.translate(20, 30);
    // draw the second square
    ct_var.fillStyle = 'orange';
     // set square height, width, and other dimensions
    ct_var.fillRect(0, 50, 50, 50);
     //translate the black cube
     ct_var.translate(50, 20);
// draw the second square
    ct_var.fillStyle = 'black';
     // set square height, width and other dimension
    ct_var.fillRect(0, 1, 50, 50);
}
draw_line();
</script>
</body>
</html>

Output

The image shows the multiple squares with the required style and position.

Example 3: the following example shows the multiple translate () method with negative input values for the multiple squares. Here, we use multiple translates () methods for different squares using positive negative, and minimum values to display in the user-required form.

<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<title> JavaScript translate() method </title>
</head>
<body>
<h3> JavaScript translate() method with negative values </h3>
<canvas id = "canvas_data" height = "200" width = "300" style = "background-color:lightgrey;">
</canvas>
<script>
function draw_line() {
const canvas_var = document.querySelector('#canvas_data');
if (!canvas_var.getContext) {
return;
}
const ct_var = canvas_var.getContext('2d');
// set square's color
  ct_var.fillStyle = 'yellow'; 
  // set rectangle's height, width, and other dimensions
    ct_var.fillRect(100, 80, 50, 50);
    //translate the square
ct_var.translate(-60, -15);
    ct_var.fillStyle = 'orange';
     // set square height, width, and other dimensions
    ct_var.fillRect(200, 150, 55, 55);
// draw the second square
    ct_var.fillStyle = 'black';
     // set square height, width, and other dimensions
    ct_var.fillRect(200, 61, 50, 50);  
}
draw_line();
</script>
</body>
</html>

Output

The image shows the multiple squares with the required style and position.

Example 4: the following example shows the multiple translate () method for the clock shape. Here, we use multiple methods for clock shape using values to display shape.

<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width=device-width, initial-scale = 1.0">
<title> JavaScript translate() method </title>
</head>
<body>
<h3> JavaScript translate() method with positive values
</h3>
<h4> Display Clock Position using Canvas
</h4>
<canvas id = "canvas_data" height = "200" width = "300" style = "background-color:lightgrey;">
</canvas>
<script>
function draw_line() {
const canvas_var =document.querySelector('#canvas_data');
if (!canvas_var.getContext) {
return;
}
if (canvas_var.getContext) {
    const ct_var = canvas_var.getContext('2d');
    ct_var.beginPath();
    const centerX_value = canvas_var.width / 3,
        centerY_value = canvas_var.height / 2.5;
    // draw the circle
    ct_var.arc(centerX_value, centerY_value, 74, 0, 3 * Math.PI, false);
    // translate to center
    ct_var.translate(centerX_value, centerY_value);
 //ct_var.translate(60, 1);
    // draw the hour hand
    ct_var.moveTo(0, 0);
   ct_var.lineTo(-30, -20);
    // draw the minute hand
   ct_var.moveTo(0, 0);
    ct_var.lineTo(0, -55);
  ct_var.stroke();
}
}
draw_line();
</script>
</body>
</html>

Output

The image shows the multiple squares with the required style and position.

Example 5: the following example shows the multiple translate () method with positive and negative values for the clock shape. Here, we use a single method for different line positions using values to display shape. The vertical line is displayed as a diagonal line.

<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<title> JavaScript translate() method </title>
</head>
<body>
<h3> JavaScript translate() method with positive and negative values </h3>
<h4>
Display line with position using Canvas
</h4>
<canvas id = "canvas_data" height = "150" width = "200" style = "background-color:#F8F8FF;">
</canvas>
<script>
function draw_line() {
const canvas_var = document.querySelector('#canvas_data');
if (!canvas_var.getContext) {
return;
}
if (canvas_var.getContext) {
const ct_var = canvas_var.getContext('2d');
// set line stroke, line color, and line width
ct_var.strokeStyle = 'orange';
ct_var.lineWidth = 5;
// draw a black line horizontally
ct_var.beginPath();
//set horizontal line and its movement
ct_var.moveTo(100, 10);
//use translate method on vertical line
ct_var.translate(-60, 15);
//Set the line size on the canvas
ct_var.lineTo(100, 100);
ct_var.stroke();
}
}
draw_line();
</script>
</body>
</html> 

Output

The image shows the multiple squares with the required style and position.

Example 6: the following example shows various lines on the canvas with the arguments with the javascript translate () function. We can use multiple input arguments for multiple lines using a single method. We can place 0, none, and numerical data in the input method.

<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<title> JavaScript translate() method </title>
</head>
<body>
<h3> JavaScript translate() method with positive and negative values </h3>
<h4>

Display multiple lines with position using Canvas
</h4>
<canvas id = "canvas_data" height = "150" width = "200" style = "background-color: black;">
</canvas>
<script>
function drawLine_function(ctx_var, x1, y1, x2,y2, stroke, width, trans_x, trans_y) {
        //Start a new path on the line
        ctx_var.beginPath();
        // Use the cursor from the start point of the line
        ctx_var.moveTo(x1, y1);
	//use translate method on lines
ctx_var.translate(trans_x, trans_y);
        //Draw a line from the start cursor position to the given coordination
        ctx_var.lineTo(x2, y2);
        // set color of the line
        ctx_var.strokeStyle = stroke;
        // set line Widht 
        ctx_var.lineWidth = width;
        // add a stroke() method of the line to the end function 
        ctx_var.stroke();
      }
      let canvas_var = document.getElementById('canvas_data'),
          ctx_var = canvas_var.getContext('2d');
      drawLine_function(ctx_var, 10, 100, 350, 300, 'Aqua', 4, 20, -50);
      drawLine_function(ctx_var, 10, 100, 600, 10, 'pink', 5, -5, -10);
       drawLine_function(ctx_var, 10, 100, 100, 100, 'yellow', 6, 5, 30);
       drawLine_function(ctx_var, 10, 100, 50, 200, 'orange', 8, 22, -20);
</script>
</body>
</html> 

Output

The image shows multiple lines with different widths and coordination on the canvas.

Conclusion

The translate method shows the particular shapes and format using the different x and y ordinations input data. It helps in the maps, graphs, and other 2d structures.

Next TopicJavascript filereader

← prev next →