p5.js template

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/p5.js/0.3.3/p5.min.js"></script>

<section id="musicscape">
</section>

SASS

body,html
    margin: 0
    padding: 0
    
#musicscape
    position: absolute
    right: 0
    top: 0
    width: 50vw
    height: 100vh
    background-color: red

JavaScript

function setup() {
    // Create canvas
    var parent = document.getElementById("musicscape");
    var canvas = createCanvas(
        parent.offsetWidth,
        parent.offsetHeight) ;
    canvas.id("canvas")
    canvas.parent(parent);

}

function draw() {
    if (mouseIsPressed) {
        fill(0);
    } else {
        fill(255);
    }
    ellipse(mouseX, mouseY, 80, 80);
}