JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.2.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/camanjs/3.3.0/caman.full.min.js"></script>
<button id="myButton">Lomo the draggable Star</button>
test
<div id="container"></div>
CSS
body {
padding:20px;
}
#container {
border:solid 1px green;
margin-top: 10px;
width:640px;
height:640px;
}
JavaScript
var stage = new Kinetic.Stage({
container: 'container',
width: 640,
height: 640
});
var layer = new Kinetic.Layer();
stage.add(layer);
// create an offscreen canvas
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
// load the star.png
var img = new Image();
img.onload = start;
img.crossOrigin = "anonymous";
img.src = "https://dl.dropboxusercontent.com/u/47067729/Foto%2014.11.14%2000%2007%2046.jpg";
// when star.png is loaded...
function start() {
var tmpWidth = Math.floor(img.width /2);
var w = Math.min(tmpWidth, 640);
var h = img.height * w / img.width;
w = 640;
h = 640;
// draw the star image to the offscreen canvas
canvas.width = w;
canvas.height = h;
ctx.drawImage(img, 0, 0, w, h);
// create a new Kinetic.Image
// The image source is the offscreen canvas
var image1 = new Kinetic.Image({
x: 0,
y: 0,
image: canvas,
draggable: true
});
layer.add(image1);
layer.draw();
Caman(canvas, function () {
this.orangePeel().render(function () {
layer.draw();
});
});
}