Preparation code

<script src="http://thesis.web-pilot.cz/paper.min.js"></script>
<script src="https://github.com/downloads/processing-js/processing-js/processing-1.4.1.min.js"></script>
<script src="https://raw.github.com/DmitryBaranovskiy/raphael/master/raphael-min.js"></script>

<canvas id="context" width="100" height="100"></canvas>
<canvas id="paper" width="100" height="100"></canvas>
<canvas id="processing" width="100" height="100"></canvas>
<span id="rafael"></span>

<script>
  var contextCanvas = document.getElementById("context");
  var ctx = contextCanvas.getContext("2d");

  var paperCanvas = document.getElementById("paper");
  paper.setup(paperCanvas);
  var paperPoint1 = new paper.Point(0, 0);
  var paperPoint2 = new paper.Point(50, 50);
  var paperPath;
  
  var processingCanvas = document.getElementById("processing");
  var processingInstance = new Processing(processingCanvas, null);
  processingInstance.background(255);
  
  var raphaelInstance = Raphael("rafael", 100, 100);
  var refaelRect;
</script>
    

Preparation code output

Test runner

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

Java applet disabled.

ctx.fillStyle = "#000";
ctx.fillRect(0, 0, 50, 50);
ctx.clearRect(0, 0, 100, 100);

ctx.fillStyle = "#000";
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(50, 0);
ctx.lineTo(50, 50);
ctx.lineTo(0, 50);
ctx.lineTo(0, 0);
ctx.closePath();
ctx.fill();
ctx.clearRect(0, 0, 100, 100);

paperPath = new paper.Path.Rectangle(paperPoint1, paperPoint2);
paperPath.fillColor = "#000";
paper.view.draw();
paperPath.remove();
paper.view.draw();

processingInstance.fill(0);
processingInstance.noStroke();
processingInstance.rect(0, 0, 50, 50);
processingInstance.background(255);

raphaelRect = raphaelInstance.rect(0, 0, 50, 50);
raphaelRect.attr({
  fill: "#000",
  "stroke-width": 0
});
raphaelRect.remove();

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.

• Revision 1: published bielda on 2013-3-5
• Revision 2: published on 2013-4-7
• Revision 3: published Matt Lockyer on 2013-4-7
• Revision 4: published on 2013-4-8
• Revision 6: published Timopheym on 2013-4-19
• Revision 8: published Jürg Lehni on 2013-4-20
• Revision 9: published on 2013-4-20
• Revision 10: published on 2013-4-20
• Revision 11: published on 2013-4-20
• Revision 12: published on 2013-4-20
• Revision 13: published bielda on 2013-4-29
• Revision 14: published on 2013-5-7
• Revision 15: published Jürg Lehni on 2013-5-27
• Revision 16: published on 2013-9-4
• Revision 17: published on 2013-9-27
• Revision 18: published on 2013-12-9
• Revision 19: published on 2013-12-9
• Revision 20: published on 2013-12-9
• Revision 21: published on 2013-12-13
• Revision 22: published on 2013-12-13
• Revision 23: published on 2013-12-16
• Revision 24: published on 2014-9-14
• Revision 25: published Steven on 2014-12-13
• Revision 26: published on 2015-2-1
• Revision 27: published on 2015-2-1
• Revision 28: published Anton on 2015-2-12
• Revision 31: published on 2015-8-11
• Revision 32: published Max on 2015-11-2
• Revision 33: published on 2015-11-3
• Revision 34: published Melck 4 weeks ago

0 Comments