JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css">
<h1>Test</h1>
Rotate:
<div id="rotat"></div>Resize:
<div id="resize"></div>
<br>
<input type="hidden" value="0" id="img_resize">
<canvas id="stcanvas" width="400" height="550" style="background-color:#eee"></canvas>

JavaScript

function buildcanvas() {
    var stcanvas = document.getElementById('stcanvas');
    var ctx = stcanvas.getContext('2d');

    make_pic(ctx);

}


// prepare image to fit canvas;

function prep_image() {
    pic_i = 400;
    xfact = pic_i / 400;

    return xfact;
}

function make_pic(ctx) {
    ctx.clearRect(0, 0, 400, 550);

    // Mask for clipping
    mask_image = new Image();
    mask_image.src = 'http://i.imgur.com/yOc0YHC.png';
    ctx.drawImage(mask_image, 0, 0);
    ctx.save();

    pic_image = new Image();
    pic_image.src = 'http://i.imgur.com/DVhVSH1.jpg';
    xfact = prep_image();

    var im_width = parseInt(pic_image.width + $('#resize').slider('value') / xfact);
    var im_height = parseInt(pic_image.height + $('#resize').slider('value') / xfact);
    // alert(im_width);
    ctx.translate(200, 275);
    ctx.rotate($('#rotat').slider('value') * Math.PI / 180);
    ctx.globalCompositeOperation = "source-in";
    ctx.drawImage(pic_image, -400 / 2, -550 / 2, im_width, im_height);
    ctx.restore();
}




$("#rotat").slider({
    value: 0,
    min: -180,
    max: 180,
    step: 1,
    slide: function () {
        buildcanvas();
    }

});

$("#resize").slider({
    value: 0,
    min: -150,
    max: 150,
    step: 1,
    slide: function (event, ui) {
        $('#img_resize').val(ui.value);
        buildcanvas();
    }

});
buildcanvas();