center canvas

This sketch shows how to center a canvas within a .html document.

sketch.js

/**
 * This is not important
 * take a look into the .css
 */

var w = 0;
function setup(){
var canvas = createCanvas(400,300);
canvas.parent('sketch');
   w= random(width/4,width/2);
  noStroke();
}

function draw(){
  background(40);
  for(var i = 0;  i < 100;i++){
  var r1 = random(-10,10);
  var r2 = random(-10,10);
  fill(220,10);
  ellipse((width/2) + r1,(height/2) + r2,w,w);

  }

}

style.css

/*shows how to center a div in its container*/
canvas {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 50%;
  height: 50%;
  padding: 20px;
  text-align: center;
}

index.html

<!doctype html>
<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>center</title>
    <meta name="description" content="something">
    <meta name="author" content="me">
    <link rel="stylesheet" type="text/css" href="styles.css">
    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
  </head>
  <body>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.19/p5.min.js"></script>
    <script type="text/javascript" src="sketch.js"></script>
    <div id="sketch"></div>
    </body>
  </html>