mozilla
Your Search Results

    CanvasRenderingContext2D.scale()

    The CanvasRenderingContext2D.scale() method of the Canvas 2D API adds a scaling transformation to the canvas units by x horizontally and by y vertically.

    By default, one unit on the canvas is exactly one pixel. If we apply, for instance, a scaling factor of 0.5, the resulting unit would become 0.5 pixels and so shapes would be drawn at half size. In a similar way setting the scaling factor to 2.0 would increase the unit size and one unit now becomes two pixels. This results in shapes being drawn twice as large.

    Syntax

    void ctx.scale(x, y);
    

    Parameters

    x
    Scaling factor in the horizontal direction.
    y
    Scaling factor in the vertical direction.

    Examples

    Using the scale method

    This is just a simple code snippet which uses the scale method.

    HTML

    <canvas id="canvas"></canvas>
    

    JavaScript

    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    
    ctx.scale(10, 3);
    ctx.fillRect(10,10,10,10);
    
    // reset current transformation matrix to the identity matrix
    ctx.setTransform(1, 0, 0, 1, 0, 0);
    

    Edit the code below and see your changes update live in the canvas:

    Playable code
    <canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
    <div class="playable-buttons">
      <input id="edit" type="button" value="Edit" />
      <input id="reset" type="button" value="Reset" />
    </div>
    <textarea id="code" class="playable-code">
    ctx.scale(10, 3);
    ctx.fillRect(10,10,10,10);
    ctx.setTransform(1, 0, 0, 1, 0, 0);</textarea>
    
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    var textarea = document.getElementById("code");
    var reset = document.getElementById("reset");
    var edit = document.getElementById("edit");
    var code = textarea.value;
    
    function drawCanvas() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      eval(textarea.value);
    }
    
    reset.addEventListener("click", function() {
      textarea.value = code;
      drawCanvas();
    });
    
    edit.addEventListener("click", function() {
      textarea.focus();
    })
    
    textarea.addEventListener("input", drawCanvas);
    window.addEventListener("load", drawCanvas);
    

    Using scale to flip horizontally or vertically

    You can use ctx.scale(-1, 1) to flip the context horizontally and ctx.scale(1, -1) to flip it vertically.

    Playable code2
    <canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
    <div class="playable-buttons">
      <input id="edit" type="button" value="Edit" />
      <input id="reset" type="button" value="Reset" />
    </div>
    <textarea id="code" class="playable-code">
    ctx.scale(-1, 1);
    ctx.font = "48px serif";
    ctx.fillText("Hello world!", -320, 120);
    ctx.setTransform(1, 0, 0, 1, 0, 0);</textarea>
    
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    var textarea = document.getElementById("code");
    var reset = document.getElementById("reset");
    var edit = document.getElementById("edit");
    var code = textarea.value;
    
    function drawCanvas() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      eval(textarea.value);
    }
    
    reset.addEventListener("click", function() {
      textarea.value = code;
      drawCanvas();
    });
    
    edit.addEventListener("click", function() {
      textarea.focus();
    })
    
    textarea.addEventListener("input", drawCanvas);
    window.addEventListener("load", drawCanvas);
    

    Specifications

    Specification Status Comment
    WHATWG HTML Living Standard
    The definition of 'CanvasRenderingContext2D.scale' in that specification.
    Living Standard  

    Browser compatibility

    Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
    Basic support (Yes) (Yes) (Yes) (Yes) (Yes)
    Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
    Basic support (Yes) (Yes) (Yes) (Yes) (Yes) (Yes)

    See also

    Document Tags and Contributors

    Contributors to this page: fscholz
    Last updated by: fscholz,
    Hide Sidebar