Skip to content

Instantly share code, notes, and snippets.

@skrat
Created February 25, 2015 14:03
Show Gist options
  • Save skrat/f1d61417121d1bfc8414 to your computer and use it in GitHub Desktop.
Save skrat/f1d61417121d1bfc8414 to your computer and use it in GitHub Desktop.
function start(){
// save the context state
ctx.save();
// draw the overlay
ctx.drawImage(overlay,150,35);
// change composite mode to source-in
// any new drawing will only overwrite existing pixels
ctx.globalCompositeOperation="source-in";
// draw a purple rectangle the size of the canvas
// Only the overlay will become purple
ctx.fillStyle=newColor;
ctx.fillRect(0,0,canvas.width,canvas.height);
// change the composite mode to destination-atop
// any new drawing will not overwrite any existing pixels
ctx.globalCompositeOperation="destination-atop";
// draw the full logo
// This will NOT overwrite any existing purple overlay pixels
ctx.drawImage(logo,150,35);
// draw the truck
// This will NOT replace any existing pixels
// The purple overlay will not be overwritten
// The blue logo will not be overwritten
ctx.drawImage(truck,0,0);
// restore the context to it's original state
ctx.restore();
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment