html5 canvas overlay cutout workaround in safari -


I am trying to create an overlay which can highlight some parts of the page. To do this, I have figured out the best way to use a canvas to fit on the page, attract the size needs, and draw a rectangular by using this trick:

  ctx .rect (canvas wide, 0, 0 - canvas. Wide, canvas. High);  

I'm not sure that I can explain this well, so it's best to see what I'm trying to do.

It works perfectly in every browser except Safari, is there a way to achieve this effect in Safari?

You can try to fill the entire canvas first, then to exclude the size of the overall mode Use the.

Example:

  ctx.fillStyle = "rgba (0, 0, 0, 0.5)"; Ctx.fillRect (canvas.With, 0, 0 - canvas.wind, canvas.high); // Next size ctx.globalCompositeOperation = A draw rectangle above 'destination-out' will be hole; Ctx.fillStyle = "RGBA (0, 0, 0, 1)"; // Make sure alpha is 100% ctx.beginPath (); Ctx.moveTo (300, 60); Ctx.arc (300, 60, 50, 0, 2 * Math. PI); Ctx.moveTo (500, 160); Ctx.arc (500, 160, 50, 0, 2 * Math. PI); Draw eLIPS (CTX, 103, 23, 100, 30) Draw Ellips (CTX, 503, 23, 100, 30) CTX.Fill (); Ctx.globalCompositeOperation = 'source-over'; // Reset comp 

Alpha (not color) will determine how much the hole will appear .

Hope it helps.


Comments

Popular posts from this blog

import - Python ImportError: No module named wmi -

Editing Python Class in Shell and SQLAlchemy -

c# - MySQL Parameterized Select Query joining tables issue -