binding source to imageobject dynamically in html5 canvas

See more:

HTML5

Canvas

string[] ppm1 = Directory.GetFiles(saveloc, "*.png", SearchOption.AllDirectories);
                ns.NumericComparer ns = new ns.NumericComparer();
                Array.Sort(ppm1, ns);

In this part of code am storing files location in an array.using break points i've checked that ppm1[] array has all the file names.

<script>
             var canvas = document.getElementById('myCanvas');
             var context = canvas.getContext('2d');
             var imageObj = new Image();

             imageObj.onload = function () {
                 context.drawImage(imageObj, 69, 50);
             };
            
             imageObj.src = "<% = ppm1[0] %>";
    </script> 

but in the aspx page inside the script it shows me ppm1[0] is null.how can i get the c# Arrays in javascript

how can i get the images path in the aspx page from c# code behind any code snippets,links or forums to resolve my problem.
thanks in advance.