KonvaJS: HTML in a Text object

Asked 11/9, 2015 at 6:37 Answered 23/2, 2016 at 15:34

Solved javascript canvas html5-canvas kineticjs konvajs

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!

Busty answered 11/9, 2015 at 6:37 Comment(1)

I have voted up to encourage you to ask good question such as this one, and to upload images :) – Gladden 23/2, 2016 at 13:0

Actually you can load many icons from font-awesome, and make beautiful web apps:

window.onload = function () {
var stage = new Konva.Stage({
      container: 'container',
      width: 1000,
      height: 1000
    });

    var layer = new Konva.Layer();

    var simpleText = new Konva.Text({
      x: stage.getWidth() / 10,
      y: 15,
      text: "\uf21c",
      fontSize: 300,
      fontFamily: 'FontAwesome',
      fill: 'green'
    });
  layer.add(simpleText);
  stage.add(layer);
  
}

  @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>
<html>
<head>
  <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>
<body>
  <div id="container" style="font-family:'FontAwesome'">dummyText</div>
</body>
</html>

here is a reference for the solution https://mcmap.net/q/246189/-preload-font-html5-js-kinetic-js

Gladden answered 23/2, 2016 at 15:34 Comment(0)

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.

Doughty answered 11/9, 2015 at 15:27 Comment(0)

Recommended topics

Hot tags