0

I am implement a image editor with canvas using google closure, and when I try to use canvas to drawImage from an img element, the canvas cannot display correct size of image, the code is as the following:

// replace image with canvas
  var $originImage = goog.dom.getElementByClass('testImageClass', $sectionDom);
  var $canvas = goog.dom.getElement('testCanvasId');
  if ($originImage && $canvas) {
    var ctx = $canvas.getContext("2d");
    ctx.drawImage($originImage, 0, 0, $originImage.clientWidth, $originImage.clientHeight);
    goog.dom.classlist.add($originImage, 'display-none');
    goog.dom.classlist.remove($canvas, 'display-none');
  }

And the display is like this: enter image description here

the upper block is the original image and the lower block is the canvas. Do you know the reason? Thanks in advance!

Hugh.Wang
  • 17
  • 1
  • 5
  • Maybe because you do set the canvas size only through CSS? https://stackoverflow.com/questions/5034529/size-of-html5-canvas-via-css-versus-element-attributes – Kaiido Nov 29 '17 at 05:44
  • Yes, I have removed it from css files and it truely works well. Thanks a lot! – Hugh.Wang Nov 29 '17 at 06:36

0 Answers0