Clip by mask defined by pixel image or prevent drawing outside of that mask

Question

I'm two days into js,html and css programming. So very newbie!

Following and building upon this TUTORIAL

Q1: How can I add this male into the background (see figuere 1.) and prohibit any strokes outside of the borders?

Adding image to background was no biggy!

function make_base()

    {
      base_image = new Image();
      base_image.src = 'img/bmapFront.gif';
       base_image.onload = function(){
        context.drawImage(base_image, 0,0);
      }
    }

There is a context.clip function, not sure if I can use pixel form as clipping path. Making tons of "image substractions" isn't the best way. Any suggestions

Edit:

Did the Job for me: VeryHelpful

var frontPath = new Path2D ("M 133.41,17.00  C 141.37,2.41 160.66, !VERY LONG! ")
context.clip(frontPath);

Messy strokes!

He should look like this. Then I want to save him.

Canvas has clipping ... Create a path from your man and then call `context.clip()` to cause drawings to display only inside that clipping region. You could also use [compositing](http://stackoverflow.com/documentation/html5-canvas/5547/compositing#t=201702131956041367534) to cause all your new drawings to display only inside your man. — markE, Feb 13 '17 at 19:53
i did exactly that. it was the fastest and easiest solution for me. I turned the selection of gimp into svg path. — Andre Elrico, Feb 14 '17 at 13:38

score 1 · Accepted Answer · answered Feb 13 '17 at 20:53

Although there is such a thing as ctx.clip(), this is sometimes not what's wanted as it's impractical to use a path.

The solution that I like involves creating a virtual empty canvas onto which you draw your pixel image. Through various manipulations, like using ctx.getImageData and similar to make sure you only get one kind of color or apply other filters only once, you can obtain an image that seems to be empty (alpha of 0, mostly) in the places where you want to clip other images or paths out.

At that point, you'd use ctx.globalCompositeOperation = 'source-atop', or pick another one you might want to use from mdn's list of globalCompositeOperations.

At this point, you can just draw this virtual canvas image onto the main canvas

Clip by mask defined by pixel image or prevent drawing outside of that mask

Edit:

1 Answers1