Adding values to an array with a function javascript

Background info to the problem: What I am trying to do is every time a user clicks a button I want to convert a canvas to the dataURL value and then store that value in an array. So far I can get the data URL reference but it only ever adds one value to the array.

The function "dataurl" gets the canvas an creates the dataURL: Code:

function dataurl () {

var a = document.getElementById("theCanvas");
var context = a.getContext("2d");
var img = document.createElement("img");
var dataURL = a.toDataURL();





addToArray(dataURL);

}

It then calls the addToArray function (I have created the array outside the function):

myImages = new Array();
function addToArray(URL){
//  alert(URL);
    myImages.push(URL);
    alert(myImages.length);


}

The alert always comes out as 1. the dataurl function is initially called when the user clicks a button:

 <input class="button" type="submit" name="save" value="Save" onclick="dataurl();"/>

The reason I'm trying to add these to an array is to store images (at the bottom) on screen of the canvas when the user hits the save button.

Answers


You're alerting the length of the array, myImages.length. Change to alert(myImages);

function addToArray(URL){
 //  alert(URL);
    myImages.push(URL);
    alert(myImages);
}

Need Your Help

Javascript : Preload loading image

javascript jquery loading onload preloading

I'm having trouble when displaying my loader in Javascript. Indeed, I have a lot of heavy videos in my assets folders, and when I load my page in Javascript, my image loader is showing only after a...