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.