Jump to content

canvas font rendering


Recommended Posts

Hi

 

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?

 

https://www.w3schools.com/Tags/canvas_font.asp

 

Link to post
Share on other sites
  • Moderators

yep

if you google 'canvas font shadow' or 'canvas font effects' you'll get plenty of links to what effects you can achieve with text on canvas. All of these are doable in SMS.

To get really out there, have a look at blotter.js - a library which allows you to create amazing text on canvas effects

https://codepen.io/RMKNGY/pen/bKJxvd

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?

Link to post
Share on other sites
  • Moderators

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

 

 

 

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...