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 times = 10000, i, canvas = C(64, 64);

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

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