JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://intridea.github.com/sketch.js/lib/sketch.js"></script>
<body>
    <div data-role="fieldcontain">
    <a href="http://www1.plymouth.ac.uk/disability/Documents/Tulips.jpg">
        <img src="http://www1.plymouth.ac.uk/disability/Documents/Tulips.jpg" width="150" height="100" />
        <span class="background">Change background</span>
    </a><br><br>
    <a href="http://2.bp.blogspot.com/-03LnaUK9Ud8/TcZC3knAoZI/AAAAAAAAAxc/QRm7Pp5cx-o/s400/Penguins.jpg">
        <img src="http://2.bp.blogspot.com/-03LnaUK9Ud8/TcZC3knAoZI/AAAAAAAAAxc/QRm7Pp5cx-o/s400/Penguins.jpg" width="150" height="100" />
        <span class="background">Change background</span>
    </a><br><br>
    </div>
    <br><br><br>
        <canvas id="simple_sketch" style="border: 2px solid black;"></canvas>

JavaScript

var winwidth = 640;
var winheight = 480;
$('#simple_sketch').attr('width', winwidth).attr('height', winheight);
$('#simple_sketch').sketch();
$('.background').on('click', function(event) {
    event.preventDefault();
    var imgurl = $(this).parent().attr('href');
    var n = imgurl.split('/');
    var size = n.length;
    var file = '../webkort/' + n[size - 1];
    var sigCanvas = document.getElementById('simple_sketch');
    var context = sigCanvas.getContext('2d');
    var imageObj = new Image();
    imageObj.onload = function() {
        console.log('onload');
        context.drawImage(this, 0, 0,sigCanvas.width,sigCanvas.height);
    };
    imageObj.src = imgurl;
    alert('changing background');
});