Run results for: Test sin computing

Run details:

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.6; rv:48.0) Gecko/20100101 Firefox/48.0

Browser: Firefox 48

Operating system: Mac OS X 10.6

Device Platform: Desktop

Date tested: one year ago

Test name	Executions per second
Math	1827.2 Ops/sec
cache	926.3 Ops/sec
With rotate	635.2 Ops/sec

HTML Preparation code:

<canvas id="myCanvas" width="400" height="400" style="border:1px solid #000;"></canvas>

Script Preparation code:

canvas = document.getElementById('myCanvas');
context = canvas.getContext('2d');

centerX = canvas.width / 2;
centerY = canvas.height / 2;
radius = 100; // Adjust this value to change the size of the circle

numLines = 60;

angleIncrement = (2 * Math.PI) / numLines;

cos={}
sin={}

  for (let i = 0; i < 60; i++) {
    var angle = i * angleIncrement;
    cos[angle] = Math.cos(angle);
    sin[angle] = Math.sin(angle);
  }

Tests:

Math
for (var i = 0; i < numLines; i++) { var angle = i*angleIncrement var x1 = centerX + radius * Math.cos(angle); var y1 = centerY + radius * Math.sin(angle); var x2 = centerX + (radius -10) * Math.cos(angle); var y2 = centerY + (radius -10) * Math.sin(angle); context.beginPath(); context.moveTo(x1, y1); context.lineTo(x2, y2); context.stroke(); }
cache
for (var i = 0; i < numLines; i++) { var angle = i*angleIncrement var x1 = centerX + radius * cos[angle]; var y1 = centerY + radius * sin[angle]; var x2 = centerX + (radius -10) * cos[angle]; var y2 = centerY + (radius -10) * sin[angle]; context.beginPath(); context.moveTo(x1, y1); context.lineTo(x2, y2); context.stroke(); }
With rotate
for (var i = 0; i < numLines; i++) { var angle = i*angleIncrement // Save the current canvas state context.save(); // Rotate the canvas context.translate(centerX, centerY); context.rotate(angle); // Draw the line from the center to the point on the circle context.beginPath(); context.moveTo(radius, 0); context.lineTo(radius - 10, 0); context.stroke(); // Restore the canvas state for the next iteration context.restore(); }

Run results for: Test sin computing

Math

cache

With rotate