CODEWITHSUNDEEP
htmlcsssvgmask
pixelscript
pixelscript

Reputation: 392

Is it possible to mask / crop a html element group dynamically?

Is there a way use javascript, css, canvas or svg to create an animated mask (can be just binary).

The closest I've come is using this:

var data = canvas.toDataURL();
$('#masked').css("-webkit-mask-image","url("+data+")");

But this only works in chrome and safari and is a bit buggy.

Is there a way of using css to draw a really simple triangular mask?

Upvotes: 1

Views: 1556

Answers (1)

Loktar
Loktar

Reputation: 35309

If its going to be dynamic you can do it with canvas, draw the path you want and fill it, by default canvas is transparent, so any of the parts not filled will show the element underneath. However if its going to be a static mask I suggest just using a png.

Live Demo

var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d");

canvas.width = canvas.height = 200;

// make a path for a triangle
ctx.beginPath();  
ctx.moveTo(0,0);
ctx.lineTo(200,0);
ctx.lineTo(200,200);
ctx.lineTo(100,50);
ctx.lineTo(0,200);
ctx.lineTo(0,0);
ctx.fill();

Upvotes: 2

Related Questions