Html5 Canvas: Using Constructor Functions To Create Complex Canvas Shapes

I'm currently working on a HTML5 Canvas project (I wrote a separate question about it here). I think one of the solutions to the problems I am facing would be to create a reference

Solution 1:

It would be better if you use an object with position x, y

var canvas = document.querySelector("canvas");

// returning a drawing context to a variable 'c'// allows you to draw 2d elementsvar c = canvas.getContext("2d");

canvas.width = 1000;
canvas.height = 700;
canvas.style.width = 1000;
canvas.style.height = 700;

var points = [
  { x: 350, y: 200 },
  { x: 900, y: 200 },
  { x: 900, y: 250 },
  { x: 700, y: 250 },
  { x: 600, y: 250 },
  { x: 600, y: 650 }
];

functionPath(startX, startY, array, color) {
  c.beginPath();
  c.moveTo(startX, startY);
  // For however many element pairs in the array, create a lineTo statementfor (var i = 1; i < array.length; i++) {
    c.lineTo(array[i].x, array[i].y);
  }
  c.fillStyle = color;
  c.fill();
}

var blue = newPath(350, 200, points, "#C1EEFF");

<canvas></canvas>

Solution 2:

First issue is your points array: var points = [(350, 200), (900, 200),... that is not a correct bi-dimensional array, maybe you meant: var points = [[350, 200], [900, 200],...

also in your code Path is a function not a class, not sure why you doing new Path(...) maybe you got that mixed with new Path2D() but that is completely different... Look at the parameters for isPointInPath: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/isPointInPath#syntax

Here is a working example

var canvas = document.querySelector('canvas');
var c = canvas.getContext('2d');
canvas.width = 1000;
canvas.height = 700;

// Function to generate a Path2D objectfunctionPath(array) {
  let path = newPath2D();
  path.moveTo(array[0][0], array[0][1]); 
  for (i = 1; i < array.length; i++) {
    path.lineTo(array[i][0], array[i][1]);
  }
  path.lineTo(array[0][0], array[0][1]);
  return path
}

//Create the pathsvar big = [[350,200], [900,200], [900,250], [700,250], [600,250], [600,650], [350,650]];
var blue = Path(big);

var triangle = [[25,10], [70,10], [90,85]];
var red = Path(triangle);

// Draw all the paths
c.beginPath()
c.fillStyle = "blue";
c.fill(blue);

c.beginPath()
c.fillStyle = "red";
c.fill(red);

// use isPointInPathconsole.log(c.isPointInPath(blue, 10, 10))
console.log(c.isPointInPath(blue, 351,201))

<canvas></canvas>

---

Now on the now closed question my suggestion to using isPointInPath is to improve scalability, you had a bunch of hard coded if statement, that approach for more complex polygons just would not do... BUT you still have the problem in your game how to handle the transition between levels, that was the root problem on that question.

Solution 3:

You seem to be trying to access your array coordinates using this syntax array[i][0], array[i][1] however your array is NOT an array of arrays it is an array of parenthesis. I don’t have time to play with it but try making it an array of arrays so you can then access element [0] and [1].

[[350, 200], [400, 250]] etc

EDIT: I am providing an ES6 class to create your maps. This is just another option on top of the others provided here.

const canvas = document.querySelector('canvas');
const c = canvas.getContext('2d');
canvas.width = 1000;
canvas.height = 700;
 
let points = [[300, 400], [400, 400], [400, 350], [400, 250], [700, 250], [700, 150], [750, 150], [750, 50], [775, 50], [775, 175], [725, 175], [725, 400], [500, 400], [500, 500], [500, 650], [300, 650] ];
let points2 = [[750, 50], [775, 50], [775, 100], [750, 100]];

classMap {
  constructor(start_x, start_y, arr, c) {
    this.start_x = start_x;
    this.start_y = start_y;
    this.arr = arr;
    this.color = c;
  }
  draw() {
    c.beginPath();
    c.moveTo(this.start_x, this.start_y); //startthis.arr.forEach(point => c.lineTo(point[0], point[1]));
    c.fillStyle = this.color;
    c.fill();
    c.closePath(); 
  }
}
let map1 = newMap(300, 650, points, 'blue');
let map1Finish = newMap(750, 100, points2, 'red');
map1.draw();
map1Finish.draw();