How to make kineticjs canvas stage responsive?

@giovanny.lueilwitz 

To make a KineticJS canvas stage responsive, you will need to adjust the stage size dynamically based on the dimensions of the parent container or the window size.

Here are the steps to make a KineticJS canvas stage responsive:

1. Get the dimensions of the parent container or the window size using JavaScript.
2. Set the dimensions of the canvas stage based on the container dimensions. You can use the setWidth() and setHeight() methods of the stage object to set the dimensions dynamically.
3. Use the window.addEventListener() method to listen for the resize event on the window. When the window is resized, update the dimensions of the canvas stage accordingly. Here is an example code snippet to make the canvas stage responsive:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

// Get the parent container or window size
var container = document.getElementById('container');
var containerWidth = container.offsetWidth;
var containerHeight = container.offsetHeight;

// Create a KineticJS stage
var stage = new Kinetic.Stage({
  container: 'container',
  width: containerWidth,
  height: containerHeight
});

// Set the canvas stage dimensions
stage.setWidth(containerWidth);
stage.setHeight(containerHeight);

// Dynamically resize the canvas stage on window resize
window.addEventListener('resize', function() {
  var newContainerWidth = container.offsetWidth;
  var newContainerHeight = container.offsetHeight;
  
  // Set new dimensions for the stage
  stage.setWidth(newContainerWidth);
  stage.setHeight(newContainerHeight);
});

By following these steps, you can make a KineticJS canvas stage responsive and adjust its size based on the dimensions of the parent container or window size.