How to add image to canvas

by

You need to wait until the image is loaded before you draw it. Try this instead:

var canvas = document.getElementById('viewport'),
context = canvas.getContext('2d');

make_base();

function make_base()
{
  base_image = new Image();
  base_image.src="https://stackoverflow.com/questions/6011378/img/base.png";
  base_image.onload = function(){
    context.drawImage(base_image, 0, 0);
  }
}

i.e. draw the image in the onload callback of the image.

More Related Contents:

  1. How to clear the canvas for redrawing
  2. HTML5 Canvas Resize (Downscale) Image High Quality?
  3. Disable Interpolation when Scaling a
  4. How to draw an inline svg (in DOM) to a canvas?
  5. How to draw an oval in html5 canvas?
  6. Convert SVG to PNG with applied images as background to svg elements
  7. Any way to clone HTML5 canvas element with its content?
  8. Best way to detect that HTML5 is not supported
  9. Getting mouse location in canvas [duplicate]
  10. JavaScript: Extract video frames reliably
  11. Capture frames from video with HTML5 and JavaScript
  12. Text wrap in a element
  13. JavaScript: getting ImageData without canvas
  14. jQuery equivalent of getting the context of a Canvas
  15. Load image from url and draw to HTML5 Canvas
  16. HTML Canvas: How to draw a flipped/mirrored image?
  17. make canvas as wide and as high as parent
  18. How to fill the whole canvas with specific color?
  19. HTML5 responsive canvas: resizing the browser canvas draw disappear
  20. HTML canvas – drawing disappear on resizing
  21. getting mouse position with javascript within canvas
  22. Is there a way to curve / arc text using CSS3 / Canvas
  23. dotted stroke in
  24. How to scale an imageData in HTML canvas?
  25. draw 10,000 objects on canvas javascript
  26. Canvas text rendering (blurry)
  27. How to detect shape on a transparent canvas?
  28. Creating a Clickable Grid in a Web Browser
  29. JavaScript runtime error: ‘$’ is undefined
  30. canvas- Cropping images in different shapes

Leave a Comment