How to change the height of the HTML5 canvas sketchpad?

Question

I use the Responsive Sketchpad - demo and Github . The only thing I changed is add background image, so I added this CSS:

.canvas {
    background-color: transparent;
    background-size: cover;
    background-image: url(example.jpg);
}

But my problem is with height. What is the proper way to set the height of that canvas box and keep background image responsive? For example how align the height of canvas box (with background image) to the height of right box (with buttons) in demo?

Answer 1

add a element in css and it will surly works:

.canvas {
background-color: transparent;
background-size: cover;
background-image: url(example.jpg);
height : 100% / 100vh;

}

make height component