JSFiddle - React, Tailwind, and code Playground

by Shishir Morshed

HTML

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

CSS

canvas
    {
      border: 1px solid black;
    }

JavaScript

$(document).ready(function () {
        var ctx = $("#MyCanvas")[0].getContext("2d"); // the "context" of the canvas that will be used (2D or 3D)
        var cw = 400; // width of the rectangular area
        var ch = 400; // height of the rectangular area
        var FieldImg = new Image(); // Image to be loaded and drawn on canvas
        var ImgNumb = 12; // Number of images that make up the movement
        var Fps = 30;
        init();
        function init() {
            FieldImg.onload = function() {
                ctx.drawImage(FieldImg,0, 0, 400, 232,0, 0, 400, 400);
            }
            FieldImg.src = "http://stress-detector.webid.biz/feed/189099468.jpg";
        }
    });