You can accomplish that using blend modes.
Change the context globalCompositeOperation to screen, and you can get that result. Here's an example:
var canvas = document.getElementById("canvas");var context = canvas.getContext("2d");var image = new Image();image.src = "https://images.blogthings.com/thecolorfulpatterntest/pattern-4.png";image.onload = function() { context.drawImage(image, 0, 0, canvas.width, canvas.height); var blackImage = new Image(); blackImage.src="http://www.printmag.com/wp-content/uploads/Sillitoe-black-white.gif"; blackImage.onload = function(){ context.globalCompositeOperation = "screen"; context.drawImage(blackImage, 0, 0, canvas.width, canvas.height); }};<canvas id="canvas" width="300" height="250"></canvas><hr/><h1>Images used:</h1><img src="https://images.blogthings.com/thecolorfulpatterntest/pattern-4.png"/><img src="http://www.printmag.com/wp-content/uploads/Sillitoe-black-white.gif"/>