canvas setpixel

pixel manipulation of canvas using createImageData and putImageData

HTML

<head>

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>
</head>
<body>
    <canvas id='canvas' width='320' height='320'>
       canvas setpixel
    </canvas>
</body>

CSS

canvas {
    margin: 1em;
    border: 1px solid #dddddd;
}

JavaScript

/* click the canvas */

var element,
    canvas,
    width,
    height,
    red;

black = {
    r: 0,
    g: 0,
    b: 0,
    a: 255
};

// init canvas
element = $('#canvas').get(0);
canvas = element.getContext('2d');
width = element.width;
height = element.height;
canvas.fillStyle = '#eeeeee';
canvas.fillRect(0, 0, width, height);

// setpixel
var setPixel = function (x,y,c) {
    var p=canvas.createImageData(1,1);
    p.data[0]=c.r;
    p.data[1]=c.g;
    p.data[2]=c.b;
    p.data[3]=c.a;
    canvas.putImageData(p,x,y);
}

// square for simplicity
var dim = Math.min(width, height);

var range = _.shuffle(_.range(dim));
var shifts = Array(dim).fill(0).map(_ => Math.floor(Math.random() * dim));
var additions = Array(dim).fill(0).map(_ => Math.floor(Math.random() * dim));
var counters = Array(dim).fill(0);
var i = 0;

var interval = setInterval(function() {	 
    //batching 100 pixels for speed
    for (var iter = 0; iter < 100; iter++) {
      var x = range[i % dim];
      var y = (range[(counters[x] + shifts[x]) % dim] + additions[x]) % dim;
      counters[x]++;

      setPixel(x,y, black);
			i++;
    }
       
    if (i >= dim * dim) {
       clearInterval(interval);
       console.log("done");
    }
}, 0);