store paths vs new ones

Benchmark created by Dane Hansen on April 13, 2017

Preparation HTML

<canvas id="canvas"></canvas>

Setup

var ELEMENT = document.querySelector('canvas')
  var WIDTH = ELEMENT.offsetWidth
  var HEIGHT = ELEMENT.offsetHeight
  var ctx = ELEMENT.getContext('2d')
  var LIMIT = 180
  var OUTER_LIMIT = 10
  var RANDOMS = []
  var PATHS = []
  
  function init() {
  	ELEMENT.width = WIDTH
  	ELEMENT.height = HEIGHT
  
    for (var i = 0; i < LIMIT; i++) {
      for(var j = 0; j < 6; j++) {
        RANDOMS.push(Math.random() * 500)
      }
  
      var path = new Path2D()
      path.moveTo(RANDOMS[i * 6], RANDOMS[i * 6 + 1])
        path.quadraticCurveTo(RANDOMS[i * 6 + 2], RANDOMS[i * 6 + 3], RANDOMS[i * 6 + 4], RANDOMS[i * 6 + 5])
      PATHS.push(path)
    }
  }
  
  function fromNew() {
    for (var i = 0; i < LIMIT; i++) {
      if (i % 2) {
        ctx.strokeStyle = `rgba(0,255,255,0.5)`
      } else {
        ctx.strokeStyle = `rgba(255,0,255,0.5)`
      }
      ctx.beginPath()
      //ctx.moveTo(RANDOMS[i * 6], RANDOMS[i * 6 + 1])
      ctx.moveTo(1, 2)
      //ctx.quadraticCurveTo(RANDOMS[i * 6 + 2], RANDOMS[i * 6 + 3], RANDOMS[i * 6 + 4], RANDOMS[i * 6 + 5])
      ctx.quadraticCurveTo(3, 4, 5, 6)
      ctx.stroke()
    }
  }
  
  function fromStored() {
    for (var i = 0; i < LIMIT; i++) {
      if (i % 2) {
        ctx.strokeStyle = `rgba(0,255,255,0.5)`
      } else {
        ctx.strokeStyle = `rgba(255,0,255,0.5)`
      }
      ctx.setTransform(1, 0, 0, 1, i, i)
      ctx.stroke(PATHS[i])
    }
  }
  
  init()

Test runner

for (var i = 0; i < OUTER_LIMIT; i++) {
  fromNew()
}

for (var i = 0; i < OUTER_LIMIT; i++) {
  fromStored()
}

Revisions

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

• Revision 1: published by Dane Hansen on April 13, 2017