Jump to content
Sign in to follow this  

canvas font rendering

Recommended Posts



I am trying to understand what my options are when I textout to canvas.


LBitmap.Canvas.Context.DC.font := 'bold 24px  verdana ';

When I google I get lots of results for CSS but that is presumably not quite the same as above. I am looking to understand what this type of definition is referred to.


Why because I would like to  render with a text-shadow or blur or some other nice effect. I am struggling with some basic gaps in understanding.


Is this referred to context.font?




Share this post

Link to post
Share on other sites

The bit that I don't follow is how do I go from say this


function drawStroked(text, x, y) {
    ctx.font = "80px Sans-serif"
    ctx.strokeStyle = 'black';
    ctx.lineWidth = 8;
    ctx.strokeText(text, x, y);
    ctx.fillStyle = 'white';
    ctx.fillText(text, x, y);

drawStroked("37°", 50, 150);

to this

LBitmap.Canvas.Context.DC.font := 'bold 24px  verdana ';


where can I find out what "'bold 24px  verdana '; " can be replaced with?

Share this post

Link to post
Share on other sites

the canvas font property is the same as the css font property : it is a shorthand form for specifying 'font-family', 'font-size', 'font-style', 'font-variant' and 'font-weight' in 1 statement.

so "font: bold 24px  verdana" specifies font-weight, font-size and font-family.

all possible font attribute values at https://developer.mozilla.org/en-US/docs/Web/CSS/font   and  .../font-family




Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this