<!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>