imgur api paper working random image NO DRAWING private

Fully working example NEED TO IMPLEMENT CORS SUPPORT FOR CANVAS.TODATAURL

by Nick Hulea

HTML

<script src="http://cdn.eyahuska.com/papernew.js"></script>
<canvas resize="true" id="mycanvas"></canvas>
<div id="button">click</div>
<script type="text/paperscript" canvas="mycanvas">
    var r;
    var path;
    var preloadAmount = 5;
    var cache = [];
    var imgurcache = [];
    var resultcache = [];
    var rArray = [];
    var raster;
    var background;
    var value = 1;
    var imagesrc;
    var imagesrcs;
    var autoShowNext = false;

    function extractToken(hash) {
        var match = hash.match(/access_token=(\w+)/);
        return !!match && match[1];
    }
    var num = Math.floor(Math.random() * 10); // 0...6
    var token = extractToken(document.location.hash);
    var clientId = 'b144351ffb05838';
    var auth;
    if (token) authorization = 'Bearer ' + token;
    else authorization = 'Client-ID ' + clientId;
    $.ajax({
        url: 'https://api.imgur.com/3/gallery/random/random/page=' + num,
        method: 'GET',
        headers: {
            Authorization: authorization,
            Accept: 'application/json'
        },
        crossDomain: true,
        data: {
            image: localStorage.dataBase64,
            type: 'base64'
        },
        beforeSend: function() {
            $('#preloader').css('display', 'block');
        },
        success: handleData
    });

    function handleData(result) {
        $.each(result.data, function(idx, image) {
            if (result.data[idx].animated === false) {
                if (result.data[idx].is_album === false) {
                    var rimgur = image.link;
                    imgurcache.push({
                        source: rimgur,
                        position: view.center,
                        size: view.bounds
                    });


                }
            }

        });
        preload();
        background = new Raster(imgurcache[0].source);
        background.position = view.center;
        background.size = view.bounds;
        background.on('load',...

CSS

canvas {
    width:100%;
    overflow:hidden;
    position:absolute;
    top:0;
    left:0;
    margin-top:50px;
    cursor:pointer;
}
#button {
    width:10%;
    overflow:hidden;
    position:absolute;
    top:0;
    left:0;
    background-color:#666;
    color:#fff;
    padding:10px;
}
#button:hover {
    background-color:#000;
    cursor:pointer;
}

JavaScript

$("#button").on("click", function () {
    var img = document.createElement('img');
    var canvas = document.getElementById('mycanvas');
    var url = canvas.toDataURL(); // Read succeeds, canvas won't be dirty
    img.crossOrigin = '';
    img.src = url;
});
/* other button does not load with img.onload
$("#button").on("click", function () {
    var img = document.createElement('img');
    img.onload = function (e) {
            var canvas = document.getElementById('mycanvas');
            var imageUrl = canvas.toDataURL("image/jpeg");
               console.log('hi');
    };
    img.crossOrigin = '';
    img.src = imageUrl;
    console.log(img);
})             
*/