Move rectangles in different directions

Question

I need help with this one, need to move rectangles in different directions

Rectangles have a maximum width and/or height of 90 pixels
Rectangles have a minimum width and/or height of 45 pixels
Spawn points 0 and 3 have an X value of ¼ the canvas width
Spawn points 1 and 2 have an X value of ¾ the canvas width
Spawn points 0 and 1 have a Y value of ¼ the canvas height
Spawn points 2 and 3 have a Y value of ¾ the canvas height

window.onload = function() {
  var canvas = document.getElementById("canvasId")
  var ctx = canvas.getContext("2d")
  var width = canvas.width = window.innerWidth
  var height = canvas.height = window.innerHeight

  var particle = {
    x: 200,
    y: 150,
    r: 90,

    create: function(x, y, r, dx, dy) {
      var obj = Object.create(this)
      obj.x = x
      obj.y = y
      obj.r = r
      obj.dx = dx
      obj.dy = dy
      obj.c = getRandomColor(),
        obj.g = 0.4
      return obj
    },

    move: function() {
      this.x -= this.dx
      this.y -= this.dy

      if (this.x + this.r > width || this.x - this.r < 0) {
        this.dx = this.dx * -1
      }
      if (this.y + this.r > height || this.y - this.r < 0) {
        this.dy = this.dy * -1
      }
    }
  }

  function randomSign() {
    return Math.random() < 0.5 ? -1 : 1
  }

  var p = []
  const numParticles = 1

  for (let i = 0; i < numParticles; i++) {
    p[i] = particle.create(
      width / 2,
      height / 2,
      Math.random() * 25 + 5,
      Math.random() * 15 * 2,
      Math.random() * 15 * -1
    )
  }

  update();

  function random(min, max) {
    return Math.floor(Math.random() * (max - min + 1) + min);
  }

  function update() {
    ctx.clearRect(0, 0, width, height)

    for (let i = 0; i < numParticles; i++) {
      ctx.beginPath()
      //  arc(x, y, radius, startAngle, endAngle, clockwise)
      ctx.rect(p[i].x - 220, p[i].y, p[i].r * 9, 200, 150)
      ctx.rect(p[i].x - 220, p[i].y - 500, p[i].r * 6, 200, 150)
      ctx.rect(p[i].x + 150, p[i].y - 500, p[i].r * 6, 200, 150)
      ctx.rect(p[i].x + 150, p[i].y, p[i].r * 6, 200, 150)

      ctx.fillStyle = p[i].c
      ctx.fill()
      ctx.stroke()
      ctx.closePath()
      p[i].move()
    }
    requestAnimationFrame(update);
  }

  function getRandomColor() {
    var letters = '0123456789ABCDEF';
    var color = '#';
    for (var i = 0; i < 6; i++) {
      color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
  }
}

<canvas id="canvasId"></canvas>

Answer 1

I simplified a lot of your code to just focus on moving objects in different directions.
In your code you have p array, for each of those you draw four rectangles, I'm not sure why you are doing that, seem you should be drawing just one, maybe you can better explain what were you trying to accomplish.

Here is a starting point to move objects in different directions

var canvas = document.getElementById("canvasId")
var ctx = canvas.getContext("2d")

class particle {
  constructor(x, y, dx, dy) {
    this.x = x
    this.y = y
    this.dx = dx
    this.dy = dy
  }

  move() {
    this.x -= this.dx
    this.y -= this.dy

    if (this.x + 20 > canvas.width || this.x < 0) this.dx *= -1
    if (this.y + 20 > canvas.height || this.y < 0) this.dy *= -1
    ctx.beginPath()
    ctx.rect(this.x, this.y, 20, 20)
    ctx.fill()
  }
}

var p = []
p.push(new particle(10, 10, -1, 1.5))
p.push(new particle(50, 50, 1, 2))
p.push(new particle(80, 80, 2, -1))

function update() {
  ctx.clearRect(0, 0, canvas.width, canvas.height)
  p.forEach((e) => { e.move() })
  requestAnimationFrame(update);
}
update();

<canvas id="canvasId" width=160 height=160></canvas>