JSFiddle - React, Tailwind, and code Playground

by Ben Watts

HTML

<canvas id="myCanvas" width="400" height="400"></canvas>

JavaScript

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

var Bear = function(xSet, ySet)
{
    this.XPos = xSet;
    this.YPos = ySet;
}

Bear.prototype.updatePosition = function(xValue, yValue)
{
    this.XPos += xValue;
    this.YPos += yValue;
}

var bear = new Bear(0,0);

setInterval( function()
            {
    ctx.fillStyle = "#000";
    ctx.fillRect(0,0,c.width,c.height);
    ctx.fillStyle = "#0F0";
    ctx.fillRect(bear.XPos, bear.YPos, 50,50);
    
    bear.updatePosition(0.2, 0.4);
} ,1);