Skip navigation
Currently Being Moderated

how in a canvas HTML5 I can add more than one image,... is any stack order

Dec 6, 2012 11:53 PM

Tags: #html5-canvas

how in a canvas HTML5 I can add more than one image,... is any stack order?

 
Replies
  • Currently Being Moderated
    Dec 7, 2012 3:12 AM   in reply to lsepolis123

    There's no z-index type stacking order for <canvas> and images are drawn accordeing to the code execution order. However you can use globalCompositeOperation to draw a shape underneath the existing elements:

     

    context.globalCompositeOperation = "destination-over"; // draw underneath

     

    --

    Kenneth Kawamoto

    http://www.materiaprima.co.uk/

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 7, 2012 7:24 AM   in reply to lsepolis123

    how many images overlap and seem all or part of them, can have in canvas?

    I don't think there's a limit for the number of elements you can darw in a <canvas> but I suppose your browser will eventually start complaining that your script is running slow and wants to abort it

     

    canvas or an image can saved in localStorage html5?

    You can generate an image data from <canvas> using toDataURL() method.

     

    --

    Kenneth Kawamoto

    http://www.materiaprima.co.uk/

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 7, 2012 9:17 AM   in reply to lsepolis123

    Here I am converting the <canvas> to an image data, storing to the local storage, then displaying that in the same canvas:

    var canvas = document.getElementById("canvas");

    var context = canvas.getContext("2d");

    var canvasData = canvas.toDataURL();

    window.localStorage.canvasImage = canvasData;

    var img = new Image();

    img.src = window.localStorage.canvasImage;

    img.onload = function () {    

         context.drawImage(img, 200, 0);

    }

    --

    Kenneth Kawamoto

    http://www.materiaprima.co.uk/

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 7, 2012 9:50 AM   in reply to lsepolis123

    You cannot set window.location to a data, you can only set it to an URL.

     

    --

    Kenneth Kawamoto

    http://www.materiaprima.co.uk/

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 7, 2012 2:43 PM   in reply to lsepolis123

    this i want is appear a save as image dialog .... how do it?

    The short answer is: no, you can't do it. The long answer is: it's possible but it's not very straightforward and there's no cross-browser solution. These posts should get you started:

    http://hackworthy.blogspot.co.uk/2012/05/savedownload-data-generated-i n.html

    http://www.html5rocks.com/en/tutorials/file/filesystem/

     

    Re. globalCompositeOperation have a look at this page:

    https://developer.mozilla.org/en-US/docs/Canvas_tutorial/Compositing

     

    --

    Kenneth Kawamoto

    http://www.materiaprima.co.uk/

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 8, 2012 6:38 AM   in reply to lsepolis123

    Shapes and texts are drawn instantaneously but images are drawn only after the data is loaded. Therefore even your code to draw shapes comes after your background image code, by the time the image is ready to be drawn your shapes are already on canvas so that the image will go on top.

     

    Call your shape drawing functions on image.onload.

     

    --

    Kenneth Kawamoto

    http://www.materiaprima.co.uk/

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 8, 2012 8:24 AM   in reply to lsepolis123

    Not sure if I get your question but here's a simple example - it displays the background image and then draw a circle on top:

    var canvas = document.getElementById("canvas");

    var context = canvas.getContext("2d");

    var background = new Image();

    background.src = "image.jpg";

    background.onload = function() {

                context.drawImage(this, 0, 0);

                context.beginPath();

                context.arc(40, 40, 20, 0, Math.PI*2, true);

                context.fill();

    }

    --

    Kenneth Kawamoto

    http://www.materiaprima.co.uk/

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 8, 2012 9:47 AM   in reply to lsepolis123

    btw above you used:

     

    window.localStorage.canvasImage;

    this is the same as:

    window.localStorage.getItem("canvasImage");

    or

    window.localStorage["canvasImage"];

     

    ??

    Yes those 3 are the same, I just used the shortest

     

    --

    Kenneth Kawamoto

    http://www.materiaprima.co.uk/

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points