CODEWITHSUNDEEP
htmlcanvasmask
Rewind
Rewind

Reputation: 2814

Html5 Canvas - Shading an outside area

I need to shade an OUTSIDE area, ie the shapes I draw in the shader are drawn normally, and their inverse is then shaded. Its easiest to explain with an example, and noting the bit that is not working:

// canvasBackground is the actual background
// canvasBackgroundContext is its context
// To make it simple, I will fill it with green

canvasBackgroundContext.fillStyle = "#00FF00";
canvasBackgroundContext.clearRect(0, 0, canvasBackground.width, canvasBackground.height);

// I also have a the shader
// canvasShader and canvasShaderContext with same width and height as canvasBackground
canvasShaderContext.fillStyle = "rgba(0, 0, 0, 0.25)"; // Black but slightly transparent
canvasShaderContext.clearRect(0, 0, canvasShader.width, canvasShader.height);

// Everything so far is great - now the problem

// This is wrong, because when I create the area I want to create clear, it does not work
// because when you draw a shape it does not work like clearRect, as it does not set each pixel to a clear pixel
canvasShaderContext.fillStyle = "rgba(0, 0, 0, 0.0)";

// Create the only non shaded bits in the shader, overlapping rects
canvasShaderContext.fillRect(10, 10, 50, 50);
canvasShaderContext.fillRect(40, 40, 50, 50);

// So when I do this, it should shade the entire background except for the two 50x50 overlapping rects at 10,10 and 40,40
canvasBackgroundContext.drawImage(canvasShaderContext, 0, 0);

I don't want to go to a pixel by pixel basis using getImageData, as that is slow. There must be some way of doing this.

Upvotes: 0

Views: 397

Answers (1)

user1693593
user1693593

Reputation:

I am not sure I fully understand what you try to achieve, but how about adding a composite mode to this:

canvasShaderContext.fillRect(10, 10, 50, 50);
canvasShaderContext.fillRect(40, 40, 50, 50);

which results in:

/// store old mode whatever that is
var oldMode = canvasShaderContext.globalCompositeOperation;

/// this uses any shape that is drawn next to punch a hole
/// in destination (current context).
canvasShaderContext.globalCompositeOperation = 'destination-out';

/// now draw the holes
canvasShaderContext.fillRect(10, 10, 50, 50);
canvasShaderContext.fillRect(40, 40, 50, 50);

/// set back to old mode
canvasShaderContext.globalCompositeOperation = oldMode;

That will also clear the alpha bits.

Upvotes: 2

Related Questions