Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Autobuild

  • Loading branch information...
commit dff052411776d836b4a866204a516d6cb7ea8ff2 1 parent 6fa7b23
@o3builder o3builder authored
View
BIN  lib/o3-canvas/o3-osx64.node
Binary file not shown
View
503 test/graphics-tests-in-browser.html
@@ -0,0 +1,503 @@
+<html>
+<head>
+<title>Canvas Test Suite</title>
+<script language="javascript">
+<!--
+
+var tests = {};
+
+tests['clearRect()'] = function(ctx){
+ ctx.fillRect(25,25,100,100);
+ ctx.clearRect(45,45,60,60);
+ ctx.fillRect(50,50,50,50);
+};
+
+tests['strokeRect()'] = function(ctx){
+ ctx.fillRect(25,25,100,100);
+ ctx.clearRect(45,45,60,60);
+ ctx.strokeRect(50,50,50,50);
+};
+
+tests['lineTo()'] = function(ctx){
+ // Filled triangle
+ ctx.beginPath();
+ ctx.moveTo(25.5,25);
+ ctx.lineTo(105,25);
+ ctx.lineTo(25,105);
+ ctx.fill();
+
+ // Stroked triangle
+ ctx.beginPath();
+ ctx.moveTo(125,125);
+ ctx.lineTo(125,45);
+ ctx.lineTo(45,125);
+ ctx.closePath();
+ ctx.stroke();
+};
+
+tests['arc()'] = function(ctx){
+ ctx.beginPath();
+ ctx.arc(75,75,50,0,Math.PI*2,true); // Outer circle
+ ctx.moveTo(110,75);
+ ctx.arc(75,75,35,0,Math.PI,false); // Mouth
+ ctx.moveTo(65,65);
+ ctx.arc(60,65,5,0,Math.PI*2,true); // Left eye
+ ctx.moveTo(95,65);
+ ctx.arc(90,65,5,0,Math.PI*2,true); // Right eye
+ ctx.stroke();
+};
+
+tests['bezierCurveTo()'] = function(ctx){
+ ctx.beginPath();
+ ctx.moveTo(75,40);
+ ctx.bezierCurveTo(75,37,70,25,50,25);
+ ctx.bezierCurveTo(20,25,20,62.5,20,62.5);
+ ctx.bezierCurveTo(20,80,40,102,75,120);
+ ctx.bezierCurveTo(110,102,130,80,130,62.5);
+ ctx.bezierCurveTo(130,62.5,130,25,100,25);
+ ctx.bezierCurveTo(85,25,75,37,75,40);
+ ctx.fill();
+};
+
+tests['quadraticCurveTo()'] = function(ctx){
+ ctx.beginPath();
+ ctx.moveTo(75,25);
+ ctx.quadraticCurveTo(25,25,25,62.5);
+ ctx.quadraticCurveTo(25,100,50,100);
+ ctx.quadraticCurveTo(50,120,30,125);
+ ctx.quadraticCurveTo(60,120,65,100);
+ ctx.quadraticCurveTo(125,100,125,62.5);
+ ctx.quadraticCurveTo(125,25,75,25);
+ ctx.stroke();
+};
+
+tests['rotate()'] = function(ctx){
+ ctx.rotate(0.4);
+ ctx.translate(30,0);
+ ctx.rect(0,0,50,50);
+ ctx.stroke();
+};
+
+tests['rect()'] = function(ctx){
+ ctx.rect(5,5,50,50);
+ ctx.strokeStyle = 'yellow';
+ ctx.fill();
+ ctx.stroke();
+};
+
+tests['clip()'] = function(ctx){
+ ctx.arc(50,50,50,0,Math.PI * 2);
+ ctx.stroke();
+ ctx.clip();
+ ctx.fillStyle = 'rgba(0,0,0,.5)';
+ ctx.fillRect(0,0,100,100);
+};
+
+tests['createLinearGradient()'] = function(ctx){
+ var lingrad = ctx.createLinearGradient(0,0,0,150);
+ lingrad.addColorStop(0, '#00ABEB');
+ lingrad.addColorStop(0.5, '#fff');
+ lingrad.addColorStop(0.5, '#26C000');
+ lingrad.addColorStop(1, '#fff');
+
+ var lingrad2 = ctx.createLinearGradient(0,50,0,95);
+ lingrad2.addColorStop(0.5, '#000');
+ lingrad2.addColorStop(1, 'rgba(0,0,0,0)');
+
+ ctx.fillStyle = lingrad;
+ ctx.strokeStyle = lingrad2;
+
+ ctx.fillRect(10,10,130,130);
+ ctx.strokeRect(50,50,50,50);
+};
+
+tests['createRadialGradient()'] = function(ctx){
+ // Create gradients
+ var radgrad = ctx.createRadialGradient(45,45,10,52,50,30);
+ radgrad.addColorStop(0, '#A7D30C');
+ radgrad.addColorStop(0.9, '#019F62');
+ radgrad.addColorStop(1, 'rgba(1,159,98,0)');
+
+ var radgrad2 = ctx.createRadialGradient(105,105,20,112,120,50);
+ radgrad2.addColorStop(0, '#FF5F98');
+ radgrad2.addColorStop(0.75, '#FF0188');
+ radgrad2.addColorStop(1, 'rgba(255,1,136,0)');
+
+ var radgrad3 = ctx.createRadialGradient(95,15,15,102,20,40);
+ radgrad3.addColorStop(0, '#00C9FF');
+ radgrad3.addColorStop(0.8, '#00B5E2');
+ radgrad3.addColorStop(1, 'rgba(0,201,255,0)');
+
+ var radgrad4 = ctx.createRadialGradient(0,150,50,0,140,90);
+ radgrad4.addColorStop(0, '#F4F201');
+ radgrad4.addColorStop(0.8, '#E4C700');
+ radgrad4.addColorStop(1, 'rgba(228,199,0,0)');
+
+ // draw shapes
+ ctx.fillStyle = radgrad4;
+ ctx.fillRect(0,0,150,150);
+ ctx.fillStyle = radgrad3;
+ ctx.fillRect(0,0,150,150);
+ ctx.fillStyle = radgrad2;
+ ctx.fillRect(0,0,150,150);
+ ctx.fillStyle = radgrad;
+ ctx.fillRect(0,0,150,150);
+};
+
+tests['globalAlpha'] = function(ctx){
+ ctx.globalAlpha = 0.5;
+ ctx.fillStyle = 'rgba(0,0,0,0.5)';
+ ctx.strokeRect(0,0,50,50);
+
+ ctx.globalAlpha = 0.8;
+ ctx.fillRect(20,20,20,20);
+
+ ctx.fillStyle = 'black';
+ ctx.globalAlpha = 1;
+ ctx.fillRect(25,25,10,10);
+};
+
+tests['fillStyle'] = function(ctx){
+ ctx.fillStyle = 'rgb(0,55,0)';
+ ctx.fillRect(10, 10, 50, 50);
+
+ ctx.fillStyle = 'rgba(0,0,0,0.1)';
+ ctx.fillRect(60, 60, 50, 50);
+
+ ctx.fillStyle = '#000';
+ ctx.fillRect(110, 110, 50, 50);
+};
+
+tests['fill with stroke'] = function(ctx){
+ ctx.beginPath();
+ ctx.arc(75,75,50,0,Math.PI*2,true);
+ ctx.fill();
+ ctx.closePath();
+ ctx.beginPath();
+ ctx.fillStyle = 'red';
+ ctx.strokeStyle = 'yellow';
+ ctx.arc(75,75,30,0,Math.PI*2,true);
+ ctx.fill();
+ ctx.stroke();
+};
+
+tests['lineWidth'] = function(ctx){
+ ctx.beginPath();
+ ctx.lineWidth = 10.0;
+ ctx.moveTo(50, 50);
+ ctx.lineTo(50, 100);
+ ctx.lineTo(80, 120);
+ ctx.stroke();
+};
+
+tests['lineCap'] = function(ctx){
+ ctx.beginPath();
+ ctx.lineWidth = 10.0;
+ ctx.lineCap = 'round';
+ ctx.moveTo(50, 50);
+ ctx.lineTo(50, 100);
+ ctx.lineTo(80, 120);
+ ctx.stroke();
+};
+
+tests['lineJoin'] = function(ctx){
+ ctx.beginPath();
+ ctx.lineWidth = 10.0;
+ ctx.lineJoin = 'round';
+ ctx.moveTo(50, 50);
+ ctx.lineTo(50, 100);
+ ctx.lineTo(80, 120);
+ ctx.stroke();
+};
+
+tests['states'] = function(ctx){
+ ctx.arc(5,5,-1)
+ ctx.save();
+ ctx.rect(50, 50, 100, 100);
+ ctx.stroke();
+
+ ctx.restore();
+ ctx.save();
+ ctx.translate(50,50);
+ ctx.scale(.5,.5);
+ ctx.strokeRect(51, 51, 100, 100);
+
+ ctx.restore();
+ ctx.translate(95,95);
+ ctx.fillRect(0,0,10,10);
+};
+
+tests['states with stroke/fill/globalAlpha'] = function(ctx){
+ ctx.fillRect(0,0,150,150);
+ ctx.save();
+
+ ctx.fillStyle = '#09F'
+ ctx.fillRect(15,15,120,120);
+
+ ctx.save();
+ ctx.fillStyle = '#FFF'
+ ctx.globalAlpha = 0.5;
+ ctx.fillRect(30,30,90,90);
+
+ ctx.restore();
+ ctx.fillRect(45,45,60,60);
+
+ ctx.restore();
+ ctx.fillRect(60,60,30,30);
+};
+
+tests['invalid stroke/fill styles'] = function(ctx){
+ ctx.fillStyle = 'red';
+ ctx.strokeStyle = 'yellow';
+ ctx.rect(50,50,50,50);
+ ctx.fill();
+ ctx.stroke();
+ ctx.beginPath();
+ ctx.fillStyle = 'asdf';
+ ctx.strokeStyle = 'asdf';
+ ctx.rect(100,80,15,15);
+ ctx.fill();
+ ctx.stroke();
+};
+
+tests['fillText()'] = function(ctx){
+ ctx.font = '30px Arial';
+ ctx.rotate(.1);
+ ctx.lineTo(10,10);
+ ctx.fillText("Awesome!", 50, 100);
+
+ var te = ctx.measureText('Awesome!');
+
+ ctx.strokeStyle = 'rgba(0,0,0,0.5)';
+ ctx.lineTo(50, 102);
+ ctx.lineTo(50 + te.width, 102);
+ ctx.stroke();
+};
+
+tests['fillText() transformations'] = function(ctx){
+ ctx.strokeStyle = '#666';
+ ctx.font = 'bold 12px Helvetica';
+
+ ctx.strokeRect(0,0,200,200);
+ ctx.lineTo(0,100);
+ ctx.lineTo(200,100);
+ ctx.stroke();
+
+ ctx.beginPath();
+ ctx.lineTo(100,0);
+ ctx.lineTo(100,200);
+ ctx.stroke();
+
+ ctx.rotate(0.2);
+ ctx.fillText("foo", 150, 100);
+ ctx.font = 'normal 30px Arial';
+ ctx.fillText("bar", 50, 100);
+};
+
+tests['strokeText()'] = function(ctx){
+ ctx.strokeStyle = '#666';
+ ctx.strokeRect(0,0,200,200);
+ ctx.lineTo(0,100);
+ ctx.lineTo(200,100);
+ ctx.stroke();
+
+ ctx.beginPath();
+ ctx.lineTo(100,0);
+ ctx.lineTo(100,200);
+ ctx.stroke();
+
+ ctx.strokeStyle = 'red';
+ ctx.font = 'normal 50px Arial';
+ ctx.strokeText("bar", 100, 100);
+};
+
+tests['textAlign right'] = function(ctx){
+ ctx.strokeStyle = '#666';
+ ctx.strokeRect(0,0,200,200);
+ ctx.lineTo(0,100);
+ ctx.lineTo(200,100);
+ ctx.stroke();
+
+ ctx.beginPath();
+ ctx.lineTo(100,0);
+ ctx.lineTo(100,200);
+ ctx.stroke();
+
+ ctx.font = 'normal 20px Arial';
+ ctx.textAlign = 'right';
+ ctx.fillText("right", 100, 100);
+};
+
+tests['textAlign left'] = function(ctx){
+ ctx.strokeStyle = '#666';
+ ctx.strokeRect(0,0,200,200);
+ ctx.lineTo(0,100);
+ ctx.lineTo(200,100);
+ ctx.stroke();
+
+ ctx.beginPath();
+ ctx.lineTo(100,0);
+ ctx.lineTo(100,200);
+ ctx.stroke();
+
+ ctx.font = 'normal 20px Arial';
+ ctx.textAlign = 'left';
+ ctx.fillText("left", 100, 100);
+};
+
+tests['textAlign center'] = function(ctx){
+ ctx.strokeStyle = '#666';
+ ctx.strokeRect(0,0,200,200);
+ ctx.lineTo(0,100);
+ ctx.lineTo(200,100);
+ ctx.stroke();
+
+ ctx.beginPath();
+ ctx.lineTo(100,0);
+ ctx.lineTo(100,200);
+ ctx.stroke();
+
+ ctx.font = 'normal 20px Arial';
+ ctx.textAlign = 'center';
+ ctx.fillText("center", 100, 100);
+};
+
+tests['textBaseline alphabetic'] = function(ctx){
+ ctx.strokeStyle = '#666';
+ ctx.strokeRect(0,0,200,200);
+ ctx.lineTo(0,100);
+ ctx.lineTo(200,100);
+ ctx.stroke();
+
+ ctx.font = 'normal 20px Arial';
+ ctx.textBaseline = 'alphabetic';
+ ctx.textAlign = 'center';
+ ctx.fillText("alphabetic", 100, 100);
+};
+
+tests['textBaseline top'] = function(ctx){
+ ctx.strokeStyle = '#666';
+ ctx.strokeRect(0,0,200,200);
+ ctx.lineTo(0,100);
+ ctx.lineTo(200,100);
+ ctx.stroke();
+
+ ctx.font = 'normal 20px Arial';
+ ctx.textBaseline = 'top';
+ ctx.textAlign = 'center';
+ ctx.fillText("top", 100, 100);
+};
+
+tests['textBaseline hanging'] = function(ctx){
+ ctx.strokeStyle = '#666';
+ ctx.strokeRect(0,0,200,200);
+ ctx.lineTo(0,100);
+ ctx.lineTo(200,100);
+ ctx.stroke();
+
+ ctx.font = 'normal 20px Arial';
+ ctx.textBaseline = 'hanging';
+ ctx.textAlign = 'center';
+ ctx.fillText("hanging", 100, 100);
+};
+
+tests['textBaseline bottom'] = function(ctx){
+ ctx.strokeStyle = '#666';
+ ctx.strokeRect(0,0,200,200);
+ ctx.lineTo(0,100);
+ ctx.lineTo(200,100);
+ ctx.stroke();
+
+ ctx.font = 'normal 20px Arial';
+ ctx.textBaseline = 'bottom';
+ ctx.textAlign = 'center';
+ ctx.fillText("bottom", 100, 100);
+};
+
+tests['textBaseline ideographic'] = function(ctx){
+ ctx.strokeStyle = '#666';
+ ctx.strokeRect(0,0,200,200);
+ ctx.lineTo(0,100);
+ ctx.lineTo(200,100);
+ ctx.stroke();
+
+ ctx.font = 'normal 20px Arial';
+ ctx.textBaseline = 'ideographic';
+ ctx.textAlign = 'center';
+ ctx.fillText("ideographic", 100, 100);
+};
+
+tests['integration 1'] = function(ctx){
+ ctx.fillStyle = '#eee';
+ ctx.fillRect(0,0,300,300);
+
+ ctx.fillStyle = "rgba(0,0,200,0.5)";
+ ctx.strokeStyle= "rgba(100,100,100,0.5)";
+ var n = Date.now()/1000;
+ var xs = 10, ys = 10, cx = xs/2, cy=ys/2, xd = 300/xs, yd = 300/ys;
+ for(var xt = 0; xt<300; xt+=xd){
+ for(var yt = 0; yt<300; yt+=yd){
+ ctx.moveTo(xt,0);ctx.lineTo(xt,300);
+ ctx.moveTo(0,yt);ctx.lineTo(300,yt);
+ }
+ }
+ ctx.stroke();
+ ctx.strokeWidth = 5;
+ ctx.strokeStyle = "rgba(0,0,0,0.5)";
+ ctx.fillStyle= "rgba(0,174,239,0.8)";
+ ctx.beginPath();
+ ctx.moveTo(0,300);
+ for(var xt = 0; xt<300; xt+=1)
+ ctx.lineTo(xt, 100+10*Math.sin(xt/32+n+Math.sin(xt/64+n))*5+Math.sin(xt/48));
+ ctx.lineTo(300,300);
+ ctx.lineTo(0,300);
+ ctx.fill();
+ ctx.stroke();
+ ctx.beginPath();
+ ctx.fillStyle = "rgba(242,0,144,0.7)"; n = n+2;
+ for(var xt = 0; xt<300; xt+=1)
+ ctx.lineTo(xt, 150+10*Math.sin(xt/32+n+Math.sin(xt/64+n))*5+Math.sin(xt/48));
+ ctx.lineTo(300,300);
+ ctx.lineTo(0,300);
+ ctx.fill();
+ ctx.stroke();
+ ctx.beginPath();
+ ctx.fillStyle = "rgba(255,254,0,0.7)"; n = n+4;
+ for(var xt = 0; xt<300; xt+=1)
+ ctx.lineTo(xt, 200+10*Math.sin(xt/32+n+Math.sin(xt/64+n))*5+Math.sin(xt/48));
+ ctx.lineTo(300,300);
+ ctx.lineTo(0,300);
+ ctx.fill();
+ ctx.stroke();
+};
+
+function Start()
+{
+ for(testname in tests)
+ {
+ canvas = document.createElement('CANVAS');
+ header = document.createElement('h3');
+ header.appendChild(document.createTextNode(testname));
+ canvas.setAttribute('width',300);
+ canvas.setAttribute('height',300);
+
+ document.getElementById('thebody').appendChild(header);
+ document.getElementById('thebody').appendChild(canvas);
+
+ try
+ {
+ tests[testname](canvas.getContext('2d'));
+ }
+ catch(e)
+ {
+
+ }
+
+ }
+};
+
+-->
+</script>
+</head><body ID="thebody" onload="Start();">
+
+</body></html>
View
551 test/graphics-tests.js
@@ -0,0 +1,551 @@
+var createContext = require('../index.js')
+
+
+var tests = {};
+
+tests['clearRect()'] = function(ctx){
+ ctx.fillRect(25,25,100,100);
+ ctx.clearRect(45,45,60,60);
+ ctx.fillRect(50,50,50,50);
+};
+
+tests['strokeRect()'] = function(ctx){
+ ctx.fillRect(25,25,100,100);
+ ctx.clearRect(45,45,60,60);
+ ctx.strokeRect(50,50,50,50);
+};
+
+tests['lineTo()'] = function(ctx){
+ // Filled triangle
+ ctx.beginPath();
+ ctx.moveTo(25.5,25);
+ ctx.lineTo(105,25);
+ ctx.lineTo(25,105);
+ ctx.fill();
+
+ // Stroked triangle
+ ctx.beginPath();
+ ctx.moveTo(125,125);
+ ctx.lineTo(125,45);
+ ctx.lineTo(45,125);
+ ctx.closePath();
+ ctx.stroke();
+};
+
+tests['arc()'] = function(ctx){
+ ctx.beginPath();
+ ctx.arc(75,75,50,0,Math.PI*2,true); // Outer circle
+ ctx.moveTo(110,75);
+ ctx.arc(75,75,35,0,Math.PI,false); // Mouth
+ ctx.moveTo(65,65);
+ ctx.arc(60,65,5,0,Math.PI*2,true); // Left eye
+ ctx.moveTo(95,65);
+ ctx.arc(90,65,5,0,Math.PI*2,true); // Right eye
+ ctx.stroke();
+};
+
+tests['bezierCurveTo()'] = function(ctx){
+ ctx.beginPath();
+ ctx.moveTo(75,40);
+ ctx.bezierCurveTo(75,37,70,25,50,25);
+ ctx.bezierCurveTo(20,25,20,62.5,20,62.5);
+ ctx.bezierCurveTo(20,80,40,102,75,120);
+ ctx.bezierCurveTo(110,102,130,80,130,62.5);
+ ctx.bezierCurveTo(130,62.5,130,25,100,25);
+ ctx.bezierCurveTo(85,25,75,37,75,40);
+ ctx.fill();
+};
+
+tests['quadraticCurveTo()'] = function(ctx){
+ ctx.beginPath();
+ ctx.moveTo(75,25);
+ ctx.quadraticCurveTo(25,25,25,62.5);
+ ctx.quadraticCurveTo(25,100,50,100);
+ ctx.quadraticCurveTo(50,120,30,125);
+ ctx.quadraticCurveTo(60,120,65,100);
+ ctx.quadraticCurveTo(125,100,125,62.5);
+ ctx.quadraticCurveTo(125,25,75,25);
+ ctx.stroke();
+};
+
+tests['rotate()'] = function(ctx){
+ ctx.rotate(0.4);
+ ctx.translate(30,0);
+ ctx.rect(0,0,50,50);
+ ctx.stroke();
+};
+
+tests['rect()'] = function(ctx){
+ ctx.rect(5,5,50,50);
+ ctx.strokeStyle = 'yellow';
+ ctx.fill();
+ ctx.stroke();
+};
+
+tests['clip()'] = function(ctx){
+ ctx.arc(50,50,50,0,Math.PI * 2);
+ ctx.stroke();
+ ctx.clip();
+ ctx.fillStyle = 'rgba(0,0,0,.5)';
+ ctx.fillRect(0,0,100,100);
+};
+
+tests['createLinearGradient()'] = function(ctx){
+ var lingrad = ctx.createLinearGradient(0,0,0,150);
+ lingrad.addColorStop(0, '#00ABEB');
+ lingrad.addColorStop(0.5, '#fff');
+ lingrad.addColorStop(0.5, '#26C000');
+ lingrad.addColorStop(1, '#fff');
+
+ var lingrad2 = ctx.createLinearGradient(0,50,0,95);
+ lingrad2.addColorStop(0.5, '#000');
+ lingrad2.addColorStop(1, 'rgba(0,0,0,0)');
+
+ ctx.fillStyle = lingrad;
+ ctx.strokeStyle = lingrad2;
+
+ ctx.fillRect(10,10,130,130);
+ ctx.strokeRect(50,50,50,50);
+};
+
+tests['createRadialGradient()'] = function(ctx){
+ // Create gradients
+ var radgrad = ctx.createRadialGradient(45,45,10,52,50,30);
+ radgrad.addColorStop(0, '#A7D30C');
+ radgrad.addColorStop(0.9, '#019F62');
+ radgrad.addColorStop(1, 'rgba(1,159,98,0)');
+
+ var radgrad2 = ctx.createRadialGradient(105,105,20,112,120,50);
+ radgrad2.addColorStop(0, '#FF5F98');
+ radgrad2.addColorStop(0.75, '#FF0188');
+ radgrad2.addColorStop(1, 'rgba(255,1,136,0)');
+
+ var radgrad3 = ctx.createRadialGradient(95,15,15,102,20,40);
+ radgrad3.addColorStop(0, '#00C9FF');
+ radgrad3.addColorStop(0.8, '#00B5E2');
+ radgrad3.addColorStop(1, 'rgba(0,201,255,0)');
+
+ var radgrad4 = ctx.createRadialGradient(0,150,50,0,140,90);
+ radgrad4.addColorStop(0, '#F4F201');
+ radgrad4.addColorStop(0.8, '#E4C700');
+ radgrad4.addColorStop(1, 'rgba(228,199,0,0)');
+
+ // draw shapes
+ ctx.fillStyle = radgrad4;
+ ctx.fillRect(0,0,150,150);
+ ctx.fillStyle = radgrad3;
+ ctx.fillRect(0,0,150,150);
+ ctx.fillStyle = radgrad2;
+ ctx.fillRect(0,0,150,150);
+ ctx.fillStyle = radgrad;
+ ctx.fillRect(0,0,150,150);
+};
+
+tests['globalAlpha'] = function(ctx){
+ ctx.globalAlpha = 0.5;
+ ctx.fillStyle = 'rgba(0,0,0,0.5)';
+ ctx.strokeRect(0,0,50,50);
+
+ ctx.globalAlpha = 0.8;
+ ctx.fillRect(20,20,20,20);
+
+ ctx.fillStyle = 'black';
+ ctx.globalAlpha = 1;
+ ctx.fillRect(25,25,10,10);
+};
+
+tests['fillStyle'] = function(ctx){
+ ctx.fillStyle = 'rgb(0,55,0)';
+ ctx.fillRect(10, 10, 50, 50);
+
+ ctx.fillStyle = 'rgba(0,0,0,0.1)';
+ ctx.fillRect(60, 60, 50, 50);
+
+ ctx.fillStyle = '#000';
+ ctx.fillRect(110, 110, 50, 50);
+};
+
+tests['fill with stroke'] = function(ctx){
+ ctx.beginPath();
+ ctx.arc(75,75,50,0,Math.PI*2,true);
+ ctx.fill();
+ ctx.closePath();
+ ctx.beginPath();
+ ctx.fillStyle = 'red';
+ ctx.strokeStyle = 'yellow';
+ ctx.arc(75,75,30,0,Math.PI*2,true);
+ ctx.fill();
+ ctx.stroke();
+};
+
+tests['lineWidth'] = function(ctx){
+ ctx.beginPath();
+ ctx.lineWidth = 10.0;
+ ctx.moveTo(50, 50);
+ ctx.lineTo(50, 100);
+ ctx.lineTo(80, 120);
+ ctx.stroke();
+};
+
+tests['lineCap'] = function(ctx){
+ ctx.beginPath();
+ ctx.lineWidth = 10.0;
+ ctx.lineCap = 'round';
+ ctx.moveTo(50, 50);
+ ctx.lineTo(50, 100);
+ ctx.lineTo(80, 120);
+ ctx.stroke();
+};
+
+tests['lineJoin'] = function(ctx){
+ ctx.beginPath();
+ ctx.lineWidth = 10.0;
+ ctx.lineJoin = 'round';
+ ctx.moveTo(50, 50);
+ ctx.lineTo(50, 100);
+ ctx.lineTo(80, 120);
+ ctx.stroke();
+};
+
+tests['states'] = function(ctx){
+
+ ctx.save();
+ ctx.rect(50, 50, 100, 100);
+ ctx.stroke();
+
+ ctx.restore();
+ ctx.save();
+ ctx.translate(50,50);
+ ctx.scale(.5,.5);
+ ctx.strokeRect(51, 51, 100, 100);
+
+ ctx.restore();
+ ctx.translate(95,95);
+ ctx.fillRect(0,0,10,10);
+};
+
+tests['states with stroke/fill/globalAlpha'] = function(ctx){
+ ctx.fillRect(0,0,150,150);
+ ctx.save();
+
+ ctx.fillStyle = '#09F'
+ ctx.fillRect(15,15,120,120);
+
+ ctx.save();
+ ctx.fillStyle = '#FFF'
+ ctx.globalAlpha = 0.5;
+ ctx.fillRect(30,30,90,90);
+
+ ctx.restore();
+ ctx.fillRect(45,45,60,60);
+
+ ctx.restore();
+ ctx.fillRect(60,60,30,30);
+};
+
+tests['invalid stroke/fill styles'] = function(ctx){
+ ctx.fillStyle = 'red';
+ ctx.strokeStyle = 'yellow';
+ ctx.rect(50,50,50,50);
+ ctx.fill();
+ ctx.stroke();
+ ctx.beginPath();
+ ctx.fillStyle = 'asdf';
+ ctx.strokeStyle = 'asdf';
+ ctx.rect(100,80,15,15);
+ ctx.fill();
+ ctx.stroke();
+};
+
+tests['fillText()'] = function(ctx){
+ ctx.fontFamily="arial.ttf";
+ ctx.fontSize = 30;
+
+ ctx.font = '30px Arial';
+ ctx.rotate(.1);
+ ctx.lineTo(10,10);
+ ctx.fillText("Awesome!", 50, 100);
+
+ var te = ctx.measureText('Awesome!');
+
+ ctx.strokeStyle = 'rgba(0,0,0,0.5)';
+ ctx.lineTo(50, 102);
+ ctx.lineTo(50 + te.width, 102);
+ ctx.stroke();
+};
+
+tests['fillText() transformations'] = function(ctx){
+ ctx.strokeStyle = '#666';
+ ctx.font = 'bold 12px Helvetica';
+
+ ctx.strokeRect(0,0,200,200);
+ ctx.lineTo(0,100);
+ ctx.lineTo(200,100);
+ ctx.stroke();
+
+ ctx.beginPath();
+ ctx.lineTo(100,0);
+ ctx.lineTo(100,200);
+ ctx.stroke();
+
+ ctx.rotate(0.2);
+ ctx.fillText("foo", 150, 100);
+ ctx.font = 'normal 30px Arial';
+ ctx.fillText("bar", 50, 100);
+};
+
+tests['strokeText()'] = function(ctx){
+ ctx.fontFamily="arial.ttf";
+
+ ctx.strokeStyle = '#666';
+ ctx.strokeRect(0,0,200,200);
+ ctx.lineTo(0,100);
+ ctx.lineTo(200,100);
+ ctx.stroke();
+
+ ctx.beginPath();
+ ctx.lineTo(100,0);
+ ctx.lineTo(100,200);
+ ctx.stroke();
+
+ ctx.strokeStyle = 'red';
+ ctx.font = 'normal 50px Arial';
+
+ ctx.fontSize = 50;
+
+ ctx.strokeText("bar", 100, 100);
+};
+
+tests['textAlign right'] = function(ctx){
+ ctx.strokeStyle = '#666';
+ ctx.strokeRect(0,0,200,200);
+ ctx.lineTo(0,100);
+ ctx.lineTo(200,100);
+ ctx.stroke();
+
+ ctx.beginPath();
+ ctx.lineTo(100,0);
+ ctx.lineTo(100,200);
+ ctx.stroke();
+
+ ctx.font = 'normal 20px Arial';
+ ctx.textAlign = 'right';
+ ctx.fillText("right", 100, 100);
+};
+
+tests['textAlign left'] = function(ctx){
+ ctx.strokeStyle = '#666';
+ ctx.strokeRect(0,0,200,200);
+ ctx.lineTo(0,100);
+ ctx.lineTo(200,100);
+ ctx.stroke();
+
+ ctx.beginPath();
+ ctx.lineTo(100,0);
+ ctx.lineTo(100,200);
+ ctx.stroke();
+
+ ctx.font = 'normal 20px Arial';
+ ctx.textAlign = 'left';
+ ctx.fillText("left", 100, 100);
+};
+
+tests['textAlign center'] = function(ctx){
+ ctx.strokeStyle = '#666';
+ ctx.strokeRect(0,0,200,200);
+ ctx.lineTo(0,100);
+ ctx.lineTo(200,100);
+ ctx.stroke();
+
+ ctx.beginPath();
+ ctx.lineTo(100,0);
+ ctx.lineTo(100,200);
+ ctx.stroke();
+
+ ctx.font = 'normal 20px Arial';
+ ctx.textAlign = 'center';
+ ctx.fillText("center", 100, 100);
+};
+
+tests['textBaseline alphabetic'] = function(ctx){
+ ctx.strokeStyle = '#666';
+ ctx.strokeRect(0,0,200,200);
+ ctx.lineTo(0,100);
+ ctx.lineTo(200,100);
+ ctx.stroke();
+
+ ctx.font = 'normal 20px Arial';
+ ctx.textBaseline = 'alphabetic';
+ ctx.textAlign = 'center';
+ ctx.fillText("alphabetic", 100, 100);
+};
+
+tests['textBaseline top'] = function(ctx){
+ ctx.strokeStyle = '#666';
+ ctx.strokeRect(0,0,200,200);
+ ctx.lineTo(0,100);
+ ctx.lineTo(200,100);
+ ctx.stroke();
+
+ ctx.font = 'normal 20px Arial';
+ ctx.textBaseline = 'top';
+ ctx.textAlign = 'center';
+ ctx.fillText("top", 100, 100);
+};
+
+tests['textBaseline hanging'] = function(ctx){
+ ctx.strokeStyle = '#666';
+ ctx.strokeRect(0,0,200,200);
+ ctx.lineTo(0,100);
+ ctx.lineTo(200,100);
+ ctx.stroke();
+
+ ctx.font = 'normal 20px Arial';
+ ctx.textBaseline = 'hanging';
+ ctx.textAlign = 'center';
+ ctx.fillText("hanging", 100, 100);
+};
+
+tests['textBaseline bottom'] = function(ctx){
+ ctx.strokeStyle = '#666';
+ ctx.strokeRect(0,0,200,200);
+ ctx.lineTo(0,100);
+ ctx.lineTo(200,100);
+ ctx.stroke();
+
+ ctx.font = 'normal 20px Arial';
+ ctx.textBaseline = 'bottom';
+ ctx.textAlign = 'center';
+ ctx.fillText("bottom", 100, 100);
+};
+
+tests['textBaseline ideographic'] = function(ctx){
+ ctx.strokeStyle = '#666';
+ ctx.strokeRect(0,0,200,200);
+ ctx.lineTo(0,100);
+ ctx.lineTo(200,100);
+ ctx.stroke();
+
+ ctx.font = 'normal 20px Arial';
+ ctx.textBaseline = 'ideographic';
+ ctx.textAlign = 'center';
+ ctx.fillText("ideographic", 100, 100);
+};
+
+tests['integration 1'] = function(ctx){
+ ctx.fillStyle = '#eee';
+ ctx.fillRect(0,0,300,300);
+
+ ctx.fillStyle = "rgba(0,0,200,0.5)";
+ ctx.strokeStyle= "rgba(100,100,100,0.5)";
+ var n = Date.now()/1000;
+ var xs = 10, ys = 10, cx = xs/2, cy=ys/2, xd = 300/xs, yd = 300/ys;
+ for(var xt = 0; xt<300; xt+=xd){
+ for(var yt = 0; yt<300; yt+=yd){
+ ctx.moveTo(xt,0);ctx.lineTo(xt,300);
+ ctx.moveTo(0,yt);ctx.lineTo(300,yt);
+ }
+ }
+ ctx.stroke();
+ ctx.strokeWidth = 5;
+ ctx.strokeStyle = "rgba(0,0,0,0.5)";
+ ctx.fillStyle= "rgba(0,174,239,0.8)";
+ ctx.beginPath();
+ ctx.moveTo(0,300);
+ for(var xt = 0; xt<300; xt+=1)
+ ctx.lineTo(xt, 100+10*Math.sin(xt/32+n+Math.sin(xt/64+n))*5+Math.sin(xt/48));
+ ctx.lineTo(300,300);
+ ctx.lineTo(0,300);
+ ctx.fill();
+ ctx.stroke();
+ ctx.beginPath();
+ ctx.fillStyle = "rgba(242,0,144,0.7)"; n = n+2;
+ for(var xt = 0; xt<300; xt+=1)
+ ctx.lineTo(xt, 150+10*Math.sin(xt/32+n+Math.sin(xt/64+n))*5+Math.sin(xt/48));
+ ctx.lineTo(300,300);
+ ctx.lineTo(0,300);
+ ctx.fill();
+ ctx.stroke();
+ ctx.beginPath();
+ ctx.fillStyle = "rgba(255,254,0,0.7)"; n = n+4;
+ for(var xt = 0; xt<300; xt+=1)
+ ctx.lineTo(xt, 200+10*Math.sin(xt/32+n+Math.sin(xt/64+n))*5+Math.sin(xt/48));
+ ctx.lineTo(300,300);
+ ctx.lineTo(0,300);
+ ctx.fill();
+ ctx.stroke();
+};
+
+
+
+
+//var createContext = o3.canvas;
+//var createContext = require('../lib/o3-canvas')
+
+var color = "rgb(255,255,255)";
+function drawText(ctx,txt)
+{
+ ctx.fillStyle = color;
+ ctx.fillRect(0,0,300,300);
+
+ ctx.fillStyle = "rgba(0,0,200,0.5)";
+ ctx.strokeStyle= "rgba(0,0,0,0.5)";
+ ctx.strokeWidth = 4;
+// var n = Date.now()/1000;
+ ctx.fontFamily = "Abscissa.ttf";
+ ctx.fontSize = 30;
+ for (var i = 0;i<5;i+=0.5)
+ {
+ ctx.strokeWidth = i+0.5;
+ ctx.strokeText(txt, 140,25+i*50)
+ };
+ for (var i = 0;i<5;i+=0.5)
+ {
+ ctx.fontSize = 10+i*4;
+ ctx.fillText(txt, 0,25+i*50)
+ };
+}
+
+
+var http = require('http');
+var t = 0;
+http.createServer(function (req, res)
+{
+// var Query = require('url').parse(req.url, true).query;
+// if (Query.text)
+ //{
+ //drawText(ctx1, Query.text);
+ //}
+ //else
+ {
+// drawText(ctx1, "wooYay!");
+ };
+
+ res.writeHead(200, {'Content-Type': 'text/html'});
+ var Output = "<html><head><title>Canvas Test Suite</title><link rel=\"javascript\" type=\"text/javascript\" href=\"runtests.js\" /></head><body onload=\"Start();\">";
+
+ for (var testname in tests)
+ {
+ var ctx = createContext(300,300, "argb");
+ try
+ {
+ tests[testname](ctx);
+ }
+ catch(e)
+ {
+ console.log(e.message);
+ }
+ var buf = ctx.pngBuffer();
+ Output += "<h3>"+testname+"</h3><table><tr><td><img alt='Embedded Image' src='data:image/png;base64,"+buf.toBase64()+"'></td><td><canvas id=\""+testname+"\" width=\"300\" height=\"300\"></canvas></td></tr></table>";
+ var ctx = null;
+ };
+
+ res.end(Output + "</body></html>");
+}).listen(4000, "127.0.0.1");
+
+console.log('Server running at http://127.0.0.1:4000/');
+
+function Start()
+{
+ alert("blah");
+}
View
34 test/test.js
@@ -66,23 +66,23 @@ var ctx = canvasFactory(50,50, "argb");
drawtocontext(ctx);
var buf = ctx.pngBuffer();
-var check =
-"iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAADCUlEQVRoge3YXUhTYRzH8e/Z\n"+
-"JuhSybfcJjqSEqM0TKcxEl/Li4UUgRF0EUGtqyBvgqiuhF68TmgVKN4UUlKSECa6K71IrJSw\n"+
-"SWhEmiLVZpSKuS7EF9JtZ9t5o/xd7pz9z/PhnOc8z/8Ifr/fzz8QndoDkCpbEK1lC6K1bEG0\n"+
-"lv8L0tbWRktLi9xjiSqCmJXd4XDQ2dnJHaBQgUFFElF3xGazYcLEZQwMyD2iCCN6jliwUEaN\n"+
-"ZjFhTXYzZs1iwn5raRUT0etXi5iI1xGtYaJaELWEiXpl1wpGki2KFjCS7bXUxki6aVQTI/nu\n"+
-"Vy2MLNt4NTCy9SNKY2RtrJTEyN4hKoVRpNWVG2MwgkGGuptmDfOCWyxG3WnqDJCSB+nFEJus\n"+
-"IASkwRiMkF4E6Tb4OQWfXoJvTGEIrGEu0cNhKjBjFvW/Hck+qg8OU5L3gcERK/db8/g8nbR6\n"+
-"XHEILGOsnKcLV0iM1TKDo/Q1u61fcL/K5XrTCbyzxg3nqQIBSCAnKEYQ/NTYhzhiH6LDXcCD\n"+
-"9nLmFwIPVzUIBMbEG+c4e9yNMXaeBtcxvnq3hayl+pfGNUwPk0yyK2uKa852JqaTaGw+KgoB\n"+
-"Kt+RlSSQw07hHPn2Jpx2gdan5bz1ZIVVQxOQGP0id+t6SDSmUuT6Tq43RuS7bC2qP1oA9TWP\n"+
-"0Ql+LjRfQed1rj5m4UR1SG1BHyXZI1x9cobF3/oNc0ZsJIWMMcYoo6LP35sxzsXqduofOvkx\n"+
-"F7f6eyQYSSEePLhxi7p4SryPxpMuGjpOMz5j2nA8XIykkDTSMGGim+6gFzfol7hdd49ng3Z6\n"+
-"R/IDnhcORvI5YsFCFVVBMbUVA/h+GXH1OkLWE4uRrWcPhDHGLlBWOMKN56dY8gui6onByNqz\n"+
-"b4YpPfCeodFMpn3bw6oXCiN7z74eo9cvUVkyTFf/vojqBcMo0rOvYLL3DDLzLZGPE6kR1wuE\n"+
-"UaxnrxaqqLa/4VFfRtT1NsMotrIfyhQwx8Zx0zMc9vZjs/yNUQxSWfyO3v79VPiXH7NZPFHX\n"+
-"XI/5A+jeGX9yxrCoAAAAAElFTkSuQmCC"
+var check =
+"iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAADBUlEQVRoge3YXUhTYRzH8e/Z\n"+
+"Juh8odRwm6isQozSEE1rZGlTCwwUAiMIrIvSq6C6CKK6iejF64S0QPQmIbKkLsLE6UV5I1Za\n"+
+"mBEzokyTaltUinm6EF9It51t543yd7lz9j/Ph/Oc8zz/I4iiKPIPxKD1AOTKKkRvWYXoLasQ\n"+
+"veX/g7jdbiXHEXFMUk6qqamhpaWF60CewgMKN5LuiN1ux4KFM5joV3pEYUby1LJhYzd7dYsJ\n"+
+"6WG3YtUtJuS3ll4xYb1+9YgJex3RGyaiBVFPmIhXdr1gZNmi6AEj215La4ysm0YtMbLvfrXC\n"+
+"KLKN1wKjWD+iNkbRxkpNjOIdoloYVVpdpTEms8QOUY4sYh5xlZmIO02DCZKyIaUAohNVhIA8\n"+
+"GJMZUvIhZRv8GIf3j8HrVhkCi5iTdFNGCVaskv63LtFL2fYhCrPfMjCcwc3WbD5MrF04rjoE\n"+
+"5jAZHKeTxqCYDNskFUXP2Jj+id7+LC40HMDjMy87TxMIQDyZATGCIFLuGKR8xyAPenO51V7M\n"+
+"1LT/4WoGAf+YOPMUR6tcxMZMcampii+e2KC1NP/SuIjpZowxNqSNc762nbHPa6lv3i8JARrf\n"+
+"kfnEk4ldOEaOo4E6h0Dr/WJejKSHVEMXkCjjDDequ0kwJ5Pf+I0sT5TEd9liNJ9aAKf33cEg\n"+
+"iNQ1n8XgqV2YZqFEc0hl7hMK7K85d/cIM7+Ny54ZqZEd4sMn+dzNqaOcKLvHqdu1fP8Vs/B7\n"+
+"OBhZIT300EabpIsnxXmpP9jIxY7DjE5alh0PFSMrJJ54LFjooivgxU3GWa5VN9Ex4MA1nBOg\n"+
+"nnSM7FPLhg0nzoCYypJ+vD/NNLoqgtaTilGsZ/eHMUdPsytvmMsPDzErCpLqScEo2rOvhCnK\n"+
+"G2bwTRoT3jUh1QuGUbxnX4oxGmfZU/CSzr4tYdULhFGlZ5/HrN80wOTXBN59TA67nj+Maj17\n"+
+"qeCk1PGctqepEddbCaPayr4zTcAaHcOVkaGQtx8r5W+MahBn4StcfVspEeemmY+RiGsuxfwB\n"+
+"86YSCNDHTtAAAAAASUVORK5CYII="
if(check != buf.toBase64()){
console.log("TEST FAILED");
Please sign in to comment.
Something went wrong with that request. Please try again.