ctx.clearRect() vs canvas.width = canvas.width (v2)

Revision 2 of this benchmark created on

Description

When you want clear a canvas, you use clearRect(). But clearRect() use perf.

When you re-define the width or height, the canvas auto-clear it-self. Maybe its better to use that for perf ? (In animation...)

Preparation HTML

<canvas id="canvas" width="600" height="350">
<script>
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");
  ctx.fillStyle = "white";
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
clearRect direct size
ctx.clearRect(0, 0, 600, 350);
ready
re-define width
canvas.width = canvas.width;
ready
clearRect
ctx.clearRect(0, 0, canvas.width, canvas.height);
ready
add rect
ctx.fillRect(0, 0, 600, 350);
ready

Revisions

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