var N = 1000

const dim = {

    width: 1024,

    height: 768

}

var ctxs = []

const SZ = 4

const SZ2 = 2 * SZ

const TWO_PI = 2 * Math.PI

​

for (let i = 0; i < 6; i++) {

    const canvas = document.createElement("canvas")

    Object.assign(canvas, dim)

    ctxs.push(canvas.getContext("2d"))

}

​

function randXY() {

    const x = dim.width * Math.random()|0

    const y = dim.height * Math.random()|0

    return [x, y]

}

​

/*

 * Square stuff

 */

function drawSquare() {

    ctxs[0].rect(...randXY(), SZ2, SZ2)

}

​

const buffer = document.createElement("canvas")

buffer.width = SZ2

buffer.height = 2 * SZ2

const bufferCtx = buffer.getContext("2d")

bufferCtx.fillRect(0, 0, SZ2, SZ2)

​

function drawImageSquare() {

    ctxs[1].drawImage(buffer, 0, 0, SZ2, SZ2, ...randXY(), SZ2, SZ2)

}

​

const imageDataSquare = bufferCtx.getImageData(0, 0, SZ2, SZ2)

function putImageDataSquare() {

    ctxs[2].putImageData(imageDataSquare, ...randXY())

}

​

/*

 * Circle stuff

 */

function drawCircle() {

    const ctx = ctxs[3]

    ctx.arc(...randXY(), SZ, 0, TWO_PI)

    ctx.closePath()

}

​

// draw a circle onto the buffer, below the square

bufferCtx.beginPath()

bufferCtx.arc(SZ2, 1.5*SZ2, SZ, 0, TWO_PI)

bufferCtx.closePath()

bufferCtx.fill()

​

function drawImageCircle() {

    ctxs[4].drawImage(buffer, 0, SZ2, SZ2, SZ2, ...randXY(), SZ2, SZ2)

}

​

const imageDataCircle = bufferCtx.getImageData(0, SZ2, SZ2, SZ2)

function putImageDataCircle() {

    ctxs[5].putImageData(imageDataCircle, ...randXY())

}

​

​

function doMany(func) {

    for (let i = 0; i < N; i++) {

        func()

    }

}