Drawing a Canvas into a smaller Canvas not working

Question

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.

score 2 · Accepted Answer · answered Sep 02 '13 at 14:57

Try using the CanvasRenderingContext2d.prototype.scale method. It sets the scale factor of the canvas and renders anything in the current state with it's dimensions multiplied by the factor.

So before you use the drawImage function, you scale the context appropriately (in this case, down). For example:

context.save();
context.scale(0.5, 0.5);
context.drawImage(canvas, 0, 0);
context.restore();

This would render the canvas on the context at 0.5 times it's current size. See in this fiddle how I used it to mirror a larger canvas onto a smaller, separate one.

score 0 · Answer 2 · answered Sep 02 '13 at 13:26

0

Canvas objects don't like to be resised. After drawing Your image simply convert it toDataURL() and set as image source. They You may resize image as you want.

$img.attr('src',canvas.toDataURL());

answered Sep 02 '13 at 13:26

Flash Thunder

11,672
8
47
91

But I would love to have it in a canvas. Adding some explaination why to post. – H_end-rik Sep 02 '13 at 13:27
It simply can't be done, as far as I noticed. Every time You try to resize canvas, it content dissapears. That's the way it works... – Flash Thunder Sep 02 '13 at 13:28
But thats not a bad thing, I want the resize the canvas and then draw into it. So it's okay when the resize clears the canvas. – H_end-rik Sep 02 '13 at 13:30
http://stackoverflow.com/questions/2303690/resizing-an-image-in-an-html5-canvas ... still uses my method, sorry :) – Flash Thunder Sep 02 '13 at 13:32

Drawing a Canvas into a smaller Canvas not working

2 Answers2