JSFiddle - React, Tailwind, and code Playground

JavaScript

var C = function (w, h) {
    var canvas = document.createElement('canvas');
    canvas.width  = w;
    canvas.height = h;
    canvas.ctx    = canvas.getContext('2d');
    return canvas;
};

var Gradient = function (canvas) {
    canvas.ctx.save();
    var gradient = canvas.ctx.createLinearGradient(
        0, 0, canvas.width, canvas.height
    );
    gradient.addColorStop(0.0, 'red');
    gradient.addColorStop(0.5, 'green');
    gradient.addColorStop(1.0, 'blue');
    canvas.ctx.fillStyle = gradient;
    canvas.ctx.fillRect(0, 0, canvas.width, canvas.height);
    canvas.ctx.restore();
    return canvas;
};

var Buffer = function (canvas, buffer) {
    canvas.ctx.drawImage( buffer, 0, 0 );
    return canvas;
};

var PutData = function (canvas, data) {
    canvas.ctx.putImageData( data, 0, 0 );
    return canvas;
};

var times = 10000, i, size = 64, canvas = C(size, size);

setTimeout(function () {
    console.time('direct');
    for (i = times; i--;) Gradient( canvas );
    console.timeEnd('direct');
}, 100);

setTimeout(function () {
    console.time('buffer');
    var buffer = Gradient( C(size, size) );
    for (i = times; i--;) Buffer( canvas, buffer );
    console.timeEnd('buffer');
}, 1000);


setTimeout(function () {
    console.time('imageData');
    var data = Gradient( C(size, size) ).ctx.getImageData(0, 0, size, size);
    for (i = times; i--;) PutData( canvas, data );
    console.timeEnd('imageData');
}, 1000);