0

I have a canvas but want to cut out and display only various rectangle sections of this canvas Im not sure if this is possible? I have seen some people clip an image, but can it be done for a canvas.

Essentially i want to draw rectagles, keep the rectangle bits and discard the rest of the canvas

        ctx.save();
        ctx.beginPath();
        ctx.rect(140, 20, 100, 100);
        //ctx.stroke();
        ctx.clip();

       ctx.restore();
2

1 Answer 1

0

I did it like this:

        ctx.beginPath();

        for (var i = 0; i < Rectangles.length; i++) {
            var item = Rectangles[i];



            ctx.moveTo(item.x1 , item.y1 );
            ctx.lineTo(item.x1  + item.width  , item.y1 );
            ctx.lineTo(item.x1  + item.width  , item.y1 + item.height  );
            ctx.lineTo(item.x1 , item.y1 + item.height  );
            ctx.lineTo(item.x1 , item.y1 );


        }
        ctx.closePath();
        ctx.clip();

And run this before the drawing part.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.