For a Project I want to take the content of a canvas (Called SAVE\_CV) and display it in another, smaller canvas.

Some things that I am aware of so far that could be causing me problems: resizing a canvas clears its content, the JS-size of a canvas is different from the CSS-size.

I want the smaller canvas to be 500px wide and appropriately high.

```
function restoreTaggingCV() {
    var cv = document.getElementById( 'taggingCV' );
    var ctx = cv.getContext( "2d" );
    var styleHeight = SAVE_CV.height * 500 / SAVE_CV.width;
    ctx.drawImage(SAVE_CV, 0, 0, cv.width, cv.height);
}

```

This is my Code so far. Whenever I try to resize the smaller canvas appropriately it only gives me a blank canvas with nothing in it. I tried to set the size with `"cv.height = X" and "cv.style.height = styleHeight + 'px'"` but neither worked. Also I would love to set the width of the canvas using CSS.

Appreciate any help.

**EDIT**
I want the image in a picture because later I want the user to mark areas in the smaller version which I then want to use to create individual imaged from the big version. I want to visualise thise area to the user. I probably could do all this by using an image and putting divs over it or something but I just fell more comfident using a canvas since I am pritty new to HTML and CSS.