Centering Sketch using p5.dom

I am attempting to center a sketch in an html page using the dom library. I have followed the reference (, as well as instructions on GitHub (, but have had no luck. When I run my code I receive the error messages

Uncaught TypeError: Cannot read property 'prototype' of undefined
    at p5.dom.js:71
    at p5.dom.js:34
    at p5.dom.js:35


Uncaught TypeError: myCanvas.position is not a function
    at setup (paint.html:24)
    at p5.<anonymous> (p5.js:9111)
    at p5.<anonymous> (p5.js:9041)
    at new p5 (p5.js:9323)
    at _globalInit (p5.js:5602)

Here is my code (I've included HTML for convenience).

<!DOCTYPE html>
        <script language="javascript" type="text/javascript" src="p5.dom.js"></script>
        <script src="p5.js"></script>
        <script language="javascript" type="text/javascript" src="p5.sound.js"></script>


  var mic;
  var myCanvas;            

  function setup() {
  mic = new p5.AudioIn()
  myCanvas = createCanvas(1000, 600);    
  myCanvas.position(50, 100); //this breaks the code
  img = loadImage('1.jpg');


function draw() {


  if(mouseIsPressed) {
    micLevel = mic.getLevel();
    var c = color('#f99991');
    var v = color('#fdfaee');
    text("do", 500*micLevel+200, 600*micLevel+300);

  else {
  micLevel = mic.getLevel();  
  image(img, 200*micLevel*50, -50*micLevel*50, img.width/2, img.height/2);


I realize that myCanvas.position(50, 100) will not center the sketch but I am testing the function to make sure it works.


  • edited March 2017 Answer ✓

    B/c the other 3rd-party libraries depend on p5.js, we need to load the latter 1st! #-o
    Also consider having your sketch in a separate file. I generally name it: "sketch.js"
    Here's my "index.html" template when I want all those 3 libraries together for 1 "sketch.js": :\">

    <script async src=></script>
    <script defer src=sketch.js></script>
  • Perfect! Thanks for the fix. That makes sense.

Sign In or Register to comment.