Ishihara generator

by PhilQ

HTML

<canvas id="myCanvas1" width="400" height="400" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<br/>Dots:<br/>
<canvas id="myCanvas2" width="400" height="400" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<br/>Test:<br/>
<canvas id="myCanvas3" width="400" height="400" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

SCSS

* {
  margin:0px;
  padding:0px;
  box-sizing:border-box;
}

JavaScript

// Settings
var PIXEL_RATIO = window.devicePixelRatio || 1;
/*
var max_width  = (window.innerWidth-10)  * PIXEL_RATIO;
var max_height = (window.innerHeight-10) * PIXEL_RATIO;
ctx.canvas.style.width  = (window.innerWidth-10)  + 'px'
ctx.canvas.style.height = (window.innerHeight-10) + 'px'
ctx.canvas.width  = max_width;
ctx.canvas.height = max_height;
*/

var max_width = 400 * PIXEL_RATIO,
	  max_height = 400 * PIXEL_RATIO;
//var size = Math.floor(Math.max(max_width,max_height)/2),
var size = Math.floor(Math.min(max_width,max_height)/2);
var min_radius = 4,
    max_radius = size / 15,
    margin = 2,
    goal_average = 1.0,
    retries = 2000,
    colors = ['#89B270', '#7AA45E', '#B6C674', '#7AA45E', '#B6C674',  '#F49427', '#C9785D', '#E88C6A', '#F1B081'];

// Draw dots canvas
    var c2 = document.createElement('canvas'); //document.getElementById("myCanvas2");
    var ctx2 = c2.getContext('2d');
    ctx2.canvas.width = max_width;
    ctx2.canvas.height = max_height;
    ctx2.clearRect(0,0,max_width,max_height);
    ctx2.fillStyle = "#000";
  
// Draw test canvas
    var c3 = document.createElement('canvas'); //document.getElementById("myCanvas3");
    var ctx3 = c3.getContext('2d');
    ctx3.canvas.width = max_width;
    ctx3.canvas.height = max_height;
    
    


function drawDot(x,y,radius,draw_overlapped) {
    var minx = Math.max(0,x-radius-margin*2),
        maxx = Math.min(max_width,x+radius+margin*2),
        miny = Math.max(0,y-radius-margin*2),
        maxy = Math.min(max_height,y+radius+margin*2);
        
    // Clear test canvas
        ctx3.clearRect(0,0,max_width,max_height);
        //ctx3.clearRect(minx,miny,maxx,maxy);
    // Draw dots
        ctx3.globalCompositeOperation="source-over";
        //ctx3.putImageData(ctx2.getImageData(0,0,max_width,max_height),0,0);
        ctx3.putImageData(ctx2.getImageData(minx,miny,maxx-minx,maxy-miny),minx,miny);
    // Draw new dot
        ctx3.globalCompositeOperation="source-in";
        ctx3.beginPath();
...