Draw difference between p5js rect and canvas API rect

julson

Hey guys! I've been playing with p5js again lately and I'm trying to wrap my head around why using the canvas APIs rect produces a different rectangle from p5js

This code for example:

function setup() {
  createCanvas(300, 300);
  rectMode(CORNERS);
  noLoop();
}

function draw() {
  background(102);
  stroke(0, 0, 0);
  rect(0, 10, 100, 100);

  var c = document.getElementById("defaultCanvas0");
  var ctx = c.getContext('2d');
  ctx.rect(101, 10, 100, 100);
  ctx.stroke();
}

has the p5js rect having a slightly reduced height compared to the canvas API version. Any idea why?

GoToLoop

It is CORNER, not CORNERS, the default mode for rectMode(): #-o
https://p5js.org/reference/#/p5/rectMode

julson

My goodness, so that's where the problem was. How embarrassing. 8-| Thank you!