HTML5 Canvas background image

by

Theres a few ways you can do this. You can either add a background to the canvas you are currently working on, which if the canvas isn’t going to be redrawn every loop is fine. Otherwise you can make a second canvas underneath your main canvas and draw the background to it. The final way is to just use a standard <img> element placed under the canvas. To draw a background onto the canvas element you can do something like the following:

Live Demo

var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d");

canvas.width = 903;
canvas.height = 657;


var background = new Image();
background.src = "http://www.samskirrow.com/background.png";

// Make sure the image is loaded first otherwise nothing will draw.
background.onload = function(){
    ctx.drawImage(background,0,0);   
}

// Draw whatever else over top of it on the canvas.

More Related Contents:

  1. HTML5 Canvas Rotate Image
  2. Html5 canvas drawImage: how to apply antialiasing
  3. How to make rooftext effect and valley text effect in HTML5 (or Fabric.js)
  4. How to clear the canvas for redrawing
  5. HTML5 Canvas Resize (Downscale) Image High Quality?
  6. Resize image with javascript canvas (smoothly)
  7. Drawing an SVG file on a HTML5 canvas
  8. How can I convert an HTML element to a canvas element?
  9. Drawing text to with @font-face does not work at the first time
  10. What’s the best way to set a single pixel in an HTML5 canvas?
  11. Capture frames from video with HTML5 and JavaScript
  12. How to change the opacity (alpha, transparency) of an element in a canvas element?
  13. using HTML5 Canvas – rotate image about arbitrary point
  14. Rendering HTML elements to
  15. Load image from url and draw to HTML5 Canvas
  16. HTML5 Canvas getImageData and Same Origin Policy
  17. Animated GIF in HTML5 canvas
  18. HTML canvas – drawing disappear on resizing
  19. Chart.js canvas resize
  20. Combining two or more Canvas elements with some sort of blending
  21. What is the difference between SVG and HTML5 Canvas?
  22. How can I use custom fonts in an HTML5 Canvas element?
  23. Subpixel anti-aliased text on HTML5’s canvas element
  24. Draw SVG on HTML5 Canvas with support for font element
  25. How to detect shape on a transparent canvas?
  26. Fast and responsive interactive charts/graphs: SVG, Canvas, other?
  27. How put percentage width into html canvas (no css)
  28. HTML5 Canvas and Line Width
  29. HTML5 drag and drop images from a toolbar to a canvas
  30. HTML canvas with scrollbar

Leave a Comment