1

I am new to reveal.js and have tried to include a konva.js 2D drawing to my slides. I modified the provided sample codes of anything plugin explaining how to include d3.js charts in slides to do that, but my work failed and nothing showed up in the expected convas element. I tried to repeat that work for chart.js charts and everything was fine. can anyone help me?

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

        <title>reveal.js</title>

        <link rel="stylesheet" href="dist/reset.css">
        <link rel="stylesheet" href="dist/reveal.css">
        <link rel="stylesheet" href="dist/theme/white.css">

        <!-- Theme used for syntax highlighted code -->
        <link rel="stylesheet" href="plugin/highlight/monokai.css">
    </head>
    <body>
        <div class="reveal">
            <div class="slides">
                <section>Slide 1
                <div class="konva stretch" id="konva">
<!--
{
"initialize": "function(container) {
      var width = container.innerWidth;
      var height = container.innerHeight;

      container.stage = new Konva.Stage({
        container: container.id,
        width: width,
        height: height,
      });
      

      var layer = new Konva.Layer();

      var rect2 = new Konva.Rect({
        x: 10,
        y: 10,
        width: 300,
        height: 20,
        shadowBlur: 10,
        cornerRadius: 10,
        fillLinearGradientStartPoint: { x: -50, y: -20 },
        fillLinearGradientEndPoint: { x: -50, y: 20 },
        fillLinearGradientColorStops: [0, 'red', 1, 'yellow'],
      });
      layer.add(rect2);
      container.stage.add(layer);
  
 }"
}
-->
                </id>
                </section>
                <section>Slide 2</section>
            </div>
        </div>

        <script src="dist/reveal.js"></script>
        <script src="plugin/notes/notes.js"></script>
        <script src="plugin/markdown/markdown.js"></script>
        <script src="plugin/highlight/highlight.js"></script>
        <script src="plugin/anything/plugin.js"></script>
        <script src="https://unpkg.com/konva@8.3.5/konva.min.js"></script>
        <script>
            // More info about initialization & config:
            // - https://revealjs.com/initialization/
            // - https://revealjs.com/config/
            Reveal.initialize({
                hash: true,

                // Learn about plugins: https://revealjs.com/plugins/
                plugins: [ RevealMarkdown, RevealHighlight, RevealNotes ],
                anything: [
                 {
                    className: "konva",  
                    initialize: (function(container, options){ if (options && options.initialize) { options.initialize(container)} })
                 },
                 // ...
                ],
                plugins: [ RevealAnything ],
            });
        </script>
    </body>
</html>

Edit: I have realized that the DOM element I had used was a canvas but konva only accepts div. Now in chrome's inspect, I can see that the container is affected by the Konvajs but still nothing is shown up.

user3329035
  • 93
  • 7

1 Answers1

1

The problem was the width and height of the div container that was zero. Changing

var width = container.innerWidth;
var height = container.innerHeight;

to something like:

var width = 400;
var height = 400;

solved the problem

user3329035
  • 93
  • 7