Konva.js: use font-weight with Text

phptuts October 24, 2018

You can use font-weight with fontStyle, here is an example:

HTML

<!DOCTYPE html>
<html>
<head>
  <link href="https://fonts.googleapis.com/css?family=Chakra+Petch:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext,thai,vietnamese" rel="stylesheet">
<meta name="description" content="KonvaJS Template">
  <script src="https://cdn.githubraw.com/konvajs/konva/1.4.0/konva.min.js"></script>
  <meta charset="utf-8">
</head>
<body>
  <div class="css">TUTORIALSPOTS.COM</div>
  <div id="container"></div>
</body>
</html>

CSS

body {
  padding: 0;
  margin: 0;
}
.css{
  font-size: 40px;
  font-family: Chakra Petch;
  font-style: italic;
  font-weight: 700;
  margin-left: 50px;
}

JAVASCRIPT

const stage = new Konva.Stage({
  container: 'container',
  width: window.innerWidth,
  height: window.innerHeight
});

const layer = new Konva.Layer();
stage.add(layer);

const text = new Konva.Text({
  x: 50,
  y: 50,
  text: 'TUTORIALSPOTS.COM',
  fontSize: 40,
  fontFamily: 'Chakra Petch',
  fontStyle: 'italic 700'
});
layer.add(text);


layer.add(text.clone({
  y: 150,
  fontStyle: '400'
}))

layer.draw();

You can use

fontStyle: 'italic 700'

or

fontStyle: 'italic bold'

or

fontStyle: 'bold'

or

fontStyle: 'bold italic'

Online demo: https://jsbin.com/jaciyar/edit?html,css,js,output

phptuts

Related Posts

Leave a Reply