CODEWITHSUNDEEP
javaandroidandroid-canvas
ihucos
ihucos

Reputation: 1861

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 (-:

Upvotes: 6

Views: 8636

Answers (2)

BatmanRealDa
BatmanRealDa

Reputation: 11

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>

Upvotes: 1

Amit Farkash
Amit Farkash

Reputation: 329

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);

Upvotes: 25

Related Questions