Edge Detect & Art

by Tushar Thakare

HTML

<script src="https://www.marvinj.org/releases/marvinj-0.7.js"></script>
<canvas id="canvas" width="500" height="344"></canvas>

JavaScript

var canvas = document.getElementById("canvas");

image = new MarvinImage();
image.load("https://media.istockphoto.com/photos/cheerful-teen-boy-with-backpack-taking-selfie-outside-picture-id872231674?k=6&m=872231674&s=612x612&w=0&h=7qvFx18SNFp2ux1E8ZkFvAoBqDwi7yNV5f9qQcwEPR0=", imageLoaded);

function imageLoaded(){
  var imageOut = new MarvinImage(image.getWidth(), image.getHeight());
  
  // Edge Detection (Prewitt approach)
  Marvin.prewitt(image, imageOut);
  // Invert color
  // Threshold
  imageOut.draw(canvas); 
}