canvas

JavaScript performance comparison

Test case created

Preparation code

<script src="//apps.zimodigital.com/gavrilovic/minikombinator/js/vendor/kinetic.js"></script>
 

Preparation code output

Test runner

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

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
1
var Freddie = function(prob, sol){

        try{

                var stage = new Kinetic.Stage({
                        container: "container",
                        width: 900,
                        height: 400
                });

                var problem = prob;
                var solution = sol;

                var snapGroup = new Kinetic.Group();
                var kobasicaLayer = new Kinetic.Layer();

                var plus = new Image();
                plus.src = '//apps.zimodigital.com/gavrilovic/minikombinator/images/gameScreen/plus.png';

                var minus = new Image();
                minus.src = '//apps.zimodigital.com/gavrilovic/minikombinator/images/gameScreen/minus.png';

                var puta = new Image();
                puta.src = '//apps.zimodigital.com/gavrilovic/minikombinator/images/gameScreen/puta.png';

                var jednako = new Image();
                jednako.src = '//apps.zimodigital.com/gavrilovic/minikombinator/images/gameScreen/jednako.png';

                var podijeljeno = new Image();
                podijeljeno.src = '//apps.zimodigital.com/gavrilovic/minikombinator/images/gameScreen/podijeljeno.png';

                var kobasicaV = new Image();
                kobasicaV.onload = function() {
                        //drawImage(this);
                };
                kobasicaV.src = '//apps.zimodigital.com/gavrilovic/minikombinator/images/gameScreen/kobasica-v.png';

                var kobasicaH = new Image();
                kobasicaH.onload = function() {
                        //drawImage(this);
                };
                kobasicaH.src = '//apps.zimodigital.com/gavrilovic/minikombinator/images/gameScreen/kobasica-h.png';


                var kobasica = new Kinetic.Image({
                        image: kobasicaV,
                        x: 20,
                        y: 250,
                        width: 9,
                        height: 75,
                        offset:[4,37],
                        draggable: true,
                        name: "kobasica",
                        id: "v",
                });

                // add cursor styling
                kobasica.on('mouseover', function() {
                        document.body.style.cursor = 'pointer';
                });

                kobasica.on('mouseout', function() {
                        document.body.style.cursor = 'default';
                });


                kobasicaLayer.add(kobasica);

               
                interval = 10;

                kobasica.on('dragmove',function(evt){
                        var pos = stage.getUserPosition(evt);
                        //console.log(snapGroup);
                        //console.log(snaps);
                        /*for(var i = 0; i < snaps.length;i++){
                               
                        }*/

                        //kobasicaLayer.draw()
                        var snap = snapGroup.getIntersections(pos.x,pos.y);
                        if(snap.length > 0) snapKobasica(snap[0]);
                })

                kobasica.on('dragend',function(){

                        var x = 0,y = 0;

                        if(kobasica.attrs.rotation === 0){

                                x = kobasica.attrs.x - offset.small;
                                y = kobasica.attrs.y;
                               
                        }else{

                                x = kobasica.attrs.x;
                                y = kobasica.attrs.y - offset.small;

                        }
                       
                        var position = snapGroup.getIntersections(x,y);
                       
                        if(position.length > 0){

                                positionName = position[0].attrs.name;
                                positionId = position[0].attrs.id;
                                checkSolution(positionName,positionId);
                               
                        }
                })
               
                //mapa pozicija kobasica za svaki broj
                var map = {
                        "0":[1,2,3,5,6,7],
                        "1":[6,7],
                        "2":[2,3,4,5,6],
                        "3":[3,4,5,6,7],
                        "4":[1,4,6,7],
                        "5":[1,3,4,5,7],
                        "6":[1,2,3,4,5,7],
                        "7":[1,3,6,7],
                        "8":[1,2,3,4,5,6,7],
                        "9":[1,3,4,5,6,7],
                };
                //pocetne koordinate za crtanje brojeva
                var startX = 10;
                var startY = 10;
                var lineLength = 75;
                var offset={
                        big:38,
                        small:5,
                }

        }catch(e){

                showErrorPage();
       
        }

        parseAndDrawString(problem);

        function snapKobasica(snapElement){
               
                x1 = snapElement.attrs.points[0].x;
                y1 = snapElement.attrs.points[0].y;
                x2 = snapElement.attrs.points[1].x;
                y2 = snapElement.attrs.points[1].y;

                console.log("x1:"+x1+" y1:"+y1+" x2:"+x2+" y2:"+y2);
                if(x1 - x2 === 0){
               
                        if(kobasica.attrs.id === "v"){
                                kobasica.setPosition(x1+5,y1+38);
                        }else{
                                kobasica.transitionTo({
                                        rotation:0,
                                        duration: 0.1,
                                });
                                kobasica.setPosition(x1+5,y1+38);
                                kobasica.setId("v");
                        }
               
                }else{

                        if(kobasica.attrs.id === "v"){
                                kobasica.transitionTo({
                                        rotation:Math.PI * 0.5,
                                        duration: 0.1,
                                })
                                kobasica.setPosition(x1+38,y1+5);
                                kobasica.setId("h");
                        }else{
                                kobasica.setPosition(x1+38,y1+5);
                        }

                }
        }

        //Parsa string i provjerava dali je svaki pojedini znak broj ili znak te poziva funkcije koje crtaju brojeve i znakove.
        function parseAndDrawString(string){

                for(i = 0; i < string.length; i++){
                        if(isNumber(string[i])) drawNumber(parseInt(string[i]));
                        else drawSign(string[i]);
                }

                stage.add(kobasicaLayer);
                stage.draw();

        }



        function isNumber(character){

                if(character === "0" || character === "1" || character === "2" || character === "3" || character === "4" || character === "5" || character === "6" || character === "7" || character === "8" || character === "9"){
                        return true;
                }else{
                        return false;
                }

        }


        function drawSign(character){

                switch(character){
                        case '+':
                                X = startX;
                                Y = startY;
                                       
                                drawImage(plus,X,Y,81,63,false);
                                break;

                        case '-':
                                X = startX;
                                Y = startY;
                                       
                                drawImage(minus,X,Y,52,14,false);
                                break;


                        case 'x':
                                X = startX;
                                Y = startY;
                                       
                                drawImage(puta,X,Y,70,74,false);
                                break;


                        case '/':
                                X = startX;
                                Y = startY;
                                       
                                drawImage(podijeljeno,X,Y,53,41,false);
                                break;


                        case '=':
                                X = startX;
                                Y = startY;
                                       
                                drawImage(jednako,X,Y,51,28,false);
                                break;

                }

                startX += 95;

        }


        function drawNumber(number){

                numberMap = map[number];

                addsnapGroup(number,numberMap,startX);

                for(j = 0; j < numberMap.length; j++){
                        switch(numberMap[j]){
                                case 1:
                                        X = startX;
                                        Y = startY;
                                       
                                        drawImage(kobasicaV,X,Y,9,75,false);

                                        break;
                               
                                case 2:
                                        X = startX;
                                        Y = startY + lineLength;

                                        drawImage(kobasicaV,X,Y,9,75,false);

                                        break;
                                case 3:
                                        X = startX;
                                        Y = startY;

                                        drawImage(kobasicaH,X,Y,75,9,false);

                                        break;
                               
                                case 4:
                                        X = startX;
                                        Y = startY + lineLength;

                                        drawImage(kobasicaH,X,Y,75,9,false);

                                        break;

                                case 5:
                                        X = startX;
                                        Y = startY + 2 * lineLength;

                                        drawImage(kobasicaH,X,Y,75,9,false);

                                        break;
                               
                                case 6:
                                        X = startX + lineLength;
                                        Y = startY;

                                        drawImage(kobasicaV,X,Y,9,75,false);

                                        break;
                               
                                case 7:
                                        X = startX + lineLength;
                                        Y = startY + lineLength;

                                        drawImage(kobasicaV,X,Y,9,75,false);

                                        break;
                        }
                }

                startX += 95;

        }

        function addsnapGroup(number,numberMap,X){

                mapAll = [1,2,3,4,5,6,7];

                var snapMap = diff(mapAll,numberMap);
                index = number;

                for(k=0; k < snapMap.length; k++){

                        switch(snapMap[k]){
                                case 1:
                                        X1 = X;
                                        Y1 = startY;
                                        X2 = X;
                                        Y2 = Y1 + lineLength;
                                       
                                        addLine(X1,Y1,X2,Y2,"1",index);

                                        break;
                               
                                case 2:
                                        X1 = X;
                                        Y1 = startY + lineLength;
                                        X2 = X;
                                        Y2 = Y1 + lineLength;
                                       
                                        addLine(X1,Y1,X2,Y2,"2",index);

                                        break;
                                case 3:
                                        X1 = X;
                                        Y1 = startY;
                                        X2 = X + lineLength;
                                        Y2 = Y1;       
                                       
                                        addLine(X1,Y1,X2,Y2,"3",index);

                                        break;
                               
                                case 4:
                                        X1 = X;
                                        Y1 = startY + lineLength;
                                        X2 = X + lineLength;
                                        Y2 = Y1;       
                                       
                                        addLine(X1,Y1,X2,Y2,"4",index);

                                        break;

                                case 5:
                                        X1 = X;
                                        Y1 = startY + 2 * lineLength;
                                        X2 = X + lineLength;
                                        Y2 = Y1;       
                                       
                                        addLine(X1,Y1,X2,Y2,"5",index);

                                        break;
                               
                                case 6:
                                        X1 = X + lineLength;
                                        Y1 = startY;
                                        X2 = X1;
                                        Y2 = Y1 + lineLength;  
                                       
                                        addLine(X1,Y1,X2,Y2,"6",index);

                                        break;
                               
                                case 7:
                                        X1 = X + lineLength;
                                        Y1 = startY + lineLength;
                                        X2 = X1;
                                        Y2 = Y1 + lineLength;  
                                       
                                        addLine(X1,Y1,X2,Y2,"7",index);

                                        break;
                        }

                }
                snaps = snapGroup.getChildren();
                /*for(var i = 0; i < s.length; i++){
                        snaps.push(s[i].points);
                }*/

                kobasicaLayer.add(snapGroup);
                console.log(snaps);
               
        }


        function addLine(X1,Y1,X2,Y2,name,id){

                var Line = new Kinetic.Line({
                        points: [X1, Y1, X2, Y2],
                        stroke: 'blue',
                        strokeWidth: 9,
                        name: name,
                        id:id,
                });

                snapGroup.add(Line);

        }


        function drawImage(imageObj,X,Y,W,H,draggable) {

                        var kobasicaImg = new Kinetic.Image({
                          image: imageObj,
                          x: X,
                          y: Y,
                          width: W,
                          height: H,
                          draggable: draggable,
                          name: "ime",
                        });

                        kobasicaLayer.add(kobasicaImg);

                        kobasicaLayer.draw();
                       
        }


        function checkSolution(positionName,oldNumber ){
               
                console.log("old number: " + oldNumber);
                for(var p = 0; p < problem.length; p++){

                        if(problem[p] !== solution[p]){
                                solutionNumber = solution[p];
                        }

                }

                newNumberMap = map[oldNumber].slice(0);
                newNumberMap.push(parseInt(positionName));
                newNumberMap.sort();
                console.log("newNumberMap:"+newNumberMap);
                console.log("map solution:"+map[solutionNumber]);
                if(map[solutionNumber].toString() === newNumberMap.toString())
                        alert("TOČNO!!!")

        }


        function diff(array1,array2){

                array = [];

                for(a = 0; a < array1.length; a++){
                        if(array2.indexOf(array1[a]) === -1){
                                array.push(array1[a]);
                        }
                }

                return array;

        }
}
pending…
2
// async test
var Freddie = function(prob, sol){

        try{

                var stage = new Kinetic.Stage({
                        container: "container",
                        width: 900,
                        height: 400
                });

                var problem = prob;
                var solution = sol;

                var snapGroup = new Kinetic.Group();
                var kobasicaLayer = new Kinetic.Layer();

                var plus = new Image();
                plus.src = '//apps.zimodigital.com/gavrilovic/minikombinator/images/gameScreen/plus.png';

                var minus = new Image();
                minus.src = '//apps.zimodigital.com/gavrilovic/minikombinator/images/gameScreen/minus.png';

                var puta = new Image();
                puta.src = '//apps.zimodigital.com/gavrilovic/minikombinator/images/gameScreen/puta.png';

                var jednako = new Image();
                jednako.src = '//apps.zimodigital.com/gavrilovic/minikombinator/images/gameScreen/jednako.png';

                var podijeljeno = new Image();
                podijeljeno.src = '//apps.zimodigital.com/gavrilovic/minikombinator/images/gameScreen/podijeljeno.png';

                var kobasicaV = new Image();
                kobasicaV.onload = function() {
                        //drawImage(this);
                };
                kobasicaV.src = '//apps.zimodigital.com/gavrilovic/minikombinator/images/gameScreen/kobasica-v.png';

                var kobasicaH = new Image();
                kobasicaH.onload = function() {
                        //drawImage(this);
                };
                kobasicaH.src = '//apps.zimodigital.com/gavrilovic/minikombinator/images/gameScreen/kobasica-h.png';


                var kobasica = new Kinetic.Image({
                        image: kobasicaV,
                        x: 20,
                        y: 250,
                        width: 9,
                        height: 75,
                        offset:[4,37],
                        draggable: true,
                        name: "kobasica",
                        id: "v",
                });

                // add cursor styling
                kobasica.on('mouseover', function() {
                        document.body.style.cursor = 'pointer';
                });

                kobasica.on('mouseout', function() {
                        document.body.style.cursor = 'default';
                });


                kobasicaLayer.add(kobasica);

               
                interval = 10;

                kobasica.on('dragmove',function(evt){
                        var pos = stage.getUserPosition(evt);
                        //console.log(snapGroup);
                        //console.log(snaps);
                        /*for(var i = 0; i < snaps.length;i++){
                               
                        }*/

                        //kobasicaLayer.draw()
                        //var snap = snapGroup.getIntersections(pos.x,pos.y);
                        //if(snap.length > 0) snapKobasica(snap[0]);
                })

                kobasica.on('dragend',function(){

                        var x = 0,y = 0;

                        if(kobasica.attrs.rotation === 0){

                                x = kobasica.attrs.x - offset.small;
                                y = kobasica.attrs.y;
                               
                        }else{

                                x = kobasica.attrs.x;
                                y = kobasica.attrs.y - offset.small;

                        }
                       
                        var position = snapGroup.getIntersections(x,y);
                       
                        if(position.length > 0){

                                positionName = position[0].attrs.name;
                                positionId = position[0].attrs.id;
                                checkSolution(positionName,positionId);
                               
                        }
                })
               
                //mapa pozicija kobasica za svaki broj
                var map = {
                        "0":[1,2,3,5,6,7],
                        "1":[6,7],
                        "2":[2,3,4,5,6],
                        "3":[3,4,5,6,7],
                        "4":[1,4,6,7],
                        "5":[1,3,4,5,7],
                        "6":[1,2,3,4,5,7],
                        "7":[1,3,6,7],
                        "8":[1,2,3,4,5,6,7],
                        "9":[1,3,4,5,6,7],
                };
                //pocetne koordinate za crtanje brojeva
                var startX = 10;
                var startY = 10;
                var lineLength = 75;
                var offset={
                        big:38,
                        small:5,
                }

        }catch(e){

                showErrorPage();
       
        }

        parseAndDrawString(problem);

        function snapKobasica(snapElement){
               
                x1 = snapElement.attrs.points[0].x;
                y1 = snapElement.attrs.points[0].y;
                x2 = snapElement.attrs.points[1].x;
                y2 = snapElement.attrs.points[1].y;

                console.log("x1:"+x1+" y1:"+y1+" x2:"+x2+" y2:"+y2);
                if(x1 - x2 === 0){
               
                        if(kobasica.attrs.id === "v"){
                                kobasica.setPosition(x1+5,y1+38);
                        }else{
                                kobasica.transitionTo({
                                        rotation:0,
                                        duration: 0.1,
                                });
                                kobasica.setPosition(x1+5,y1+38);
                                kobasica.setId("v");
                        }
               
                }else{

                        if(kobasica.attrs.id === "v"){
                                kobasica.transitionTo({
                                        rotation:Math.PI * 0.5,
                                        duration: 0.1,
                                })
                                kobasica.setPosition(x1+38,y1+5);
                                kobasica.setId("h");
                        }else{
                                kobasica.setPosition(x1+38,y1+5);
                        }

                }
        }

        //Parsa string i provjerava dali je svaki pojedini znak broj ili znak te poziva funkcije koje crtaju brojeve i znakove.
        function parseAndDrawString(string){

                for(i = 0; i < string.length; i++){
                        if(isNumber(string[i])) drawNumber(parseInt(string[i]));
                        else drawSign(string[i]);
                }

                stage.add(kobasicaLayer);
                stage.draw();

        }



        function isNumber(character){

                if(character === "0" || character === "1" || character === "2" || character === "3" || character === "4" || character === "5" || character === "6" || character === "7" || character === "8" || character === "9"){
                        return true;
                }else{
                        return false;
                }

        }


        function drawSign(character){

                switch(character){
                        case '+':
                                X = startX;
                                Y = startY;
                                       
                                drawImage(plus,X,Y,81,63,false);
                                break;

                        case '-':
                                X = startX;
                                Y = startY;
                                       
                                drawImage(minus,X,Y,52,14,false);
                                break;


                        case 'x':
                                X = startX;
                                Y = startY;
                                       
                                drawImage(puta,X,Y,70,74,false);
                                break;


                        case '/':
                                X = startX;
                                Y = startY;
                                       
                                drawImage(podijeljeno,X,Y,53,41,false);
                                break;


                        case '=':
                                X = startX;
                                Y = startY;
                                       
                                drawImage(jednako,X,Y,51,28,false);
                                break;

                }

                startX += 95;

        }


        function drawNumber(number){

                numberMap = map[number];

                addsnapGroup(number,numberMap,startX);

                for(j = 0; j < numberMap.length; j++){
                        switch(numberMap[j]){
                                case 1:
                                        X = startX;
                                        Y = startY;
                                       
                                        drawImage(kobasicaV,X,Y,9,75,false);

                                        break;
                               
                                case 2:
                                        X = startX;
                                        Y = startY + lineLength;

                                        drawImage(kobasicaV,X,Y,9,75,false);

                                        break;
                                case 3:
                                        X = startX;
                                        Y = startY;

                                        drawImage(kobasicaH,X,Y,75,9,false);

                                        break;
                               
                                case 4:
                                        X = startX;
                                        Y = startY + lineLength;

                                        drawImage(kobasicaH,X,Y,75,9,false);

                                        break;

                                case 5:
                                        X = startX;
                                        Y = startY + 2 * lineLength;

                                        drawImage(kobasicaH,X,Y,75,9,false);

                                        break;
                               
                                case 6:
                                        X = startX + lineLength;
                                        Y = startY;

                                        drawImage(kobasicaV,X,Y,9,75,false);

                                        break;
                               
                                case 7:
                                        X = startX + lineLength;
                                        Y = startY + lineLength;

                                        drawImage(kobasicaV,X,Y,9,75,false);

                                        break;
                        }
                }

                startX += 95;

        }

        function addsnapGroup(number,numberMap,X){

                mapAll = [1,2,3,4,5,6,7];

                var snapMap = diff(mapAll,numberMap);
                index = number;

                for(k=0; k < snapMap.length; k++){

                        switch(snapMap[k]){
                                case 1:
                                        X1 = X;
                                        Y1 = startY;
                                        X2 = X;
                                        Y2 = Y1 + lineLength;
                                       
                                        addLine(X1,Y1,X2,Y2,"1",index);

                                        break;
                               
                                case 2:
                                        X1 = X;
                                        Y1 = startY + lineLength;
                                        X2 = X;
                                        Y2 = Y1 + lineLength;
                                       
                                        addLine(X1,Y1,X2,Y2,"2",index);

                                        break;
                                case 3:
                                        X1 = X;
                                        Y1 = startY;
                                        X2 = X + lineLength;
                                        Y2 = Y1;       
                                       
                                        addLine(X1,Y1,X2,Y2,"3",index);

                                        break;
                               
                                case 4:
                                        X1 = X;
                                        Y1 = startY + lineLength;
                                        X2 = X + lineLength;
                                        Y2 = Y1;       
                                       
                                        addLine(X1,Y1,X2,Y2,"4",index);

                                        break;

                                case 5:
                                        X1 = X;
                                        Y1 = startY + 2 * lineLength;
                                        X2 = X + lineLength;
                                        Y2 = Y1;       
                                       
                                        addLine(X1,Y1,X2,Y2,"5",index);

                                        break;
                               
                                case 6:
                                        X1 = X + lineLength;
                                        Y1 = startY;
                                        X2 = X1;
                                        Y2 = Y1 + lineLength;  
                                       
                                        addLine(X1,Y1,X2,Y2,"6",index);

                                        break;
                               
                                case 7:
                                        X1 = X + lineLength;
                                        Y1 = startY + lineLength;
                                        X2 = X1;
                                        Y2 = Y1 + lineLength;  
                                       
                                        addLine(X1,Y1,X2,Y2,"7",index);

                                        break;
                        }

                }
                snaps = snapGroup.getChildren();
                /*for(var i = 0; i < s.length; i++){
                        snaps.push(s[i].points);
                }*/

                kobasicaLayer.add(snapGroup);
                console.log(snaps);
               
        }


        function addLine(X1,Y1,X2,Y2,name,id){

                var Line = new Kinetic.Line({
                        points: [X1, Y1, X2, Y2],
                        stroke: 'blue',
                        strokeWidth: 9,
                        name: name,
                        id:id,
                });

                snapGroup.add(Line);

        }


        function drawImage(imageObj,X,Y,W,H,draggable) {

                        var kobasicaImg = new Kinetic.Image({
                          image: imageObj,
                          x: X,
                          y: Y,
                          width: W,
                          height: H,
                          draggable: draggable,
                          name: "ime",
                        });

                        kobasicaLayer.add(kobasicaImg);

                        kobasicaLayer.draw();
                       
        }


        function checkSolution(positionName,oldNumber ){
               
                console.log("old number: " + oldNumber);
                for(var p = 0; p < problem.length; p++){

                        if(problem[p] !== solution[p]){
                                solutionNumber = solution[p];
                        }

                }

                newNumberMap = map[oldNumber].slice(0);
                newNumberMap.push(parseInt(positionName));
                newNumberMap.sort();
                console.log("newNumberMap:"+newNumberMap);
                console.log("map solution:"+map[solutionNumber]);
                if(map[solutionNumber].toString() === newNumberMap.toString())
                        alert("TOČNO!!!")

        }


        function diff(array1,array2){

                array = [];

                for(a = 0; a < array1.length; a++){
                        if(array2.indexOf(array1[a]) === -1){
                                array.push(array1[a]);
                        }
                }

                return array;

        }
}
pending…

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:

0 comments

Add a comment