CODEWITHSUNDEEP
javascriptcsshtmlcanvas
JasperTack
JasperTack

Reputation: 4447

html5 canvas wrong dimensions of rotated text

I am trying to visualize text on a canvas vertically (45° counter-clockwise rotated). I know that this is possible with the html5 canvas, so this is what I wrote:

function drawText(canvas, text){
    var ctx = canvas.getContext('2d');

    ctx.translate(70, 140);
    ctx.rotate(Math.PI*1.5);

    ctx.fillStyle     = "blue";
    ctx.textBaseline  = "top";

    ctx.fillStyle = "blue";
    ctx.font = '700 55pt Verdana'
    ctx.fillText(text, 10, 20);
}

and the canvas that this is used on has this styles (+ inherrited styles)

canvas.trigger {
        position: relative;
        left: 0;
        width:65;
        height:98;
    }

a.trigger3{
position: absolute;
text-decoration: none;
left: 0;
width:60px;
height:98px;
font-size: 12px;
letter-spacing:0px;
font-family: verdana, helvetica, arial, sans-serif;
color:#fff;
font-weight: 700;
background:#333333;
border:2px solid #444444;
-moz-border-radius-topright: 15px;
-webkit-border-top-right-radius: 15px;
-moz-border-radius-bottomright: 15px;
-webkit-border-bottom-right-radius: 15px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-bottom-left-radius: 0px;
display: block;
z-index:1;
}

The code has this result:

enter image description here

while the final result should be a button (that one with the rounded courners) and the whole text "Details". There are two problems with this code: first of all, when I give a normal size for the ctx.font (e.g. 12pt) the text is too small to read and the second one: when I use a bigger font-size like in this code (55pt) the height of the text is perfect, but it is too long (heigh when you rotated it) so only a part of the text ("Details") is shown.

Does someone see a problem with this code? I think it would be style-related, because when I do the same with no other styles in the Tryit Editor of w3schools the font is perfect.

Upvotes: 2

Views: 1027

Answers (2)

ceprovence
ceprovence

Reputation: 381

I think your problem is being caused by the fact that you're setting the width and height of the canvas through a style sheet, instead of the width/height properties of the canvas element. For some reason setting the canvas width/height through its style sheet causes weird scaling issues.

If you take a look at http://jsfiddle.net/bfzCS/2/, you'll see what I mean. The same code you provided, I just changed it so that it would set the width/height by way of style sheet. Notice how it's all stretched out? I think it has something to do with the fact that the stylesheet width/height actually controls the rendering surface, where as the width/height element properties control the size of the element.

Upvotes: 6

Condiment
Condiment

Reputation: 180

If you specific goal is vertically aligned text, there is a CSS property that could be of help:

p.trigger {
        -webkit-transform: rotate(-90deg);
        -moz-transform: rotate(-90deg);
        filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    }

Upvotes: 0

Related Questions