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

I am trying to replicate what was done on this blog 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)

   p.draw = function() {
      p.background(255,255,255) //Setting this manually will work; but it will not be a generic solution

   p.mouseMoved = function() {
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() { 
      ellipse(mouseX, mouseY, 20, 20);

    More info can be found in the reference.