JSFiddle - React, Tailwind, and code Playground

by Jon-Carlos Rivera

HTML

<canvas id="canvas" width=600 height=760></canvas>
<img id="image1" src="http://placehold.it/50x50.png" alt="box">

CSS

img { display:none;

JavaScript

var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
   
	  var canvasOffset = $("#canvas").offset();
        var offsetX = canvasOffset.left;
        var offsetY = canvasOffset.top;

        // animation variables
        var currentX = 10;
        var currentY = 10;
        var frameCount = 60;
        var timer;
        var points;
        var currentFrame;
	    var img=document.getElementById("image1");
	    var angleDegrees = 0;
	
        function animate() {
            var point = points[currentFrame++];
            draw(point.x, point.y, point.angle);
			
            // refire the timer until out-of-points
            if (currentFrame < points.length) {
                timer = setTimeout(animate, 1000 / 60);
            }
			
        }

        function linePoints(x1, y1, x2, y2, frames) {
            var dx = x2 - x1;
            var dy = y2 - y1;
            var aEnd = Math.PI * 2;
            var length = Math.sqrt(dx * dx + dy * dy);
            var incrementX = dx / frames;
            var incrementY = dy / frames;
            var incrementA = aEnd / frames;
            var a = new Array();

            a.push({
                x: x1,
                y: y1
            });
            for (var frame = 0; frame < frames - 1; frame++) {
                a.push({
                    x: x1 + (incrementX * frame),
                    y: y1 + (incrementY * frame),
                    angle: incrementA * frame
                });
            }
            a.push({
                x: x2,
                y: y2,
                angle: aEnd
            });
            return (a);
        }

        function draw(x, y, angle) {
          clearCanvas(ctx, canvas);

          ctx.save(); // Save coordinte system
          ctx.translate(x, y); // Translate moves the center of the canvas to x, y
          ctx.rotate(angle);   // Rotate rotaes around the center of the canvas
          ctx.drawImage(img, -(img.width/2),...