Canvasfills

Benchmark created by Tom Scheper on

Preparation HTML

<canvas id='canvas' style='width: 1000px; height: 1000px;'></canvas>

Setup

const canvas = document.createElement('canvas')
  const w=1000
  const h=1000
  canvas.width=w
  canvas.height=h
  const rnd = n => Math.random()*n
  const irnd = n => Math.floor( rnd(n))
  const ctx = canvas.getContext("2d")
  ctx.clearRect(0,0,w,h)

Test runner

Ready to run.

Testing in
TestOps/sec
fillRect with integer coordinates
ctx.fillRect( irnd(w/2), irnd(h/2), irnd(w/2), irnd(h/2))
ready
fillRect with float coordinates
ctx.fillRect( rnd(w/2), rnd(h/2), rnd(w/2), rnd(h/2))
ready
fillRect with random 'rgb()' colours
ctx.fillStyle=`rgb(${irnd(255)},${irnd(255)},${irnd(255)})`
ctx.fillRect( irnd(w/2), irnd(h/2), irnd(w/2), irnd(h/2))
ready
fillRect with random 'hsl()' colours
ctx.fillStyle=`hsl(${irnd(360)},${irnd(100)}%,${irnd(100)}%)`
ctx.fillRect( irnd(w/2), irnd(h/2), irnd(w/2), irnd(h/2))
ready
fillRect with random hsla colours
ctx.fillStyle=`hsla(${irnd(360)},${irnd(100)}%,${irnd(100)}%,${rnd(1)})`
ctx.fillRect( irnd(w/2), irnd(h/2), irnd(w/2), irnd(h/2))
ready
fillRect with random rgba() colours
ctx.fillStyle=`rgba(${irnd(255)},${irnd(255)},${irnd(255)},${rnd(1)})`
ctx.fillRect( irnd(w/2), irnd(h/2), irnd(w/2), irnd(h/2))
ready
Iterated 1x1 fillRect
let xf=irnd(w/2)
let yf=irnd(h/2)
let xt=xf+irnd(w/2)
let yt=yf+irnd(h/2)

for(let x=xf; x<xt; x++) {
  for(let y=yf; y<yt; y++) {
    ctx.fillRect(x, y, 1, 1)
  }
}
ready
Iterated ImageData
const id = ctx.getImageData(0,0,w,h)

let xf=irnd(w/2)
let yf=irnd(h/2)
let xt=xf+irnd(w/2)
let yt=yf+irnd(h/2)

for(let x=xf; x<xt; x++) {
  for(let y=yf; y<yt; y++) {
    const pos = (x+y*w)*4
    id.data[pos] = irnd(255)
    id.data[pos+1] = irnd(255)
    id.data[pos+2] = irnd(255)
  }
}

ctx.putImageData( id, 0, 0)
ready
x
x
ready
x
x
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.

  • Revision 1: published by Tom Scheper on