Is it setInterval? Canvas ImageData

programming web dev
1

My script runs fine in Safari on my developing machine, but slowly on the iPad.

In firefox you can declare the data using the function createImageData with the third Param as Data:

targetContext.createImageData(currentFrameWidth, currentFrameHeight, data);

This doesn’t seem to work in Safari so I had to do something that seems pretty inefficient:

for(var j= 0; j<currentPixelDataArray.length; j++)
            {
                    imageData.data[j] = currentPixelDataArray[j];
            }

This loops through about 6300 times per frame so that could be slowing it down.

I also have found that setInterval doesn’t seem to fire accurately if you set it for 33 milliseconds.

Does anyone have any ideas?

Source XML: http://benbart.com/ipad/canvas/xml/circle_animation.xml

<script>

var currentFrameCounter;
var allXMLFrames;
var fps;
var XMLCanvasLoop = true;
var targetContext;
var XMLCanvasInterval;

function loadXMLCanvas(filename, canvasPointer)
{
    targetContext = canvasPointer.getContext('2d');
    var   xhttp=new XMLHttpRequest();
    xhttp.open("GET",filename,false);
    xhttp.send("");
    xmlDoc=xhttp.responseXML;
    
    var XMLdocument = xmlDoc.getElementsByTagName("animation")[0];
    fps = XMLdocument.getAttribute("fps");
    canvasPointer.width = XMLdocument.getAttribute("width");
    canvasPointer.height = XMLdocument.getAttribute("height");
    allXMLFrames = XMLdocument.getElementsByTagName("frame");
    playXMLCanvas();
}

function playXMLCanvas()
{
    XMLCanvasInterval = setInterval(prepareFrameRender, 1000/fps);
    currentFrameCounter = 1;
}

function prepareFrameRender()
{
    if(currentFrameCounter<allXMLFrames.length)
    {
        renderFrame(currentFrameCounter);
        currentFrameCounter++;
    }
    else
    {
        if(XMLCanvasLoop == true)
        {
            currentFrameCounter=0;
            renderFrame(0);
            
        }
        else
        clearInterval(XMLCanvasInterval);
    }
    
}
    
function renderFrame(frameNumber)
{
    var currentFrameBitmaps = allXMLFrames[frameNumber].getElementsByTagName('bitmapData');
    
    for(var i = 0; i<currentFrameBitmaps.length; i++)
    {
        
            var currentFrameX = parseInt(currentFrameBitmaps*.getAttribute("x"));
            var currentFrameY = parseInt(currentFrameBitmaps*.getAttribute("y"));
            var currentFrameWidth = parseInt(currentFrameBitmaps*.getAttribute("width"));
            var currentFrameHeight = parseInt(currentFrameBitmaps*.getAttribute("height"));
            var currentPixelDataString = currentFrameBitmaps*.getAttribute("data");
            var currentPixelDataArray =  currentPixelDataString.split(",");
            
            var counterX = 0;
            var counterY  = 0;
            var targetPixelX = 0;
            var targetPixelY = 0;
            
            var imageData = targetContext.createImageData(currentFrameWidth, currentFrameHeight);
            
    
            for(var j= 0; j<currentPixelDataArray.length; j++)
            {
                    imageData.data[j] = currentPixelDataArray[j];
            }
            
            targetContext.putImageData(imageData, currentFrameX, currentFrameY );
    }
}

window.onload = function()
{
    var canvas = document.getElementById('xmlCanvasTest')  
    loadXMLCanvas("xml/circle_animation.xml", canvas);
}

</script>