javascript - resize a canvas and duplicate the resized content inside another one -


How can I duplicate the contents of a resized canvas inside each other?

If I make a picture within the canvas and after that I will resize it, when I clone the material, then I mimic the canvas first on its original size, even if its shape has changed .

html:

  & lt; Img id = "image" src = "the-image.png" width = "275" height = "95" /> & Lt; Canvas ID = "canvas-image" width = "275" height = "95" & gt; & Lt; / Canvas & gt; & Lt; Canvas ID = "canvas-small" width = "138" height = "48" & gt; & Lt; / Canvas & gt;   

JS:

  var img = $ ('image'); Var cnvImage = $ ('canvas-image'); CtxImage = cnvImage.getContext ('2d'); CtxImage.drawImage (img, 0,0); CnvImage.setStyles ({'width': 138, 'height': 48}); Var cnv Little = $ ('canvas-small'); CtxLittle = cnvLittle.getContext ('2d'); CtxLittle.drawImage (cnvImage, 0,0);  

Resizing the canvas element not changing the underlying image raster The size of this is exactly like the img tag, where the actual content of the image is not changed by changing the shape.

If you want to draw a small version of an image, then you just context2d.drawImage () :

  context.drawImage ( Image, destination X, destination Y, destination height, destination);   

is an excellent place to go; It has a lot to read, but, like eating your vegetables, it's good for you.

Comments

Popular posts from this blog

mysql - BLOB/TEXT column 'value' used in key specification without a key length -

c# - Using Vici cool Storage with monodroid -

python - referencing a variable in another function? -