kineticjs, local svg, drawHitFromCache, Internet Explorer 10 SecurityError

Question

I took standard drawHitFromCache demo (http://www.html5canvastutorials.com/kineticjs/html5-canvas-pixel-detection-with-kineticjs/) , and replaced one of images with .svg image (gray polygon) .

live demo : http://preview.yw.sk/kineticDrawHit/

source : http://preview.yw.sk/kineticDrawHit/kineticDrawHitSvg.rar

fiddle : http://jsfiddle.net/5cpyj/ - but it will not work since of local images need.

So only thing i changed is src to svg image and added 'drawHitFromCache', it works good in chromefirefox, but in internet explorer i get :

Kinetic warning: Unable to draw hit graph from cached scene canvas. SecurityError 

but i use local image (monkey.svg) no external resource, why it pops SecurityError ? Since of error image is drawn but does not react on mouse enter. With png files its all right.

Answer 1

jq.browser - was removed from jquery, its now as plugin to jquery , + you need canvg library fo do the magic . For canvg you need at leat 207 revision with fixed draw bug . https://code.google.com/p/canvg/source/detail?r=207 , can download latest with svn installed (http://canvg.googlecode.com/svn/trunk/)

Solution to security error in warious browsers IE10+ , Safari, Ipad etc, solution use canvg to make png images for current resolution from svg images .

var pngFallbackEnabled = null;
Project.pngFallBackCheck = function () {
    if (pngFallbackEnabled == null) {
        if (typeof enableSvgPngFallback != 'undefined' && enableSvgPngFallback == true && typeof jq.browser != 'undefined' && (jq.browser.mobile == true || jq.browser.msie == true || jq.browser.mozilla == true)) {
            pngFallbackEnabled = true;
            console.log('Png fall-back enabled');
        } else {
            pngFallbackEnabled = false;
        }
    }
    return pngFallbackEnabled;
};


var cachedPngImages = [];
var currentGameCanvasRatio = null;
/** Require Canvg library*/
Project.createPngImageFromSvgImage = function (svgLink, width, height, cacheIndex) {

    var extension = svgLink.split('.').pop();
    if (extension == "png" || extension == "jpg" || extension == "gif" || extension == "jpeg" || extension == "gif") {
        return svgLink;
    }

    if (typeof cacheIndex != 'undefined' && typeof cachedPngImages[cacheIndex] != 'undefined') {
        return cachedPngImages[cacheIndex];
    }

    var canvas = document.getElementById("pngDrawerCanvas");
    var canvasContext = canvas.getContext('2d');

    if (canvas == null) {
        var canvasElement = document.createElement('canvas');
        canvasElement.setAttribute("id", "pngDrawerCanvas");
        canvasElement.setAttribute("width", "200");
        canvasElement.setAttribute("height", "200");
        canvasElement.setAttribute("style", "display: none");
        document.body.appendChild(canvasElement);
        canvas = document.getElementById("pngDrawerCanvas");
    }

    if(currentGameCanvasRatio == null){
        currentGameCanvasRatio = window.module.canvas.getCurrentRatio(); /*custom function for ratio by current screen resolution*/
    }

    var imageWidth = Math.floor(width * currentGameCanvasRatio);
    var imageHeight = Math.floor(width * currentGameCanvasRatio);

    canvas.width = imageWidth;
    canvas.height = imageHeight;
    jq('#pngDrawerCanvas').css('width', imageWidth);
    jq('#pngDrawerCanvas').css('height', imageHeight);

    //canvg('pngDrawerCanvas', svgLink, 0, 0);
    canvasContext.drawSvg(svgLink, 0, 0, imageWidth, imageHeight);

    var img = canvas.toDataURL("image/png");

    if (typeof cacheIndex != 'undefined') {
        cachedPngImages[cacheIndex] = img;
    }

    return img;
};