Thanks for the reply!

although using restore seems to cut performance to an unworkable level, even when using only 2 sprites, the blending options might be just what i need.

No I haven't, I'll do that right now.

EDIT: I don't see how this helps, but I should be able to replicate my code in webgl which may allow me to do this per image instead of canvas wide.

Do you have a code snippet to show? Hard to offer suggestions without it. Except that you need to restrict clipping to the current light sprite obviously.

This is exactly what I want to do.

Right now I draw a path in with the canvas context element, then simply clip();

//for each object type

for (i = 0, leni = this.type.obstacleTypes.length; i < leni; i++)

{

    //for each instance

    instances = this.type.obstacleTypes.instances;

    for (j = 0, lenj = instances.length; j < lenj; j++)

    {

     rinst = instances[j];

     //if overlapping

     if (runtime.testOverlap(this, rinst)){

//have to draw the path around the object first (set it to the viewsize, because if they overlap, it basicly cuts every light according to 1)

            ctx.beginPath();

            ctx.lineTo(0, 0);

            ctx.lineTo(0, myy + runtime.height + this.height);

            ctx.lineTo(myx + runtime.width + this.width, myy + runtime.height + this.height);

            ctx.lineTo(myx + runtime.width + this.width, 0);

            ctx.lineTo(0,0);

//Draw a path that needs to be cut out of the image

//this part has a lot of conditional lineTo(); which is omitted

            ctx.moveTo(endpoint.x, endpoint.y);

            ctx.lineTo(imgp1X, imgp1Y);

            ctx.lineTo(imgp0X, imgp0Y);

            ctx.lineTo(endpoint.x, endpoint.y);

            ctx.closePath();

            ctx.clip();

// after this it draws the image

                                        }

                    }

              ?}              

You cannot implement a lighting system by clipping for this exact reason. You need to render each light separately with additive blending.

How would I go about doing this? is there a way to manipulate the cur_image, or even in webgl?

I would like to be able to specify a region that will not be rendered.

Hey there!

I am currently developing a 2D lighting system in javascript for canvas2D.

The goal is to create an identical thing for webgl as soon as it properly works.

I've gotten as far as to have a light working perfectly, except when adding more than 1 light gives a problem.

The system works by drawing a sprite (yes I copied the Sprite plugin, it was the fastest way) and clipping away where shadow should be.

but when using more than 1 light, the cliping path subtracts when overlapping

Works Fine:

<img src="http://s17.postimg.org/cyqxmq1rj/works_fine.png" border="0" />

Subtracting paths:

<img src="http://s13.postimg.org/4zx3hs15j/problem.png" border="0" />

Wouldn't it be ideal to inherit from the official plugins?

Don't know how this is handled in javascript though.

Platform template in construct 2 as source

Steps to reproduce:

1. walk up slope

2. press jump

Observed result:

character doesn't jump

Expected result:

jump

Browsers affected:

Chrome: yes

Firefox: yes

Internet Explorer: yes

Operating system & service pack:

Windows 7 SP1

Construct 2 version:

r120