git @ Cat's Eye Technologies The-Dipple / master javascript / jsonp-clipart.html
master

Tree @master (Download .tar.gz)

jsonp-clipart.html @masterraw · history · blame

<!DOCTYPE html>
<!--
SPDX-FileCopyrightText: Chris Pressey, the original author of this work, has dedicated it to the public domain.
For more information, please refer to <https://unlicense.org/>
SPDX-License-Identifier: Unlicense
-->
<head>
  <meta charset="utf-8">
  <title>OpenClipart through JSONP proxy demo</title>
  <style>
#canvas { border: 1px solid blue; }
#status { background: #000060; color: white }
  </style>
</head>
<body>

<h1>OpenClipart through JSONP proxy demo</h1>

<p id="status"></p>

<canvas id="canvas" width="600" height="400">
Your browser doesn't support displaying an HTML5 canvas.
</canvas>

</body>
<script type="text/javascript">

/* The Elements */
var status = document.getElementById('status');
var canvas = document.getElementById('canvas');

/* The Image */
var img = new Image();
var drawOK = false;
img.onload = function() {
    drawOK = true;
};

/* The Renderer */
tick = 0;
var draw = function() {
    var ctx = canvas.getContext('2d');
    ctx.fillStyle = 'rgb(100,' + (tick % 256) + ',70)';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    if (drawOK) {
        var x = Math.floor(((Math.cos(tick / 100) + 1) / 2) * (canvas.width - img.width));
        var y = Math.floor(((Math.sin(tick / 100) + 1) / 2) * (canvas.height - img.height));
        ctx.drawImage(img, x, y);
    }
    tick += 1;
};

/* The JSONP */
var glue = function(data) {
    img.src = data.payload[0].svg.png_thumb;
    status.innerHTML = data.payload[0].svg.png_thumb;
};

query = 'tofu';

script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'http://jsonp.jit.su/?callback=glue&url=' + 
             'http://openclipart.org/search/json/?query=' + query + '&page=1&amount=1';
document.getElementsByTagName("head")[0].appendChild(script);

/* The Animator */
var animFrame = function(time) {
    draw();
    request = requestAnimationFrame(animFrame);
};
request = requestAnimationFrame(animFrame);

</script>