scale stage

by kzhdev

HTML

<script type="text/javascript" src=https://dl-web.dropbox.com/get/Public/kinetic.js?_subject_uid=805914&w=AADtlX6CYE_2PB-ETiiVM0Pl-Uap3VQiB5H7S3wrPCNJhw></script>
<div id="canvasDiv"></div>
<img id="hit" src=""/>
<div id="scaledCanvas"></div>
<img id="hit2" src=""/>

JavaScript

var scaleStage = new Kinetic.Stage({
    container: 'scaledCanvas',
    width: 150,
    height: 150,
    scaleX: 2,
    scaleY: 2,
    draggable: false
});

var layer2 = new Kinetic.Layer();
var group2 = new Kinetic.Group({
    x: 5,
    y: 5
});
var groupInner2 = new Kinetic.Group();
var rect2 = new Kinetic.Rect({
    width: 25,
    height: 25,
    stroke: 'blue',
    strokeWidth: 1,
    fill: 'green'
});
var text2 = new Kinetic.Text({
    x: 5,
    y: 5,
    fill: 'black',
    text: 'A'
});
scaleStage.add(layer2);

groupInner2.add(rect2);
groupInner2.add(text2);
group2.add(groupInner2);
/*groupInner2.cache({
    x: 5,
    y: 5,
    width: 25,
    height: 25
});*/
layer2.add(group2);
groupInner2.cache({
    x: 3,
    y: 3,
    width: 54,
    height: 54
});
/*group2.cache({
    x: -1.5,
    y: -1.5,
    width: 100,
    height: 100
});*/
layer2.draw();

document.getElementById("hit2").src = layer2.getHitCanvas().toDataURL();