Preparation code

<canvas id="screen" width="1024" height="768">
</canvas>
<script>
  var context = document.getElementById("screen").getContext("2d");
  var cellBackgroundLeft = document.createElement("img");
  cellBackgroundLeft.src = "http://img201.imageshack.us/img201/2698/cellbackgroundleft.png";

  var cellBackgroundRight = document.createElement("img");
  cellBackgroundRight.src = "http://img194.imageshack.us/img194/156/cellbackgroundright.png";

  var cellBackgroundMiddle = document.createElement("img");
  cellBackgroundMiddle.src = "http://img824.imageshack.us/img824/2954/cellbackgroundmiddle.png";

  function drawCellMiddleRect(x, y, width) {
    context.fillStyle = "#4b4f57";
    context.drawImage(cellBackgroundLeft, x, y);
    context.fillRect(x + 4, y, width - 2 * 4, 63);
    context.drawImage(cellBackgroundRight, x + width - 4, y);
  }

  function drawCellMiddleImage(x, y, width) {
    context.fillStyle = "#4b4f57";
    context.drawImage(cellBackgroundLeft, x, y);
    context.drawImage(cellBackgroundMiddle, x + 4, y, width - 2 * 4, 63);
    context.drawImage(cellBackgroundRight, x + width - 4, y);
  }

  function roundRect(ctx, x, y, width, height, radius, fill, stroke) {
    if (!stroke) {
      stroke = true;
    }
    if (!radius) {
      radius = 5;
    }
    ctx.beginPath();
    ctx.moveTo(x + radius, y);
    ctx.lineTo(x + width - radius, y);
    ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
    ctx.lineTo(x + width, y + height - radius);
    ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
    ctx.lineTo(x + radius, y + height);
    ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
    ctx.lineTo(x, y + radius);
    ctx.quadraticCurveTo(x, y, x + radius, y);
    ctx.closePath();

    if (fill) {
      ctx.fill();
    }
  }
</script>

Preparation code output

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

drawCellMiddleRect(20, 20, 400);

drawCellMiddleImage(20, 100, 400);

roundRect(context, 20, 200, 400, 63, 5, true, false);

Compare results of other browsers

Revisions

You can edit these tests or add even more tests to this page by appending /edit to the URL. Here’s a list of current revisions for this page:

• Revision 1: published on 12th December 2010
• Revision 7: published on 5th July 2011
• Revision 8: published on 3rd September 2011
• Revision 9: published on 14th September 2011
• Revision 10: published by skyblue on 21st March 2012
• Revision 12: published on 26th June 2012
• Revision 13: published on 2nd October 2012
• Revision 14: published by ryan jacobson on 23rd October 2012
• Revision 16: published on 15th February 2013
• Revision 17: published 3 weeks ago

0 comments