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/scale below:

scale ยท WebPlatform Docs

scale Summary

Adds the scaling transformation described by the arguments to the transformation matrix. The x argument represents the scale factor in the horizontal direction; the y argument represents the scale factor in the vertical direction. The factors are multiples.

Method of apis/canvas/CanvasRenderingContext2Dapis/canvas/CanvasRenderingContext2D

Syntax 
var object = object.scale(x, y);
Parameters x
Data-type
Number

The horizontal scaling factor, where 1 equals unity or 100% scale.

y
Data-type
Number

The vertical scaling factor.

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 basic example draws two rects, the second scaled 1.5 times

ctx.fillStyle = "lime";
ctx.fillRect(0,0,100,100);
ctx.scale(1.5, 1.5);    
ctx.fillStyle = "rgba(255,0,0,0.5)";
ctx.fillRect(25,25,100,100);

This full example draws two rects, the second scaled 1.5 times

<!DOCTYPE html>
<html>
<head>
  <title>Canvas Example</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.scale(1.5, 1.5);    
        ctx.fillStyle = "rgba(255,0,0,0.5)";
        ctx.fillRect(25,25,100,100);    

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

When you create a CanvasRenderingContext2D object, it has a transformation matrix that identifies the current state. The scale method modifies the transformation by multiplying the matrix by the specified factor.

For example, context.scale(1,.5) halves the vertical (or y-axis) values that are used in context and leaves the horizontal (or x-axis) values the same. Similarly, context.scale(2,2) doubles the size of the graphics.

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