JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE HTML>
<html>
    <head>
    </head>
    <body>
        <canvas id="myCanvas" width="1003" height="914"></canvas>
    </body>
</html>

JavaScript

$(function() {
    var ctx, canvas, img1, img2;

    img1 = new Image();
    img1.src = "http://habrahabr.ru/i/lock.gif";

    img2 = new Image();
    img2.src = "http://habrahabr.ru/i/icon_asterisk_16.png";

    canvas = document.getElementById('myCanvas');
    ctx = canvas.getContext('2d');

    canvas.onclick = function(e) {
        draw({
            x: e.pageX - this.offsetLeft,
            y: e.pageY - this.offsetTop
        });
    };

    function draw(mouse) {
        img = mouse.x > mouse.y ? img1 : img2;
        ctx.drawImage(img, mouse.x, mouse.y);
    }
});