'Draw text on the top left corner of canvas

how do I write some text (with canvas.drawText?) ont the middle of the screen and on the left top corner? thank you (-:

javaandroidandroid-canvas


Solution 1:[1]

I don't know why the above answer is marked with V when it's simply not correct. Drawing text at (0,0) will draw it off screen since, for some reason, the text is drawn from the bottom up (whereas everything else seem to be drawn from up to bottom).

If you want the top left corner:

paint = new Paint();
paint.setColor(Color.RED);
int fontSize = 20;
paint.setTextSize(fontSize);
Typeface tf = Typeface.create("FONT_NAME", Typeface.BOLD);
paint.setTypeface(tf);
paint.setTextAlign(Align.LEFT);
canvas.drawText("your_text", 0, (0+paint.getTextSize()), paint);

Solution 2:[2]

using the ctx.textBaseline='top' it sets the position to the top then use ctx.textAlign='start' to position it to the left. example: 

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>My Webpage</title>
        <link rel="stylesheet" href="style.css"/>
    </head>

    <body>
        <canvas id="gameCanvas"></canvas>
        <script>
        let canvas = document.getElementById('gameCanvas');
        let ctx = canvas.getContext('2d');
        canvas.height=window.innerHeight;
        canvas.width=window.innerWidth;
        ctx.fillStyle = 'rgb(0,0,0)';
        ctx.font = "15px Arial";
        ctx.textAlign='start';
        ctx.textBaseline='top';
        ctx.fillText("Hello World", 0, 0);
        </script>  
     </body>
</html>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Frenchie
Solution 2 BatmanRealDa

Related Questions