javascript - Save/Load canvas from a paint-game -

I have coded a very simple "paint-game", on which Corner Black is just the code

  var canvas = document.getElementById ("drawingpad"); Var Context = Canvas Gate Contact ("2D"); Var isMouseDown = false; Var mousex = 0; Var mouse Y = 0; Context.strokeStyle = "# 000000"; // mn lar VA ¥ RSvarta stroke som blir va ¥ r pensel // Nør anv ndndaren aktiverar muspekaren PA ¥ VA ¥ r Canvas canvas.addEventListener ("mousedown", function (evt) {isMouseDown = true mouseX = Evt.offsetX; mouseY = evt.offsetY; context.beginPath (); reference. MoveTo (mouseX, mouseY);}); Window.addEventListener ("mouseup", function (evt) {isMouseDown = false;}); // Nør anv ndander flyttar PA ¥ muspekaren canvas.addEventListener ("MouseMove", function (evt) {if (isMouseDown) {mouseX = evt.offsetx; katar = evt.offsetY; context.lineTo (mouseX, Katar) ; Context stroke ();}});   
 The next step is finding me to save the canvas and then there are some ways to load other pictures that you attract before, I was looking for an answer, maybe local Is storage a way, or is it the easiest way to do it? (I'm very new in the canvas and I only have smiles in JS and HTML / CSS)   
 
 
 if If you are using pixels only, you can use  imageData :  
  var data using the = canvas.getImageData (0,0, width, height) Can;   
 Now you only need to send an AJAX request (to stop page load) on your server and send the image to a database. Something like this:  
  $ ajax ({type: "post", url: '/ API / storeData', data: data, datatype: 'application / json'}).   
 After you can create a button that receives the imagedata with sever request from sever  
  $ ajax ({type: .. "GET", URL: '/ Api / getdata', success: onSuccess});   
 and putImageData ()  using the method  to renew your image:  
  canvas.putImageData (data, 0, 0);   
 And then you have your image back!