JSFiddle - React, Tailwind, and code Playground

by claykaboom

HTML

<canvas id="myCanvas" width="500" height="500" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<button onclick="moveUp();">do</button>
<button onclick="moveDown();">doDown</button>
<button onclick="moveLeft();">&lt;</button>
<button onclick="moveRight();">&gt;</button>

JavaScript

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var distance  =10;
var interval = 1000;

ctx.moveTo(0,0);

function draw()
{
ctx.lineTo(currentLeft,currentTop);
ctx.stroke();
}

$().ready(move);


var currentTop = 100;
var currentLeft = 100;

var directionTop = 0;
var directionLeft = 0;

function move()
{
setTimeout(move,interval);
currentTop += (directionTop * distance);
currentLeft += (directionLeft * distance);
 
draw();
}


function moveUp()
{

directionTop =-1;
directionLeft = 0;

}


function moveDown()
{
directionTop = 1;
directionLeft = 0;


}
function moveLeft()
{
directionTop = 0;
directionLeft = -1;


}
function moveRight()
{
directionTop = 0;
directionLeft = +1;


}