How to inherit background in a custom canvas in reveal.js slides?

I am trying to replicate what was done on this blog http://vda-lab.github.io/2016/07/interactive-visualizations-in-revealjs-markdown# in terms of using a custom JavaScript file inside reveal.js slides for interactive slides. How can we make the script below inherit the background colour of the reveal.js slides?

var viz_function = function(p) {
   p.setup = function() {
   var myCanvas = p.createCanvas(800,600)
   myCanvas.parent('viz2')
   p.noStroke()
   p.noLoop() 
   }

   p.draw = function() {
      p.background(255,255,255) //Setting this manually will work; but it will not be a generic solution
      p.fill(0,255,0)
      p.ellipse(p.mouseX,p.mouseY,20,20)
    }

   p.mouseMoved = function() {
       p.redraw()
   }
 }
var viz = new p5(viz_function)

One obvious solution is to manually set the background colour. However, that approach will fail if one were to change the theme of reveal.js. What is a more generic way to inherit the background colour from the slide or the theme of reveal.js?

1 answer

  • answered 2018-02-13 02:31 Kevin Workman

    Use the clear() function to clear out old frames without drawing a background with a specific color.

    function setup() { 
      createCanvas(400, 400);
    } 
    
    function draw() { 
      clear();
      ellipse(mouseX, mouseY, 20, 20);
    }
    

    More info can be found in the reference.