JSFiddle - React, Tailwind, and code Playground

by m1erickson

HTML

<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.0.1.min.js"></script>
<h4>Image downscaled to 25%</h4>
<div id="container"></div>
<h4>Original Image</h4>

CSS

body {
    padding:20px;
}
#container {
    border:solid 1px #ccc;
    margin-top: 10px;
    width:500px;
    height:350px;
}

JavaScript

var stage = new Kinetic.Stage({
    container: 'container',
    width: 500,
    height: 350
});
var layer = new Kinetic.Layer();
stage.add(layer);

var image1;

var img = new Image();
img.onload = start;
img.src = "https://dl.dropboxusercontent.com/u/139992952/multple/landscape.png";

function start() {
    var c1 = scaleImage(img, 0.50);
    var c2 = scaleImage(c1, 0.50);
    document.body.appendChild(img);
    image1 = new Kinetic.Image({
        x: 10,
        y: 10,
        image: c2,
        draggable: true
    });
    layer.add(image1);
    layer.draw();
}

function scaleImage(source, scaleFactor) {
    var canvas = document.createElement("canvas");
    var ctx = canvas.getContext("2d");
    canvas.width = source.width * scaleFactor;
    canvas.height = source.height * scaleFactor;
    ctx.drawImage(source, 0, 0, source.width * scaleFactor, source.height * scaleFactor);
    return (canvas);
}