Voronoi Image

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<title>voronoi art - canvas</title>
<style>
html, body {
    width: 100%;
    height: 100%;
    padding: 0px;
    margin: 0px;
}
#processing {
    display: none;
}
#input {
    display: none;
}
#output {
    background-color: #ccc;
}
</style>

</head>

<body>

<canvas id="processing" width="705" height="375"></canvas>
<canvas id="output" width="705" height="375"></canvas>
<script>
!(function(){
    "use strict"
    var width = 705
    var height = 375
        
    console.log(width, height)
    onload = function() {
      draw();
    };
    function draw() {
        
        var canvas = document.querySelector('#processing');
    
        var positions = []
    
        if ( ! canvas || ! canvas.getContext ) { return false; }
        var ctx = canvas.getContext('2d');
        var img = document.querySelector("#input");
          
        ctx.drawImage(img, 0, 0);
        
        
        var imgd = ctx.getImageData(0, 0, width, height);
        var data = imgd.data;
        
        var gray = new Uint8ClampedArray(data.length); 
        var edge = new Uint8ClampedArray(data.length); 
        
        toGray(data, gray); 
    
        positions.push(getEdge(gray, width, height, 4))
        
        ctx.putImageData(imgd, 0, 0);
    
        d3main(positions[0])
    }
    
    function getEdge(gray, width, height, step) {
        var tmp = []
    
        for (var y = 0; y < height - 1; y+=step) {
            for (var x = 0; x < width - 1; x+=step) {
                var i = x + y * width; 	
                var r_i = (x + 1) + y * width; 
                var ex = gray[r_i] - gray[i];
        
                var d_i = x + (y + 1) * width;
                var ey = gray[d_i] - gray[i]; 
        
                var ez = Math.sqrt(ex * ex + ey * ey);
                if (ez * 2 > 12) tmp.push({x:x, y:y})
            }
        }
        
        return tmp
        
    }
    
    
    function d3main(data) {
        var svg = d3.select("svg")
        var canvas = document.querySelector("#output")
        var ctx = canvas.getContext('2d');
    
    
        var voronoi = d3.voronoi()
            .x(function(d){ return d.x } )
            .y(function(d){ return d.y } );
    
        
        var vor	= voronoi(data).polygons()
        console.log(vor)
    
        ctx.clearRect(0, 0, width, height);
        
        ctx.save();
    
        ctx.lineWidth = 1
        ctx.shadowColor = "rgb(0, 0, 0)"
        ctx.shadowOffsetX = 5
        ctx.shadowOffsetY = 5
        ctx.shadowBlur = 5
        
        vor.forEach(function(row){
            ctx.beginPath();        
            row.forEach(function(d,i){
                if (!d) return 
                ctx.lineTo(d[0], d[1])
            })
            ctx.stroke()
            ctx.closePath();
        })
        
         ctx.restore();
         
         
    }
    
    function toGray(rgba, gray) {
        var length = rgba.length;
        var total = 0; 
        for (var i = 0; i < length; i += 4) {
            var g = 0.30 * rgba[i + 0] + 0.59 * rgba[i + 1] + 0.11 * rgba[i + 2];
            gray[i/4] = g;
            total += g;
        }
        return total / (length / 4);
    }

}());

</script>

https://cdnjs.cloudflare.com/ajax/libs/d3/4.1.1/d3.min.js