JSFiddle - React, Tailwind, and code Playground

by Paul Esch-Laurent

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://rawgit.com/jaysalvat/jquery.facedetection/master/dist/jquery.facedetection.min.js"></script>
<canvas id="canvas"></canvas>

JavaScript

var HEIGHT = 800;
var WIDTH  = 600;

var canvas = document.getElementById("canvas");
canvas.height = HEIGHT;
canvas.width  = WIDTH;
var ctx = canvas.getContext("2d");

var bgImg = new Image();
bgImg.height = HEIGHT;
bgImg.width  = WIDTH;
bgImg.src = "http://www.planwallpaper.com/static/images/colorful-triangles-background_yB0qTG6.jpg";

var fgImg = new Image();
bgImg.height = HEIGHT;
bgImg.width  = WIDTH;
fgImg.src = "https://pmcmovieline.files.wordpress.com/2011/02/nicolas-cage.jpg?w=630";

ctx.drawImage(bgImg, 0, 0);
ctx.drawImage(fgImg, 50, 50);

$("#canvas").faceDetection({
	complete: function (faces) {
		console.log(faces);
	},
	error: function(code, message) {
		console.log("Error : " + message);
	}
});