JSFiddle - React, Tailwind, and code Playground

by Mohit Jain

JavaScript

// JavaScript Document

    // Create the canvas
    var canvas = document.createElement("canvas");
    var ctx = canvas.getContext("2d");
    canvas.width = 512;
    canvas.height = 512;
    //draw canvas
    document.body.appendChild(canvas);
    var x=30;
    var y=30;

    var icon1 = new Object();
    icon1.id=1;
    icon1.selected=false;
    icon1.img1 = new Image();
    icon1.img1.onload = function() {
            ctx.drawImage(icon1.img1, 69, 50,x,y);
          };
    icon1.img1.src = 'http://icons.iconarchive.com/icons/vargas21/aquave-metal/512/Sample-icon.png';
   canvas.addEventListener('click', function(e) { 
        //add mouse tracking here
       console.log('inside canvas');
       var clickedX = e.pageX - this.offsetLeft;
       var clickedY = e.pageY - this.offsetTop;
        if (clickedX < x + 69 && clickedX > x && clickedY > y && clickedY < y + 50) {
            alert ('clicked');
        }
   }, false);