A RetroSearch Logo

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Search Query:

Showing content from https://webplatform.github.io/docs/apis/canvas/CanvasRenderingContext2D/translate below:

translate ยท WebPlatform Docs

translate Summary

Modifies the transformation matrix of this context by adding the scaling transformation described by the arguments to the transformation matrix. The arguments represent the scale factors in the horizontal (x) and vertical (y) directions. The factors are multiples.

Method of apis/canvas/CanvasRenderingContext2Dapis/canvas/CanvasRenderingContext2D

Syntax 
var object = object.translate(x, y);
Parameters x
Data-type
String

The value to add to horizontal (or x) coordinates.

y
Data-type
String

The value to add to vertical (or y) coordinates.

Return Value

Returns an object of type DOM NodeDOM Node

Type: HRESULT

If this method succeeds, it returns S_OK. Otherwise, it returns an HRESULT error code.

Examples

This short example translates the drawing matrixes by 50px to the right and 50px to the bottom

ctx.fillStyle = "lime";
ctx.fillRect(0,0,100,100);
ctx.translate(50,50);   
ctx.fillStyle = "rgba(255,0,0,0.5)";
ctx.fillRect(0,0,100,100);

Full example that draws two rects, the second one 50x50px translated.

<!DOCTYPE html>
<html>
<head>
  <title>Canvas Textmetrics</title>
  <script>
    function draw() {
      var canvas = document.getElementById("MyCanvas");
      if (canvas.getContext) {  
        var ctx = canvas.getContext("2d");

        ctx.fillStyle = "lime";
        ctx.fillRect(0,0,100,100);
        ctx.translate(50,50);   
        ctx.fillStyle = "rgba(255,0,0,0.5)";
        ctx.fillRect(0,0,100,100);  

      }
    }
  </script>
</head>
<body onload="draw();">
  <canvas id="MyCanvas" width="400" height="400">This browser or document mode doesn't support canvas</canvas>
</body>
</html>
Notes

The translate method effectively remaps the (0,0) origin on a canvas. You can specify one or both parameters. When you call a canvas method such as lineTo, the translate value is added to the respective x-coordinate and y-coordinate values. translate does not return an error if either value or any derived value is out of the canvas dimensions.

Related specifications
W3C HTML Canvas 2D Specification
W3C Candidate Recommendation
Attributions

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4