Collectives™ on Stack Overflow
Find centralized, trusted content and collaborate around the technologies you use most.
Learn more about Collectives
Teams
Q&A for work
Connect and share knowledge within a single location that is structured and easy to search.
Learn more about Teams
I'm currently looking into KonvaJS to create like a scrap booking app, and i'm trying to display like a bullet list.
I trying to use a Text shape and add html to the text to see if it will render it, but no luck.
Is this even possible? If so, how? If not, what other ways does KonvaJS have to display fancy text, like lists, bold ext...
var text = new Konva.Text({
text: '<div>this is normal text\n\n <b>This is BOLD</b> </div>',
fontSize: 8,
fontFamily: 'Calibri',
fill: '#555',
width: 300,
padding: 20,
align: 'center',
stroke: 'black',
strokeEnabled: false,
strokeWidth: 0
Output:
Sorry, I don`t have enough reputation to post images, but the output text is:
<div>this is normal text
<b>This is BOLD</b> </div>
I want it to be something like:
this is normal text
This is BOLD
Any help appreciated, thanks!
–
@font-face {
font-family: 'FontAwesome';
src: url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/fonts/fontawesome-webfont.ttf');
font-weight: normal;
font-style: normal;
<!DOCTYPE html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css"/>
<script src="https://cdn.rawgit.com/konvajs/konva/0.11.1/konva.min.js"></script>
<title>JS Bin</title>
</head>
<div id="container" style="font-family:'FontAwesome'">dummyText</div>
</body>
</html>
Konva can't draw html into canvas. You may use different style options for text such as: fontFamily, fontSize, fontStyle, fontVariant (see docs).
Or you can convert html data into image (or canvas element) with html2canvas, then draw result via Konva.Image.
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
