Verify two shapes are equal in canvas

i’m about to create small challenge for my team which is similar with challenge honeycomb … Read more Verify two shapes are equal in canvas

i’m about to create small challenge for my team which is similar with challenge honeycomb candy in series Squid Game of Netflix.

The idea is user will use mouse click to make a dot around a shape, then i will use api of canvas context to draw another shape from those dots.
Example:

var canvas = document.body.appendChild(document.createElement("CANVAS")), context = canvas.getContext("2d");

context.beginPath();
  // all points are given as x (from left to right), y (from top to bottom)
  context.moveTo(10, 20); // x = 10 (10 px from the left edge of the canvas), y = 20 (20 px from the top edge of the canvas)
  context.lineTo(100, 97); // x = 100, y = 97
  context.lineTo(50, 105); // x = 50, y = 100

context.stroke();

finally i will compare this shape with the original shape, if they’re same then user win.
anybody know how to compare two shape are same in js? or i need to compare each of dot of two shapes?

Source: JavaSript – Stack Overflow


Categories: NewsTags: ,

Leave a Reply

Your email address will not be published. Required fields are marked *