Load image from url and draw to HTML5 Canvas

by

Simple, just create an image object in JavaScript, set the src, and wait for the load event before drawing.

Working Example:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = new Image();
img.onload = function() {
    ctx.drawImage(img, 0, 0);
};
img.src="https://cdn.sstatic.net/stackexchange/img/logos/so/so-icon.png";
<canvas id="myCanvas"></canvas>

More Related Contents:

  1. Resize image with javascript canvas (smoothly)
  2. How to clear the canvas for redrawing
  3. HTML5 Canvas Resize (Downscale) Image High Quality?
  4. HTML5 Canvas camera/viewport – how to actually do it?
  5. Can I get image from canvas element and use it in img src tag?
  6. Capture frames from video with HTML5 and JavaScript
  7. Draw border around nontransparent part of image on canvas
  8. How to use Google fonts in Canvas when Drawing DOM objects in SVG?
  9. addEventListener for keydown on Canvas
  10. Save canvas as jpg to desktop [duplicate]
  11. HTML canvas – drawing disappear on resizing
  12. How to flip images horizontally with HTML5
  13. canvas getContext(“2d”) returns null
  14. clearing circular regions from HTML5 Canvas
  15. How to detect shape on a transparent canvas?
  16. HTML5 Canvas API – formatting individual words with italics
  17. Scaling an image to fit on canvas
  18. True Isometric Projection with HTML5 Canvas
  19. canvas- Cropping images in different shapes
  20. Using HTML5/Canvas/JavaScript to take in-browser screenshots
  21. Resizing an image in an HTML5 canvas
  22. Zoom Canvas to Mouse Cursor
  23. Zoom in on a point (using scale and translate)
  24. how to show alternate image if source image is not found? (onerror working in IE but not in mozilla) [duplicate]
  25. Detecting WebP support
  26. canvas2d toDataURL() different output on different browser
  27. How do I rotate a single object on an html 5 canvas?
  28. Resize a Base-64 image in JavaScript without using canvas
  29. Change image in HTML page every few seconds
  30. How can I get DPI from image in JS?

Leave a Comment