Skip to content

Instantly share code, notes, and snippets.

Created April 12, 2015 19:41
Show Gist options
  • Save anonymous/f37b5681daaf135c8db9 to your computer and use it in GitHub Desktop.
Save anonymous/f37b5681daaf135c8db9 to your computer and use it in GitHub Desktop.
JS Bin // source http://jsbin.com/madesolaxo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<script src="https://raw.githubusercontent.com/konvajs/konva/master/konva.min.js"></script>
</head>
<body>
<img src="data:image/jpeg;base64,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" id="image" style="display:none;">
<div id="konva" style="width: 800px; height: 600px;"></div>
<script id="jsbin-javascript">
if(window.devicePixelRatio) {
Konva.pixelRatio = window.devicePixelRatio;
}
var stage = new Konva.Stage({
container: 'konva',
width: 800,
height: 600
});
var layer = new Konva.Layer();
var group = new Konva.Group({
x: 0, y: 0
});
var image = document.getElementById('image');
image.onload = function () {
var imageNode = new Konva.Image({
image: image,
width: 123,
height: 139
});
group.add(imageNode);
group.cache({
x: 0, y: 0,
width: 123,
height: 139
});
group.filters([ Konva.Filters.Grayscale, Konva.Filters.Brighten ]);
group.brightness(0.2);
stage.draw();
};
layer.add(group);
stage.add(layer);
stage.draw();
</script>
<script id="jsbin-source-javascript" type="text/javascript">if(window.devicePixelRatio) {
Konva.pixelRatio = window.devicePixelRatio;
}
var stage = new Konva.Stage({
container: 'konva',
width: 800,
height: 600
});
var layer = new Konva.Layer();
var group = new Konva.Group({
x: 0, y: 0
});
var image = document.getElementById('image');
image.onload = function () {
var imageNode = new Konva.Image({
image: image,
width: 123,
height: 139
});
group.add(imageNode);
group.cache({
x: 0, y: 0,
width: 123,
height: 139
});
group.filters([ Konva.Filters.Grayscale, Konva.Filters.Brighten ]);
group.brightness(0.2);
stage.draw();
};
layer.add(group);
stage.add(layer);
stage.draw();</script></body>
</html>
if(window.devicePixelRatio) {
Konva.pixelRatio = window.devicePixelRatio;
}
var stage = new Konva.Stage({
container: 'konva',
width: 800,
height: 600
});
var layer = new Konva.Layer();
var group = new Konva.Group({
x: 0, y: 0
});
var image = document.getElementById('image');
image.onload = function () {
var imageNode = new Konva.Image({
image: image,
width: 123,
height: 139
});
group.add(imageNode);
group.cache({
x: 0, y: 0,
width: 123,
height: 139
});
group.filters([ Konva.Filters.Grayscale, Konva.Filters.Brighten ]);
group.brightness(0.2);
stage.draw();
};
layer.add(group);
stage.add(layer);
stage.draw();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment