mozilla
Your Search Results

    CanvasRenderingContext2D.textAlign

    The CanvasRenderingContext2D.textAlign property of the Canvas 2D API specifies the current text alignment being used when drawing text. Beware that the alignment is base on the x value of the CanvasRenderingContext2D.fillText method. So if textAlign="center", then the text would be drawn at x-50%*width.

    Syntax

    ctx.textAlign = "left" || "right" || "center" || "start" || "end";
    

    Options

    Possible values:

    left
    The text is left-aligned.
    right
    The text is right-aligned.
    center
    The text is centered.
    start
    The text is aligned at the normal start of the line (left-aligned for left-to-right locales, right-aligned for right-to-left locales).
    end
    The text is aligned at the normal end of the line (right-aligned for left-to-right locales, left-aligned for right-to-left locales).

    The default value is start.

    Examples

    Using the textAlign property

    This is just a simple code snippet using the textAlign property to set a different text alignment.

    HTML

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

    JavaScript

    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    
    ctx.font = "48px serif";
    ctx.textAlign = "left";
    ctx.strokeText("Hello world", 0, 100);
    

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

    Specifications

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

    Browser compatibility

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

    See also

    Document Tags and Contributors

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