locked
Chrome - Canvas Pushpin is not working RRS feed

  • Question

  • Hi,,

    Canvas pushpin is not working in IE8 and Crome but it is working fine in Fire fox

    Following is the code .when i alert context it is giving Null value for first time but when i generate map again it works fine

    Plz help me..

    pin = new CanvasPushpin(new Microsoft.Maps.Location(resoLat,resoLang), function (pin, context) {
                 $('#hidden').focus();
                    alert(context);
                img = new Image();
                img.src = base_url+'images/bluearrow.png';
                img.onload = function () {
                    //alert(context);
                    if (context) {
                        //alert("in");
                        var angle = calculateBearing(n1, n2,resoLat,resoLang);
                        //Calculate the new dimensions of the the canvas after the image is rotated
                        var dx = Math.abs(Math.cos(angle * Math.PI / 180));
                        var dy = Math.abs(Math.sin(angle * Math.PI / 180));                              
                        var width = Math.round(img.width * dx + img.height * dy);
                        var height = Math.round(img.width * dy + img.height * dx);
                        
                        //Set the dimensions of the canvas
                        context.width = width;
                        context.height = height;
                        
                        //Offset the canvas such that we will rotate around the center of our arrow
                        //context.translate(width * 0.5, height * 0.5);
                        //context.translate(width * 0.5, height * 0.5);
                        //Rotate the canvas by the desired heading
                        //alert(pin.Metadata.heading * Math.PI / 180);
                        //context.rotate(90* Math.PI / 180);

                        //Return the canvas offset back to it's original position
                    //    context.translate(-img.width * 0.5, -img.height * 0.5);

                        //Draw the arrow image
                    //    context.drawImage(img, -15,23);
                        //context.drawImage(img,0,0);
                        context.save();
                        context.translate(5,30);
                        

                        context.translate(img.width/2, img.height/2);
                        
                        
                        context.rotate(angle * Math.PI / 180);
                        context.drawImage(img, -img.width/2, -img.height/2);
                        context.restore();                            //context.drawImage(img,0,35);
                    }else{
                        
                        //$('#mapButton').click();
                    }
                    
                };
            });

    Wednesday, July 2, 2014 11:09 AM

Answers

  • IE8 does not support the HTML5 canvas. You can however add support by using the Explorer Canvas: http://code.google.com/p/explorercanvas/

    <!-- Use the excanvas control to add support for the HTML5 canvas element in IE7 and IE8 -->
    <!--[if lt IE 9]><script type="text/javascript" src="scripts/excanvas.min.js"></script><![endif]-->

    This code does work perfectly fine on Google Chrome when testing it.


    http://rbrundritt.wordpress.com

    Wednesday, July 2, 2014 1:07 PM