JSFiddle - React, Tailwind, and code Playground

by ocorpening

HTML

<canvas id="canvasContainer">
</canvas>
<p>X coordinate: <span id="xcoor"></span>
<p>Y coordinate: <span id="ycoor"></span>

CSS

#canvasContainer
{
    width: 600px;
    height: 200px;
    background-color: white;
    border:1px solid black;
}

JavaScript

var canvas = document.getElementById("canvasContainer");
var context = canvas.getContext('2d');
var image = new Image();
var clearImage = new Image();
clearImage.src = "http://i45.tinypic.com/339r1ir.jpg";
var x=0;
var y=0;
image.onload = function()
{
    context.drawImage(image, x, y);
};
image.src = 'http://i46.tinypic.com/343rqdu.png';
var timer = self.setInterval(function()
{
    move_image();
}, 100);

function move_image()
{
    context.drawImage(clearImage, x, y);
    x += 2;
    y += 2;
    if (y>200)
    {
        timer = window.clearInterval(timer);
        return;
    }
    context.drawImage(image, x, y);
    document.getElementById("xcoor").innerHTML = x;
    document.getElementById("ycoor").innerHTML = y;
}