How to make a hole in a polygon with CreateJs?

Question

As you can see on attached image it has the rhombus with the ellipse inside which is almost transparent.

But this is just an image.

How can I create this with createjs ?

A more detailed description of the problem:

What you see in the picture is not exactly what I need. Ideally, my task is to make two triangles out of this rhombus with an ellipse inside.

The ellipse should create some kind of transparency in the triangle so that all the elements that will be under this triangle are visible through.

My implementation:

I make a triangle according to this example: (thank to this fiddle )

(createjs.Graphics.Polygon = function(x, y, points) {
    this.x = x;
    this.y = y;
    this.points = points;
}).prototype.exec = function(ctx) {
    // Start at the end to simplify loop
    var end = this.points[this.points.length - 1];
    ctx.moveTo(end.x, end.y);
    this.points.forEach(function(point) {
        ctx.lineTo(point.x, point.y);
    });
};
createjs.Graphics.prototype.drawPolygon = function(x, y, args) {
    var points = [];
    if (Array.isArray(args)) {
        args.forEach(function(point) {
            point = Array.isArray(point) ? {x:point[0], y:point[1]} : point;
            points.push(point);
        });
    } else {
        args = Array.prototype.slice.call(arguments).slice(2);
        var px = null;
        args.forEach(function(val) {
            if (px === null) {
                px = val;
            } else {
                points.push({x: px, y: val});
                px = null;
            }
        });
    }
    return this.append(new createjs.Graphics.Polygon(x, y, points));
};


stage = new createjs.Stage("demoCanvas");
poly1 = new createjs.Shape();
poly1.graphics.beginFill("Red").drawPolygon(0,0,10,10,10,40,40,30,60,5,30,0);
poly1.x = 10;
poly1.y = 10;
stage.addChild(poly1);
stage.update();

(if there is a more convenient or even correct way to make a triangle and this will help in solving my problem, I will gladly accept your solution).

Next, I simply overlay the ellipse drawn with drawEllipse on top of this triangle.

I understand that I may be doing something wrong, and that is why I am here.

Any help will be accepted!

Answer 1

I assume you are using the Graphics API to draw your content. If so, you simply need to ensure the "hole" draws with reverse winding . This just means the shape needs to be drawn in the reverse direction.

For example, the Canvas2D rect method draws clockwise, so to subtract from them, the instructions need to be drawn in the other direction.

var s = new createjs.Shape();
s.graphics.beginFill("red")
    .drawRect(0,0,300,300) // Draw a square

    // Then draw a smaller square
    .moveTo(100,100) // Top left
    .lineTo(100,200) // Bottom left
    .lineTo(200,200) // Bottom right
    .lineTo(200,100) // Top right
    .lineTo(100,100) // Top left
    .closePath();    // Optional if you are done

The drawEllipse has an anticlockwise parameter which does the trick as well. Here is a jsfiddle sample , which actually draws it the other way (small cut-out first), but with the same result.

UPDATE

In order for the shape to "cut out" the other one, it has to be part of the same graphics instance, and part of the same path instructions. If you closePath() after any drawing instructions, any new instructions are drawn on top of that without cutting it out. Using separate shape instances does this automatically.

Using the updated code, I added a simple drawEllipse() call using default clockwise winding, and it cut out the circle: https://jsfiddle.net/lannymcnie/yd25h8se/ -- Note that I scaled up the coordinates from above x10 to make it more visible.

Cheers,